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