离线在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的一些使用