带有 Web API 的 JQ Grid答案

【问题标题】：JQ Grid with web API带有 Web API 的 JQ Grid
【发布时间】：2016-08-01 09:49:15
【问题描述】：

我是 Web API 新手。

我在对话框模块中使用了 JQ 网格。

      $(document).ready(function () {
        $('.viewIcon').click(function () {

        $(function () {
            $("#jqtable").dialog({
                title: "Admin Console",
                resizable: false,
                modal: true,
                width: 'auto',
                appendTo: "form",
                open: function (event, ui) {

                    jQuery("#jQGridDemo").jqGrid({
                        url: 'api/AdminConsole/GetListDetailData',
                        datatype: "json",
                        colNames: ['Key', 'Value'],
                        colModel: [
                        { name: 'Key', index: 'Key', width: 200, align: "right" },
                        { name: 'Value', index: 'Value', width: 200, align: "right" },
                        ],
                        jsonReader: {
                            repeatitems: false,
                            page: function () { return 1; },
                            root: function (obj) { return obj; },
                            records: function (obj) { return obj.length; }
                        },

                        pager: "#jqGridPager"
                    });

                },
                //buttons: {
                //    "Save": function () {
                //     $(this).dialog("close");
                //    },
                //    "Cancel": function () {
                //        $(this).dialog("close");
                //    }
                //}
            });
        });

    });
});
$("#jqtable").dialog("open");

我的个性

    public List<DTO.ListDetailDTO> GetListDetailForListTpe(int type)
    {


        List<DTO.ListDetailDTO> allList = new List<DTO.ListDetailDTO>();

        using (AspNetEntities context = new AspNetEntities())
        {

            allList = (from list in context.ListDetails
                       select new DTO.ListDetailDTO
                       {
                           Key = list.ListValue,
                           Value = list.ListKey
                       }).ToList();
        }

        return allList;

    }

我的网络 API

[HttpGet()]
    [ActionName("GetListDetailData")]
    public Object GetListDetailData(bool _search,string sidx, string sord, int page, int rows)
    {
        int ListTpe = 1;
        List<DTO.ListDetailDTO> list = new List<DTO.ListDetailDTO>();
        ListManagementEntity listMgmt = new ListManagementEntity();

       list = listMgmt.GetListDetailForListTpe(ListTpe);


       var pageIndex = Convert.ToInt32(page) - 1;
       var pageSize = rows;
       var totalRecords = list.Count();
       var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

       var jsonData = new
       {
           total = totalPages,
           page = page,
           records = totalRecords,
           rows = JsonConvert.SerializeObject(list)
       };
       return jsonData;




    }

我的 JQ 网格不显示任何内容。

【问题讨论】：

您是否验证了仅调用 'api/AdminConsole/GetListDetailData' 会返回数据？您是否在控制台中收到任何错误？
控制台没有错误。但显示空网格。

标签： c# jquery jqgrid

【解决方案1】：

在“GetListDetailData”中，您不能返回对象……您必须返回将描述的对象“IEnumerable”，如 List

例子：

    // GET api/task
    public IEnumerable<Employee> Get()
    {
        Employee[] Employees= new Employee[2];

        Employees[0] = new Employee()
        {
            UniqueID = 1,
            EmpName = "One",
            Department = "Dep1"
        };

        Employees[0] = new Employee()
        {
            UniqueID = 2,
            EmpName = "Two",
            Department = "Dep2"
        };

        return tasks;
    }

由于您使用“jqGrid”，您可以使用以下代码：

    public dynamic Get(string sidx, string sord, int page, int rows)
      {
          var Employees = repository.GetAll() as IEnumerable<Employee>;
          var pageIndex = Convert.ToInt32(page) - 1;
          var pageSize = rows;
          var totalRecords = Employees.Count();
          var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
          Employees = Employees.Skip(pageIndex * pageSize).Take(pageSize);
          return new
          {
              total = totalPages,
              page = page,
              records = totalRecords,
              rows = (
                  from employee in Employees
                  select new
                  {
                      i = employee.UniqueID.ToString(),
                      cell = new string[] {
                         employee.UniqueID.ToString(),
                         employee.EmpName,
                         employee.Department 
                      }
                  }).ToArray()
          };
}

【讨论】：