离线在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:  [email protected]
  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

 

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

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

离线在MVC4中的使用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。