AvalonJS+MVVM实战部分源码

轻量级前端MVVM框架avalon,它兼容到 IE6 (其他MVVM框架,KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),它可以更高效地运行于IE10等新版本浏览器中.代码量少,方便格式化输出.

AvalonJS的使用很方便,类似基础标签绑定值,前端代码非常简洁,如果你有一定的JS基础,上手都是很快的.大家下来可以了解一下.

不闲聊,直接看部分代码示例:

  1 <script type="text/javascript"> var appPath = "@Url.Content("~/")";</script>
  2     @{
  3         HttpCookie cookie = Request.Cookies["UserLogin"] as HttpCookie;
  4         if (cookie != null)
  5         {
  6             TempData["OrgId"] = cookie["OrgId"];
  7         }
  8 
  9         var showname = "";
 10 
 11         if (cookie != null)
 12         {
 13             if (!string.IsNullOrEmpty(cookie["Name"]))
 14             {
 15                 TempData["Name"] = HttpContext.Current.Server.UrlDecode(cookie["Name"]);
 16             }
 17             TempData["Login_name"] = cookie["Login_name"];
 18             TempData["Login_pwd"] = cookie["Login_pwd"];
 19             TempData["Login_id"] = cookie["Login_id"];
 20             TempData["Authority"] = cookie["Authority"];
 21             TempData["OrgId"] = cookie["OrgId"];
 22             if (TempData["Name"] != "")
 23             {
 24                 showname = TempData["Name"].ToString();
 25             }
 26             else
 27             {
 28                 Response.Redirect("Login");
 29             }
 30         }
 31         else
 32         {
 33             Response.Redirect("Login");
 34         }
 35     }
 36 <script type="text/javascript">
 37     var OrgId = '@TempData["OrgId"]';//登录 获取的部门id
 38 </script>    
 39     <script src="~/LIMSAbleServer/LIMSAbleServerReg.js"></script>
 40     <script src="~/Scripts/Common/jquery-1.11.1.min.js"></script>
 41     <script src="~/Scripts/Common/jquery.form.js"></script>
 42     <script src="~/Scripts/Common/underscore.js"></script>
 43     <script src="~/Scripts/Common/jqueryToken.js"></script>
 44     <script src="~/Scripts/Common/avalon.js"></script>
 45     <link href="~/Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" />
 46     <script src="~/Scripts/javascript/chosen/chosen.jquery.min.js"></script>
 47     <script src="~/Scripts/Common/Common.js?date=2015-05-11-0211112108"></script>
 48     <script src="~/Scripts/artDialog/artDialog.source.js?skin=xhblue"></script>
 49     <script src="~/Scripts/artDialog/plugins/iframeTools.js?date=2015-08-111"></script>
 50     <script src="~/Scripts/RecordManage/Top.js?date=2015-11-10 1453"></script>
 51 <link href="../../Content/themes/base.css" rel="stylesheet" />
 52 <link href="../../Content/themes/default.css" rel="stylesheet" />
 53 <link href="../../Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" />
 54 <script src="../../Scripts/javascript/jquery-1.11.1.min.js"></script>
 55 <script src="../../Scripts/javascript/chosen/chosen.jquery.min.js"></script>
 56 <script src="../../Scripts/javascript/My97DatePicker/WdatePicker.js"></script>
 57 <script src="~/Scripts/Common/jqueryToken.js"></script>
 58 <script src="~/Scripts/Common/jquery.pagination.js"></script>
 59 <link href="~/Content/pagination.css" rel="stylesheet" />
 60 <script src="~/Scripts/javascript/common.js"></script>
 61 <script src="../../Scripts/RecordManage/Accredit.js?data=2015-11-10 1712"></script>
 62     <script type="text/javascript">
 63         $(function () {
 64             $(".i_user").hoverDelay({
 65                 hoverDuring: 0,
 66                 outDuring: 300,
 67                 hoverEvent: function () {
 68                     $(".userbox", $(".i_user")).slideDown("fast");
 69                 },
 70                 outEvent: function () {
 71                     $(".userbox", $(".i_user")).slideUp("fast");
 72                 }
 73             });
 74         });
 75         //延时通用
 76         (function ($) {
 77             $.fn.hoverDelay = function (options) {
 78                 var defaults = {
 79                     hoverDuring: 200,
 80                     outDuring: 200,
 81                     hoverEvent: function () {
 82                         $.noop();
 83                     },
 84                     outEvent: function () {
 85                         $.noop();
 86                     }
 87                 };
 88                 var sets = $.extend(defaults, options || {});
 89                 var hoverTimer, outTimer;
 90                 return $(this).each(function () {
 91                     $(this).hover(function () {
 92                         clearTimeout(outTimer);
 93                         hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
 94                     },
 95                     function () {
 96                         clearTimeout(hoverTimer);
 97                         outTimer = setTimeout(sets.outEvent, sets.outDuring);
 98                     });
 99                 });
100             }
101         })(jQuery);
102         $(function () {
103             $("#mygnmk li a").click(function () {
104                 $(this).addClass("active");
105             });
106         });
107 </script>
 1             <div class="dataWrap">
 2                 <div class="dataGrid">
 3                     <div class="gridMain">
 4                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
 5                             <tr>
 6                                 <th><span class="btnChose ctrlChosen" ms-click="checkboxSelect(this)"><input  name="" type="checkbox"  value="" /><i></i><em>全选</em></span></th>
 7                                 <th>受理单编号</th>
 8                                 <th>证书编号</th>
 9                                 <th>发证机关</th>
