ASP.NET MVC5+EF6+EasyUI 後臺管理系統（7）-MVC與EasyUI DataGrid

時間 2019-11-12

標籤 asp.net asp mvc5+ef6+easyui mvc easyui 後臺管理系統 datagrid 欄目 ASP 简体版

原文原文鏈接

系列目錄javascript

本節知識點

爲了符合後面更新後的重構系統，文章於2016-11-1日重寫css

EasyUI讀取MVC後臺Json數據html

開始實現

咱們的系統彷佛愈來愈有趣了前端

首先從前端入手，開打View下面的Shared建立一個視圖模版（母版頁）java

<!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視圖基本要引用這個模版jquery

@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添加GetList方法給視圖的AJAX使用json

 [HttpPost]
        public JsonResult GetList()
        {
            List<SysSampleModel> list = m_BLL.GetList("");
            var json = new
            {
                total = list.Count,
                rows = (from r in list
                        select 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);
        }

View Code

預覽一下效果less

Json的格式

其實有心的童鞋會發現下載的easyui包裏面有個demo文件，咱們打開datagrid樣例的文件夾找到ide

{"total":28,"rows":[
    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}