easyUI框架之学习3美高梅网址,MVVM实战部分源码
分类:新闻中心

AvalonJS+MVVM实战部分源码,avalonjsmvvm

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

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

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

美高梅网址 1 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> Accredit.cshtml 美高梅网址 2 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> Accredit.cshtml

 

轻量级前端MVVM框架avalon,它兼容到 IE6 (其他MVVM框架,KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),它可...

@model MVCEasyUI.Models.Sale.PageResult<MVCEasyUI.Models.Sale.Order>
@{
ViewBag.Title = "AddSaleOrder";
}
<!DOCTYPE html>
<html>
<head >
<link href="~/Scripts/easyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Scripts/easyUI/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/easyUI/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/easyUI/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyUI/locale/easyui-lang-zh_CN.js"></script>
<script >
var _id = 1;
$(function () {

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryDialog._Default" %>

  1. REST服务已经成为最新的服务端开发趋势,ASP.NET Web API即为.NET平台的一种轻量级REST架构.
  2. ASP.NET Web API直接借鉴了ASP.NET MVC的设计,两者具有非常类似的编程模式。
  3. ASP.NET Web API以Controller的形式来定义服务,而Controller中的Action方法则代表具体的操作。

}); function AppendRow() {
_id++;
var objId = 'tmp_' + _id;
var tmp = "<div id=" + objId + "><a href='#' class='easyui-linkbutton' data-options='iconCls:"icon-remove"' >删除</a> <a href='#' class='easyui-linkbutton' data-options='iconCls:"icon-edit"' >编辑</a></div>";
 
$('#OrderList').datagrid('appendRow', {
CorId: 0,
PlatfromId: 1,
ShopId: 2,
Opr:tmp
});
var obj = $("#" + objId);
$.parser.parse(obj);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">

  • 以下示例展示一个轻量级的架构:{
    Web前端:HTML+jQuery +KnockOut.js
    服务端:ASP.NET Web API
    通信协议:HTTP+JSON
    }

}

<html xmlns=" >
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="Style/jquery-ui-themeroller.css" type="text/css" />
    <asp:PlaceHolder id="pl" runat="server" />
    <script src="Common/Scripts/jquery-1.2.6.js"></script>
    <script src="Common/Scripts/ui.core.js"></script>   
    <script src="Common/Scripts/ui.draggable.js"></script>
    <script src="Common/Scripts/ui.resizable.js"></script>
    <script src="Common/Scripts/ui.dialog.js"></script>
    <style>body{font-size:12px;}</style>
</head>
<body>
    <form id="form1" runat="server">
     <script type="text/javascript">   
        $(function(){           
            $("#dialog").dialog({
                modal: true,
                draggable: true,
                resizable: true,
                autoOpen: true,
                width: 400,
                height: 230,
                position: 'center',
                title: '应用系统选择',
                overlay: {
                    opacity: 0.5,
                    background: "black"
                },
                buttons: {
                        '确定': function() {
                            $(this).dialog("close");
                        },
                        '取消': function() { $(this).dialog("close"); }
                }
            });
            $("#dialog2").dialog({
                modal: true,
                draggable: true,
                resizable: true,
                autoOpen: true,
                width: 400,
                height: 230,
                position: 'center',
                title: '应用系统选择',
                overlay: {
                    opacity: 0.5,
                    background: "black"
                },
                buttons: {
                        '确定': function() {
                            $(this).dialog("close");
                        },
                        '取消': function() { $(this).dialog("close"); }
                }
            });
        });
    </script>
    <div id="dialog"><div>
    <table id="tbl_aaa" border="1"><tr><td>
    ABCDEFGHIJKLJMNABCDEFGHIJKLJMNABCDEFGHIJKLJMNABCDEFGHIJKLJMNABCD
    </td></tr></table></div>
    </div>
    <div id="dialog2">
    <table border="1"><tr><td>
    Hello,world=============================================================
    </td></tr></table>
    </div>
    <input type="button" href="javascript:void(0);" onclick="$('#dialog').dialog('open');" value="显示" />
    <input type="button" href="javascript:void(0);" onclick="$('#dialog2').dialog('open');" value="显示2" />
    </form>
</body>
</html>

服务定义:

function DeleteRow() {
var row = $('#OrderList').datagrid('getSelected');
alert(row);
if (row) {
var index = $('#OrderList').datagrid('getRowIndex', row);
$('#OrderList').datagrid('deleteRow', index);
}
}

