asp.net MVC結合EasyUI的datagrid實現分頁加載數據

1.引用EasyUI的相關插件，在html文檔中編寫datagrid，如下：

    <div class="easyui-layout" data-options="border: false,fit: true">
        <div data-options="region:'center',border: false">
            <table id="AdminList" class="easyui-datagrid" style="width:100%;height:100%;"
				data-options="
                    rownumbers: true,
                    fitColumns: true,
					striped: true,
                    singleSelect: true,
					pagination: true,
                    pageSize: 20,
					pageList: [20,50,100],
					toolbar: '#A_tool',
                    remoteSort: false,
                    multiSort: true,
                    onClickRow: OnclickAdminRow
				">
                <thead>
                    <tr>
                        <th data-options="field:'LoginName',width:150,halign:'center',align:'left',sortable:true,fixed:true">賬號</th>
                        <th data-options="field:'Name',width:150,halign:'center',align:'left',sortable:true,fixed:true">暱稱</th>
                        <th data-options="field:'State',width:100,halign:'center',align:'center',sortable:true,fixed:true,formatter:formatState">狀態</th>
                        <th data-options="field:'CreateTime',width:120,halign:'center',align:'left',sortable:true,fixed:false">創建時間</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div id="A_tool" class="pd-12-20">
        <div class="float-l">
            <label>關鍵字：</label>@Html.TextBox("Keyword", "", new { @class = "input-txt-te width-150", @autocomplete = "off" })
            <a href="javascript:void(0)" class="easyui-linkbutton a-success" οnclick="SearchAdmin()"><i class="fa fa-search i-green"></i> 搜索</a>
        </div>
        <div class="float-r">
            <a href="javascript:void(0)" class="easyui-linkbutton a-purple" plain="true" οnclick="AddAdmin()"><i class="fa fa-plus i-blue"></i> 添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="EditAdmin()"><i class="fa fa-edit i-orange"></i> 編輯</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="SetAdminStatus(0)" id="AdminEnable"><i class="fa fa-play i-green"></i> 啓用</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-red" plain="true" οnclick="SetAdminStatus(1)" id="AdminDisable"><i class="fa fa-square i-browm"></i> 停用</a>
        </div>
        <div class="clear"></div>
    </div>

2.在js中實現加載數據，如下：

<script type="text/javascript">
        $(function () {
            LoadAdminListDataGrid();
        })
        function LoadAdminListDataGrid() {
            var keywordVal = $('#Keyword').val();
            $("#AdminList").datagrid({
                url: '@Url.Action("GetAdminDataGrid", "Admin")',
                method: 'get',
                queryParams: {//這裏是查詢的參數，如果有多個參數直接寫在這裏即可
                    Keyword: keywordVal
                }
            });
        }
        function formatState(val, row, index) {
            if (row.State == 0) {
                val = '<span style="display:inline-block;background-color:#abbac3;color:#fff;padding:1px 5px;">' +
                        '正常' +
                      '</span>';
            }
            else {
                val = '<span style="display:inline-block;background-color:#d15b47;color:#fff;padding:1px 5px;">' +
                        '停用' +
                      '</span>';
            }
            return val;
        }
        function SearchAdmin() {
            LoadAdminListDataGrid();
        }
        function AddAdmin() {
            layer.open({
                title: '添加員工',    //標題
                type: 2,    //什麼類型的彈窗：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
                anim: 2,   //彈窗動畫效果
                area: ['450px', '320px'],   //彈窗寬高
                offset: 'auto',  //彈窗的位置
                maxmin: false,  //是否顯示最大化和最小化
                content: '@Url.Action("AddAdmin","Admin")',   //內容
                cancel: function (index, layero) {  //關閉按鈕事件
                    RefreshAdmin();
                }
            });
        }
        function RefreshAdmin() {
            $('#AdminList').datagrid('reload');
        }
        function EditAdmin() {
            var row = $('#AdminList').datagrid('getSelected');
            if(row) {
                var url = '@Url.Action("EditAdmin", "Auth")';
                url += "?id=" + row.Id;
                layer.open({
                    title: '編輯用戶',    //標題
                    type: 2,    //什麼類型的彈窗：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
                    anim: 2,   //彈窗動畫效果
                    area: ['450px', '370px'],   //彈窗寬高
                    offset: 'auto',  //彈窗的位置
                    maxmin: false,   //最大化/最小化
                    content: url,
                    cancel: function (index, layero) {  //關閉按鈕事件
                        RefreshAdmin();
                    }
                });
            }
            else {
                var msg = "請選中需要編輯的數據，在執行此操作！";
                layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
            }
        }
        function OnclickAdminRow(index, row) {
            if (row) {
                if (row.State == 0) {
                    $('#AdminEnable').linkbutton('disable');
                    $('#AdminDisable').linkbutton('enable');
                }
                else {
                    $('#AdminEnable').linkbutton('enable');
                    $('#AdminDisable').linkbutton('disable');
                }
            }
        }
        function SetAdminStatus(type) {
            var msg, status;
            if (type == 0) {
                msg = "請選中需要啓用的數據，在執行此操作！";
                status = 0;
            }
            else {
                msg = "請選中需要停用的數據，在執行此操作！";
                status = 1;
            }
            var row = $('#AdminList').datagrid('getSelected');
            if (row) {
                var url = '@Url.Action("SetAdminState", "Admin")';
                $.ajax({
                    url: url,
                    type: "Post",
                    data: { id: row.Id, state: status },
                    dataType: "json",
                    success: function (obj) {
                        var statusTxt = status == 0 ? "啓用" : "停用";
                        //obj.Status == 0：表示成功，1：表示失敗，2：表示提示
                        if (obj.Status == 0) {
                            layer.msg('【' + row.LoginName + '】' + '已被' + statusTxt);
                            RefreshAdmin();
                            row.Status = status;   //將狀態更新爲修改後的狀態以便去調用onClickAttributeRow方法
                            OnclickAdminRow(row);
                        }
                        if (obj.Status == 1) {
                            layer.msg('【' + row.LoginName + '】' + statusTxt + "失敗！");
                        }
                    }
                });
            }
            else {
                layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
            }
        }
    </script>

 3.調用控制器方法，如下：

