0

我对 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 数据转换为 toList() 或 toArary()，结果相同。我希望我说清楚了。

任何帮助将非常感激。

4

2 回答 2

0

您是否尝试过带有“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' 
      },
    ]
}

希望这可以帮助。

于 2013-03-03T08:45:55.083 回答
0

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

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 });

yes , you can omit the 'cell' attribute and reduce your json data. you can also put 'id':0 which normally means treat the first item as the id. i also used 'key' attribute, but it's redundant. you can also pass your query result as Array too. if anyone can tell me is there any benefit of using List over others would much appreciated.

Thanks for your help good luck

于 2013-03-06T02:20:15.243 回答