JQGrid沒有顯示數據

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

，這是我的「AuthorController」的創建JSON數據：

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（），結果相同。我希望我明確自己。

任何幫助，將不勝感激。

Answer 1

我終於設法從我的數據庫顯示數據。問題出在我的查詢中。我用這個方法對我的操作方法：

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

}）; （「＃list」）。jqGrid（「navGrid」，「#pager」，{edit：true，add：true，del：true}）;

是的，你可以省略'cell'屬性並減少你的json數據。你也可以把'id'：0這通常意味着把第一個項目作爲id。我也使用'鍵'屬性，但它是多餘的。您也可以將您的查詢結果作爲Array傳遞。如果任何人都可以告訴我是否有任何使用列表比其他人的好處將非常感激。

感謝您的幫助 好運

Answer 2

你有沒有嘗試jsonReader與「repeatitems：false」？ 例如：

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

UPDATE： 如果你從你的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' 
     }, 
    ] 
} 

希望這有助於。