轻量级前端MVVM框架avalon,它兼容到 IE6 (其他MVVM框架，KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),它可以更高效地运行于IE10等新版本浏览器中.代码量少,方便格式化输出.
AvalonJS的使用很方便,类似基础标签绑定值,前端代码非常简洁,如果你有一定的JS基础,上手都是很快的.大家下来可以了解一下.
不闲聊,直接看部分代码示例:
代码语言：javascript复制 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>