public class ContactsController : ApiController
    {
        private static List<Contact> contacts = new List<Contact>
        {
            new Contact{
                Id="001",
                Name="张三",
                PhoneNo="123",
                EmailAddress="zhangsan@gmail.com"
            },
            new Contact{
                Id="002",
                Name="李四",
                PhoneNo="456",
                EmailAddress="lisi@gmail.com"
            }
        };

</script>
</head>

        // GET api/contacts
        public IEnumerable<Contact> Get()
        {
            return contacts;
        }

<body >
<h2>@Model.ResultName</h2>
<a href="#" onclick ="AppendRow()">添加一行</a>
<table id="OrderList" class="easyui-datagrid">
<thead >
<tr >
<th data-options="field:'CorId'">商家ID</th>
<th data-options="field:'PlatfromId'">平台ID</th>
<th data-options="field:'ShopId'">店铺ID</th>
<th data-options="field:'TreadId'">交易编号</th>
<th data-options="field:'TreadTime'">交易时间</th>
<th data-options="field:'Opr'">操作</th>
</tr>

        // GET api/contacts/5
        public Contact Get(string id)
        {
            return contacts.FirstOrDefault(c => c.Id == id);
        }

</thead>
<tbody >
@foreach (var order in Model.ResultList)
{
<tr id="Id@{@order.Id}">
<td id="CorId_@order.CorId">@order.CorId </td>
<td><a id="PlatfromId_@order.PlatfromId" href ="#">@order.PlatfromId </a></td>
<td><a id="ShopId_@order.ShopId" href ="#">@order.ShopId</a> </td>
<td>@order.TreadId </td>
<td>@order.TreadTime </td>
<td> <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick='DeleteRow()'>删除</a>
<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick=''>编辑</a>

        // POST api/contacts
        public void Post(Contact contact)
        {
            Delete(contact.Id);
            contacts.Add(contact);
        }

</td>
</tr>
}
</tbody>

        // PUT api/contacts/5
        public void Put(Contact contact)
        {
            contact.Id = Guid.NewGuid().ToString();
            contacts.Add(contact);
        }

</table>
</body>
</html>

        // DELETE api/contacts/5
        public void Delete(string id)
        {
            Contact contact = contacts.FirstOrDefault(c => c.Id == id);
            contacts.Remove(contact);
        }
    }

 服务调用:

美高梅网址 3美高梅网址 4

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>联系人列表</title>
  5     <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
  6     <script src="../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
  7 </head>
  8 <body>
  9     <div id="contacts">
 10         <table>
 11             <tr>
 12                 <th>
 13                     姓名
 14                 </th>
 15                 <th>
 16                     电话号码
 17                 </th>
 18                 <th>
 19                     Email地址
 20                 </th>
 21             </tr>
 22             <tbody>
 23                 <!-- ko foreach: allContacts -->
 24                 <tr>
 25                     <td data-bind="text:Name">
 26                     </td>
 27                     <td data-bind="text:PhoneNo">
 28                     </td>
 29                     <td>
 30                         <input type="text" class="textbox long" data-bind="value:EmailAddress" />
 31                     </td>
 32                     <td>
 33                         <a href="#" data-bind="click:$root.updateContact">修改</a> <a href="#" data-bind="click:$root.deleteContact">
 34                             删除</a>
 35                     </td>
 36                 </tr>
 37                 <!-- /ko -->
 38                 <tr data-bind="with:addedContact">
 39                     <td>
 40                         <input type="text" class="textbox" data-bind="value:Name" />
 41                     </td>
 42                     <td>
 43                         <input type="text" class="textbox" data-bind="value:PhoneNo" />
 44                     </td>
 45                     <td>
 46                         <input type="text" class="textbox long" data-bind="value:EmailAddress" />
 47                     </td>
 48                     <td>
 49                         <a href="#" data-bind="click:$root.addContact">添加</a>
 50                     </td>
 51                 </tr>
 52             </tbody>
 53         </table>
 54     </div>
 55     <script type="text/javascript">
 56         function ContactViewModel() {
 57             self = this;
 58             self.allContacts = ko.observableArray();
 59             self.addedContact = ko.observable();
 60 
 61             //加载联系人列表
 62             self.loadContacts = function () {
 63                 $.get("/api/contacts", null, function (data) {
 64                     self.allContacts(data);
 65                     var emptyContact = { Id: "", Name: "", PhoneNo: "", EmailAddress: "" };
 66                     self.addedContact(emptyContact);
 67                 });
 68             };
 69 
 70             //添加联系人
 71             self.addContact = function (data) {
 72                 if (!self.validate(data)) {
 73                     return;
 74                 }
 75                 $.ajax({
 76                     url: "/api/contacts/",
 77                     data: self.addedContact(),
 78                     type: "PUT",
 79                     success: self.loadContacts
 80                 });
 81             };
 82 
 83             //修改联系人信息
 84             self.updateContact = function (data) {
 85                 $.ajax({
 86                     url: "/api/contacts/",
 87                     data: data,
 88                     type: "POST",
 89                     success: self.loadContacts
 90                 });
 91             };
 92 
 93             //删除联系人
 94             self.deleteContact = function (data) {
 95                 $.ajax({
 96                     url: "/api/contacts/" + data.Id,
 97                     type: "DELETE",
 98                     success: self.loadContacts
 99                 });
100             };
101 
102             self.validate = function (data) {
103                 if (data.Name && data.PhoneNo && data.EmailAddress) {
104                     return true;
105                 }
106                 alert("请输入完整联系人信息!");
107                 return false;
108             }
109             self.loadContacts();
110         }
111         ko.applyBindings(new ContactViewModel());
112     </script>
113 </body>
114 </html>

View Code

 

本文由美高梅网址发布于新闻中心,转载请注明出处:easyUI框架之学习3美高梅网址,MVVM实战部分源码

上一篇:利用Delphi开发网络数据库应用,用Delphi开发数据 下一篇:ack问题分析
猜你喜欢
热门排行
精彩图文