离线在MVC4中的使用

最近在项目中用到了离线功能，自己感觉挺高端的，但是遇到了一些问题。

现在工作告一小段落，就把这次离线工作中遇到的关键技术点和难题记录下来。

什么是离线，什么时候需要离线

离线：Offline，不联网也能使用。简单说就是在线的时候下载保存一些文件到本地，然后在离线的时候，依赖这些文件实现类似在线的操作。最好做到让使用者没有明显的感觉到在线、离线的区别。

什么时候需要离线：比如我们要去深山老林做一些考察，那里没有Wifi，没有移动信号，但是我们需要保存一些数据到移动电子设备上。这时候离线就是一个不错的选择。

 

在项目中是如何做到的离线

1 所有的需要离线操作的View对应的Action返回Model的时候，增加一个标记字段，比如Bool? IsOffline{get;set;}，离线为True，其他为False；

2 所有的View中增加一个离线Layout，基本模式是

@{
    ViewBag.Title = "Offline";
    if (Model.IsOffline)
    {
        Layout = "~/Views/Shared/_OfflineLayoutView.cshtml";
    }
}

 

3 OfflineLayoutView是离线功能的一个核心点--Manifest。

<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" id="html" manifest="@Url.Action("Manifest", "Offline", new { area = "" })">
<!--<![endif]—>

这里指向了一个Action ：Manifest

View ：Manifest是一个列表清单文件，列下了所有需要在离线中使用到的文件，包括但不仅限于Js，Css，View等。

大致代码如下

   1:  @using System.Configuration;
   2:  @{ 
   3:      Response.ContentType = "text/cache-manifest";
   4:      Response.ContentEncoding = System.Text.Encoding.UTF8;
   5:      Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);
   6:   
   7:      Layout = null; 
   8:  }CACHE MANIFEST
   9:  #@Model.LastBuild
  10:   
  11:  <text>@Url.Action("Offline***List", "***", new { area = "**" })</text>
  12:  NETWORK:
  13:  *
  14:   
  15:  CACHE:
  16:  #CSS files
  17:  @Url.Content("~/Content/")**.css
  18:   
  19:  #JS files
  20:  @Url.Content("~/Scripts/")jquery-1.8.3.min.js

 

4 在在线的界面中增加一个按钮 Enter Offline Model,链接到上述View的某一个即可。

之后就进入离线了，第一次进入离线的时候会下载所有清单文件到本地。

下载之后的文件可以在Chrome浏览器中清楚的看到，地址 ：chrome://appcache-internals/

IE的查看方法暂时还不明了

 

遇到的一些问题

 

 

 

 

1 在我的开发环境下是每次Build工程之后才会下载文件，但是同事的环境是修改之后刷新就会下载，和普通的在线没什么区别。

注意这可能是一个坑，因为修改了源文件，直接刷新，可能没有起到作用，浏览器没有变化，请检查是否下载了修改后的文件；

2 Jquery的问题。 View中某一元素设置Class为Phone，然后

<script type="text/javascript">
  if (jQuery.validator) {
jQuery.validator.addMethod("phone", function (phone_number, element) {
            phone_number = phone_number.replace(/\s+/g, "");
            return 。。。。。;
        }, "Please specify a valid phone number");
。。。。

 

来判断输入的是否是合法的电话号码

在线的时候没任何问题，离线就各种不好使。最后无奈在 $(document).ready()中重写了一遍才OK

 

2014/3/24 修改  终于查明了原因，在Layout中引入了Jquery，在View中再次引入了一遍，造成冲突

 

可以进入离线了，但是没有联网，数据怎么保存呢？项目中使用的是LocalStorage

下篇文章预告：LocalStorage的一些使用

posted @ 2014-03-19 11:22  JustDotNet  阅读(311)  评论(0)  编辑  收藏  举报