10                                 <th>发证日期</th>
11                                 <th>有效日期</th>
12                                 <th>授权状态</th>
13                                 <th>批准人</th>
14                                 <th>项目名称</th>
15                                 <th>测量范围</th>
16                                 <th>机构名称</th>
17                                 <th>准确度</th>
18                                @* <th>发证单位</th>*@
19                                 <th>录入人员</th>
20                                 <th>录入单位</th>
21                                 <th>受理日期</th>
22                                 <th>证书处理状态</th>
23                                 <th>操作</th>
24                             </tr>
25                             <tr ms-repeat="AccreditList">
26                                <td id="checkDetailList"><span  class="btnChose ctrlChosen " ms-click="checkboxOneSelect(this,el.id,el.Processing_state)"><input type="checkbox" /><i></i></span></td>
27                                 <td><a style="cursor: pointer;" ms-click="GetDetails(el.id)" class="heightColor">{{el.Acceptance_number}}</a></td>
28                                 <td>{{el.Certificate_number}}</td>
29                                 <td>{{el.Issuing_office}}</td>
30                                 <td>{{el.Issue_date==null?"":GetDate(el.Issue_date).Format('yyyy-MM-dd')}}</td>
31                                 <td>{{el.Effective_date==null?"":GetDate(el.Effective_date).Format('yyyy-MM-dd')}}</td>
32                                   <td ms-attr-id="'myzszt'+el.id">{{el.Accredit_state}}</td>
33                                 <td>{{el.Approver}}</td>
34                                 <td>{{el.Authorization_projectname}}</td>
35                                 <td>{{el.Measuring_range}}</td>
36                                 <td>{{el.Organization_name}}</td>
37                                 <td>{{el.Accuracy}}</td>
38                                 @*<td>{{el.}}</td>*@
39                                 <td>{{el.Input_person}}</td>
40                                 <td>{{el.Input_unit}}</td>
41                                 <td>{{el.Acceptance_date==null?"":GetDate(el.Acceptance_date).Format('yyyy-MM-dd')}}</td>
42                                 <td>{{el.Processing_state==0?"已提交":"待提交"}}</td>
43                                 <td><span class="heightColor moreTips">详情<i class="tipsIcon"></i>
44                                     <div class="menuGroupBox">
45                                         <ul>
46                                             <li ms-attr-id="'xq'+el.id"><a href="javascript:;" ms-click="GetDetails(el.id)">详情</a></li>
47                                             <li ms-attr-id="'tj'+el.id"><a href="javascript:;" ms-click="SubmitAccreditOneInfo(el.id)">提交</a></li>
48                                             <li ms-attr-id="'sc'+el.id"><a href="javascript:;" ms-click="DelAccreditInfo(el.id)">删除</a></li>
49                                         </ul>
50                                     </div>
51                                 </span></td>
52                             </tr>
53 
54                         </table>
55                     </div>
56                 </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5367
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3195
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2597
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏杨龙飞前端

scrollto 到指定位置

2534
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3879
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7

扫码关注云+社区