（關鍵：page和rows參數必須是小寫的，這是由EasyUI框架自定義決定的）

/// <summary>
        /// 獲取員工列表數據
        /// </summary>
        /// <param name="page">當前第幾頁</param>
        /// <param name="rows">當前頁行數</param>
        /// <returns></returns>
        public ActionResult GetAdminDataGrid(AdminListForm form)
        {
            try
            {
                //獲取員工列表的方法，PaginationParameter是自己封裝的分頁方法，
                //往下看會看到查詢的linq的方法，可以不用管PaginationParameter究竟要怎麼寫
                var adminList = _adminService.GetAdminList(new AdminPara()
                {
                    Keyword = form.Keyword,
                    PaginationParameter = PaginationHelper.GetPagingByDescend(form.page, form.rows),
                });
                List<object> list = new List<object>();
                adminList.Items.ToList().ForEach(item =>
                {
                    list.Add(new
                    {
                        Id = item.Id,
                        LoginName = item.LoginName,
                        Name = item.Name,
                        State = item.State,
                        CreateTime = item.CreateTime.ToyyyyMMddHHmmss()
                    });
                });
                var dataGrid = _commonService.GetGridFormat(adminList.TotalCount, list);
                return Json(dataGrid, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Log.InfoFormat("獲取員工列表數據：{0}", e.Message);
                var dataGrid = _commonService.GetGridFormat(0, "");
                return Json(dataGrid, JsonRequestBehavior.AllowGet);
            }
        }

AdminListForm類：

    public class AdminListForm
    {
        /// <summary>
        /// 關鍵字（賬號或暱稱）
        /// </summary>
        public string Keyword { get; set; }
        /// <summary>
        /// 當前頁數
        /// </summary>
        public int? page { get; set; }
        /// <summary>
        /// 當前頁總行數
        /// </summary>
        public int? rows { get; set; }
    }

查詢linq方法：

        /// <summary>
        /// 根據條件獲取管理員列表
        /// </summary>
        /// <param name="AdminPara"></param>
        /// <returns></returns>
        public IList<AdminInfo> GetAdminList(AdminPara adminPara) 
        {
            #region
            //構造查詢語句
            var query = (from a in Entities.T_Admins
                         select new AdminInfo()
                         {
                             Id = a.Id,
                             Name = a.Name,
                             LoginName = a.LoginName,
                             Password = a.Password,
                             State = a.State,
                             CreateTime = a.CreateTime,
                         });

            if (!string.IsNullOrEmpty(adminPara.Keyword))
            {
                var keyword = adminPara.Keyword.Trim();
                query = query.Where(a => a.Name.Contains(keyword) || a.LoginName.Contains(keyword));
            }

            var totalCount = query.Select(a => a.Id).LongCount();

            //排序
            query = query.OrderBy(a => a.Id);

            //分頁
            if (adminPara.StartIndex.HasValue)
                query = query.Skip(adminPara.StartIndex.Value);
            if (adminPara.MaxCount.HasValue)
                query = query.Take(adminPara.MaxCount.Value);

            var adminList = query.ToList();

            return adminList;
            #endregion
        }