@model IEnumerable<Protal.Model.Data.User.User> <table> <tr> <th><input type="checkbox" /><label for="allcheck">全选</label></th> <th><a href="#" data-order="0">名称</a></th> <th>角色</th> <th>E-mail</th> </tr> <tbody> @foreach (var item in Model) { <tr> <td> <input type="checkbox" data-id="@item.UserName" /></td> <td> <a>@item.UserName</a> </td> <td> @Html.Raw(item.Role) </td> <td> @item.Email</td> </tr> }</tbody> <tfoot> <tr> <td colspan="4"> <span>@Html.Raw("共"+ViewBag.TotalUser+"人")</span> @*<span>@ViewBag.TotalPageCount</span>*@ </td> </tr> </tfoot> </table> <input type="hidden" value="@ViewBag.TotalPageCount"/>
3.脚本
其中用到的像checkall，infoShow 都是自己扩展的一些简单的方法，用于全选和提示。
$(function () { var options = { dataType: 'json', success: processJson }; pageagin($("#totoalpage").val()); //分页 function pageagin(totalcount) { $("#userpager").paginate({ count: totalcount, start: $("#page").val(), dispaly: $("#dispalypage").val(), boder: false, border_color: '#fff',//自己调整样式。 text_color: 'black', background_color: 'none', border_hover_color: '#ccc', text_hover_color: '#000', background_hover_color: '#fff', images: false, mouse: 'press', onChange: function (page) { //翻页 paging(page); $("#currentpage").val(page); } }); } //分页更新 function paging(page) { $.post("/Users/UserTable", { pageIndex: page, order: $("#userpart").attr("data-order"), filter: $.trim($("#usersearch").val()) }, function (data) { $("#userpart").html(data); }); } //排序 $("#usersort").live("click",function () { $("#userpart").triggerdataOrder(); paging( $("#currentpage").val()); }); //搜索 $("#usersearch").keyup(function() { paging($("#currentpage").val()); pageagin($("#totoalpage").val()); }); //处理form $("#userForm").submit(function () { $(this).ajaxSubmit(options); return false; }); function processJson(data) { if (data == 1) { location.reload(); } else { alert("添加失败"); } } //高亮 $("#unav li:eq(0)").addClass("active"); $("#adnav li:eq(2)").addClass("active"); //全选/全不选 $("#allcheck").checkall($("#usertable tbody input[type='checkbox']")); //删除用户 $("#deluser").click(function () { var checks = $("#usertable tbody input[type='checkbox']:checked"); var lens = checks.length; if (lens == 0) { $.infoShow("未选择删除对象",0); return false; } if (confirm("确定要删除所选中用户？")) { for (var i = 0; i < lens; i++) { var $chek = checks.eq(i); var id = $chek.attr("data-id"); var tr = $chek.parent().parent(); $.post("Users/DeleteUser", { id: id }, function (data) { if (data == 1) { tr.fadeOut(); $.infoShow("删除成功", 1); } else { $.infoShow("删除失败", 0); } }); } } return true; }); // 增加用户 $("#adduserbt").click(function() { $(".modal-header").show(); }); })
到这里就是全部的代码,供大家和自己参考。
再给大家看两个效果图，一个是kendoui的grid，一个是Angular做的分页。后面有机会给大家介绍。
Kendo- Grid
Kendo和MVC框架融合度比较高，它的核心代码如下：
@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel> @(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Bound(p => p.ProductID).Groupable(false); columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.UnitsInStock); }) .Pageable() .Sortable() .Scrollable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) ) )
AngularJs 核心还是调用封装好的API函数，相当于上面的仓库中的方法，然后通过模型绑定。
总结一下：自己实现代码量比较多，功能不全，有重复造轮子的感觉，但可以较好的控制，基本够用；kendo的方式感觉高大全，用熟了开发速度快。就是多一些引用，且需要担心kendoui和其他的ui框架会有冲突。前端MVVM的方式我了解还不够深，感觉前端脚本的代码量也蛮多，效果不错。但生成的html代码很少。上面这个表格。chrome F12或者右键查看源码都是下面这样子的：
主要的就一个div
<div data-ng-app="blogAdmin" data-ng-view=""></div>
自我保护倒是蛮好，也就是SEO可能有问题。应该还有更好的方式，猿友们指点指点。
<html> <head> <title>Name of the blog (Admin)</title> <link href="https://www.jb51.net/pics/blogengine.ico" type="image/x-icon" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta content="yes" /> <meta content="black" /> <meta content="telephone=no" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="https://www.jb51.net/Content/bootstrap/bootstrap.css"/> <link href="https://www.jb51.net/Content/bootstrap/bootstrap-theme.css"/> <link href="https://www.jb51.net/Content/toastr.css"/> <link href="https://www.jb51.net/Content/font-awesome.css"/> <link href="https://www.jb51.net/Content/editor.css"/> <link href="https://www.jb51.net/Content/app.css"/> <script type="text/javascript"> if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style"); var mq = "@-ms-viewport{width:auto!important}"; msViewportStyle.appendChild(document.createTextNode(mq)); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } </script> </head> <body> <script type="text/javascript"> var SiteVars = { ApplicationRelativeWebRoot: 'https://www.jb51.net/', RelativeWebRoot: 'https://www.jb51.net/', BlogInstanceId: '96d5b379-7e1d-4dac-a6ba-1e50db561b04', UserName: 'admin', UserRights: ['ViewDetailedErrorMessages', 'AccessAdminPages', 'AccessAdminSettingsPages', 'ManageWidgets', 'ViewPublicComments', 'ViewUnmoderatedComments', 'CreateComments', 'ModerateComments', 'ViewPublicPosts', 'ViewUnpublishedPosts', 'CreateNewPosts', 'EditOwnPosts', 'EditOtherUsersPosts', 'DeleteOwnPosts', 'DeleteOtherUsersPosts', 'PublishOwnPosts', 'PublishOtherUsersPosts', 'ViewPublicPages', 'ViewUnpublishedPages', 'CreateNewPages', 'EditOwnPages', 'ViewRatingsOnPosts', 'SubmitRatingsOnPosts', 'ViewRoles', 'CreateNewRoles', 'EditRoles', 'DeleteRoles', 'EditOwnRoles', 'EditOtherUsersRoles', 'CreateNewUsers', 'DeleteUserSelf', 'DeleteUsersOtherThanSelf', 'EditOwnUser', 'EditOtherUsers'], AbsoluteWebRoot: 'http://localhost:53265/', Version: 'BlogEngine.NET ' + '2.9.1.0', IsPrimary: 'True', IsAdmin: 'True', AppRoot: function (url) { window.location = 'https://www.jb51.net/' + url; return false; }, BlogRoot: function (url) { window.location = 'https://www.jb51.net/' + url; } }; </script> <script type="text/javascript" src="https://www.jb51.net/admin.res.axd"></script> <div> <div data-ng-app="blogAdmin" data-ng-view=""></div> </div> <script src="https://www.jb51.net/scripts/jquery-2.0.3.js"></script> <script src="https://www.jb51.net/scripts/jquery.validate.js"></script> <script src="https://www.jb51.net/scripts/jquery.form.js"></script> <script src="https://www.jb51.net/scripts/toastr.js"></script> <script src="https://www.jb51.net/Scripts/angular.min.js"></script> <script src="https://www.jb51.net/Scripts/angular-route.min.js"></script> <script src="https://www.jb51.net/Scripts/angular-animate.min.js"></script> <script src="https://www.jb51.net/Scripts/angular-sanitize.min.js"></script> <script src="https://www.jb51.net/admin/be-grid.js"></script> <script src="https://www.jb51.net/admin/app.js"></script> <script src="https://www.jb51.net/admin/controllers/dashboard.js"></script> <script src="https://www.jb51.net/admin/controllers/blogs.js"></script> <script src="https://www.jb51.net/admin/controllers/posts.js"></script> <script src="https://www.jb51.net/admin/controllers/pages.js"></script> <script src="https://www.jb51.net/admin/controllers/tags.js"></script> <script src="https://www.jb51.net/admin/controllers/categories.js"></script> <script src="https://www.jb51.net/admin/controllers/comments.js"></script> <script src="https://www.jb51.net/admin/controllers/users.js"></script> <script src="https://www.jb51.net/admin/controllers/roles.js"></script> <script src="https://www.jb51.net/admin/controllers/profile.js"></script> <script src="https://www.jb51.net/admin/controllers/settings.js"></script> <script src="https://www.jb51.net/admin/controllers/packages.js"></script> <script src="https://www.jb51.net/admin/controllers/common.js"></script> <script src="https://www.jb51.net/admin/services.js"></script> <script src="https://www.jb51.net/scripts/bootstrap.js"></script> <script src="https://www.jb51.net/scripts/moment.js"></script> </body> </html>