构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）2014-08-10MVC与EasyUI DataGrid

没有源码的同学跳到第六讲下载源码再来。

我们需要漂亮的UI，不要系统自动生成的垃圾UI。我们在大数据面前，我们要减少页面的压力，不要在页面遍历List

我们选择Easyui的DataGrid最为本系统的表格展示效果

本节知识点：

根据DataGrid json格式在controller制作json格式给DataGrid用

我们的系统似乎越来越有趣了、

首先从前端入手，开打View下面的Shared创建一个视图模版

<！DOCTYPE html><html><head><title>Main</title><script src="@Url.Content（"~/Scripts/jquery.min.js"）" type="text/javascript"></script> <script src="@Url.Content（"~/Scripts/jquery.easyui.min.js"）" type="text/javascript"></script>@Styles.Render（"~/Content/css"）@Styles.Render（"~/Content/themes/blue/css"）</head><body><div style="padding:5px 5px 0px 5px;">@RenderBody（）</div></body></html>_Index_Layout.cshtml

以后我们系统用到的index视图基本要引用这个模版

@using App.Admin;@using App.Common;@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Index_Layout.cshtml";}<table id="List"></table><script type="text/javascript">$（function （） {$（"#List"）.datagrid（{url: "/SysSample/GetList",width: $（window）.width（） - 10,methord: "post",height: $（window）.height（） -35,fitColumns: true,sortName: "Id",sortOrder: "desc",idField: "Id",striped: true, //奇偶行是否区分singleSelect: true,//单选模式rownumbers: true,//行号columns: [[{ field: "Id", title: "ID", width: 80 },{ field: "Name", title: "名称", width: 120 },{ field: "Age", title: "年龄", width: 80, align: "right" },{ field: "Bir", title: "生日", width: 80, align: "right" },{ field: "Photo", title: "照片", width: 250 },{ field: "Note", title: "说明", width: 60, align: "center" },{ field: "CreateTime", title: "创建时间", width: 60, align: "center" }]]}）;}）;</script>index.cshtml

在SysSampleController添加GetLists方法给视图的AJAX使用

[HttpPost]public JsonResult GetList（）{List<SysSampleModel> list = m_BLL.GetList（""）;var json = new{total = list.Count,rows = （from r in listselect new SysSampleModel（）{Id = r.Id,Name = r.Name,Age = r.Age,Bir = r.Bir,Photo = r.Photo,Note = r.Note,CreateTime = r.CreateTime,}）.ToArray（）};return Json（json, JsonRequestBehavior.AllowGet）;}