Question

我是MVC和Jquery的新手。在过去的几天里，我试图使用Jqgrid http://www.trirand.com/blog/在我的数据库中显示数据。我首先使用EF代码创建我唯一的“作者”类

public class Author
{

    public int AuthorID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public string FullName
    {
        get
        {
            return  FirstName+ " "+LastName ;
        }
    }
}

这是我创建Json数据的'AuthorController'：

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
    var jsonData = new
    {
         total = 5,
         page = 1,
         records = db.Authors.Count(),
         rows = db.Authors.Select(a => new
                                 {
                                   id = a.AuthorID,
                                   cell = new { a.AuthorID, a.FirstName, a.LastName }
                                 }
         )
     };
     return Json(jsonData, JsonRequestBehavior.AllowGet);
}

我也尝试了不同的方法来获取我的Json数据：

 public ActionResult LinqGridData (string sidx, string sord, int page, int rows) 
   {
        var jsonData = new {
        total = 5, 
        page=1,
        records = db.Authors.Count(),
        rows = (from a in db.Authors
                select new 
                {
                    id = a.AuthorID,
                    cell = new {  a.AuthorID, a.FirstName, a.LastName }
                }
          )
      };
      return Json(jsonData,JsonRequestBehavior.AllowGet);
    }

这是我的JavaScript，我在我看来使用它：

 $(function () {
    $("#list").jqGrid({
        url: '/Author/LinqGridData',
        datatype:'json',
        mtype: 'GET',
        colNames:['Author ID', 'First Name', 'Last Name'],
        colModel:[
            {name:'AuthorID',index:'AuthorID',width:55 },
            {name:'FirstName',index:'FirstName',width:90 },
            {name:'LastName',index:'LastName',width:80,align:'right' }
        ],
        pager:'#pager',
        rowNum: 10,
        rowList:[5, 10, 20, 30],
        sortname:'AuthorID',
        sortorder:'desc',
        viewrecords:true,
        gridview:true,
        caption:'Author List'
    });
});
jQuery("#datagrid").jqGrid('navGrid', '#navGrid', { edit: true, add: true, del: true });

我可以用虚拟数据显示网格。使用此操作方法：

 public ActionResult GridData(string sidx, string sord, int page, int rows)
   {
       var jsonData = new
       {
           total = 1, // we'll implement later 
           page = 1,
           records = 3, // implement later 
           rows = new[]
           {
              new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
              new {id = 2, cell = new[] {"2", "15", "Is that a good question?"}},
              new {id = 3, cell = new[] {"3", "23", "Why is the sky in the sky?"}}    
           }
       };
       return Json(jsonData,JsonRequestBehavior.AllowGet);
   }

问题是每当我想显示数据库中的数据时，我只能显示网格本身而不是数据。我试图在发送到视图之前将json数据转换为List（）或toArary（），结果相同。我希望我能说清楚。

任何帮助都会非常感激。

Answer 1

您是否尝试过使用“repeatitems：false”的jsonReader？例如：

$("#list").jqGrid({
    url: '/Author/LinqGridData',
    datatype:'json',
    jsonReader: {
        repeatitems: false
    },
    .....

更新：如果查看从LinqGridData方法返回的响应主体，它看起来像这样：

{"total":5,"page":1,"records":1,"rows":
  [
    {"id":"1","cell":{"AuthorID":"1","FirstName":"Mike","LastName":"Lee"}}, .....
  ]
}

但我认为它应该是这样的：

{"total":5,"page":1,"records":1,"rows":
  [
    {"id":"1","cell":{"1", "Mike", "Lee"}}, .....
  ]
}

实际上这是你的“虚拟数据”版本的响应主体。

我将在下面发布我的工作示例。在这个例子中，我没有使用'cell'属性。
在服务器端：

        var myQuery = from t in db.Customers
                      select t;
        var jsonData = new
        {
            total = totalPages,
            page = pageNum,
            records = totalRecords,
            rows = myQuery.ToList()
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);

在客户端：

{
    url: '@Url.Action("GetList")',
    datatype: 'json',
    jsonReader: {
      repeatitems: false
    },
    mtype: 'GET',
    colModel: [
      {
        name: 'CustomerID', label: 'ID', hidden: false, width: 40, sortable: true
      },
      {
        name: 'CompanyName', label: 'Company', width: 100, align: 'center' 
      },
    ]
}

希望这有帮助。

Answer 2

我终于设法显示我的数据库中的数据。问题出在我的查询中。我将此方法用于我的操作方法：

public JsonResult LinqGridData (string sidx, string sord, int page, object rows)
   {
       var authors = (from a in db.Authors select a).ToList();
       var jsonData = new {
        total = 5, 
        page=1,
        records = db.Authors.Count(),
        rows = authors.Select(a => new 
                    {
                        id = a.AuthorID,
                        cell = new[] { a.AuthorID.ToString(), a.FirstName, a.LastName }
                    }
        )              
       };
      return Json(jsonData,JsonRequestBehavior.AllowGet);            
    }

我在我的Javascript中使用了这个：

$(function () {
$("#list").jqGrid({
    url: "/Author/LinqGridData",
    datatype: "json",
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        cell: "cell",
        id:"id"
    },
    mtype: "GET",
    colNames: ["Author ID", "First Name", "Last Name"],
    colModel: [
        { name: "AuthorID", key: true, width: 55 },
        { name: "FirstName", width: 80 },
        { name: "LastName", width: 100, align: "right" }
    ],
    pager: "#pager",
    rowNum: 10,
    rowList: [5, 10, 20],
    sortname: "AuthorID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    width: 610,
    height: 250,
    caption: "Author List"
});

}）; jQuery（“＃list”）。jqGrid（“navGrid”，“＃pager”，{edit：true，add：true，del：true}）;

是的，你可以省略'cell'属性并减少你的json数据。你也可以把'id'：0通常意味着将第一项视为id。我也使用'key'属性，但它是多余的。您也可以将查询结果作为数组传递。如果有人能告诉我使用List比其他人有什么好处会非常感激。

感谢您的帮助祝你好运

JQGrid上没有数据显示

2 个答案: