Нет данных, отображаемых на JQGrid

Question

Я довольно новичок в MVC и JQuery. за последние пару дней я пытался использовать Jqgrid http://www.trirand.com/blog/ для отображения данных в моей базе данных. Я использую EF Code первым, чтобы создать свой единственный класс «Автор»

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

Мне, наконец, удалось показать данные из моего db. проблема была в моем запросе. Я использую этот метод для моего метода действий:

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, который обычно означает обращение к первому элементу в качестве идентификатора. Я также использовал атрибут «ключ», но он лишний.вы также можете передать результат запроса как массив. если кто-нибудь скажет мне, есть ли какая-либо польза от использования List over others, это было бы очень оценено.

Спасибо за вашу помощь удачи

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' 
     }, 
    ] 
} 

Надеется, что это помогает.