jqGrid數據不顯示MVC4與json的數據

Question

我是一個新的jqGrid。我試圖創建一個簡單的例子，其中控制器返回一個包含模型數組數據的json對象。網頁顯示帶有列名稱的網格。數據本身不會出現。

感謝您的幫助。自從三天以來我一直在嘗試。

這裏是我的控制器

List<ClientInvoice> clientInvoices = new List<ClientInvoice> 
      { 
       new ClientInvoice { Id=1, Name = "test", Note = "note", Amount = 300.00f, Tax = 10.00f, Total = 2111.00f}, 
       new ClientInvoice { Id=2, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=3, Name = "test3", Note = "note3", Amount = 300.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=4, Name = "test", Note = "note", Amount = 300.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=5, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=6, Name = "test3", Note = "note3", Amount = 300.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=7, Name = "test", Note = "note", Amount = 300.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=8, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 21.00f, Total = 320.00f}, 
       new ClientInvoice { Id=9, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=11, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=12, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=13, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=14, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=15, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=16, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=17, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=18, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=19, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=21, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=22, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=23, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=24, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=25, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=26, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 
       new ClientInvoice { Id=27, Name = "test", Note = "note", Amount = 200.00f, Tax = 10.00f, Total = 210.00f}, 
       new ClientInvoice { Id=28, Name = "test2", Note = "note2", Amount = 300.00f, Tax = 20.00f, Total = 320.00f}, 
       new ClientInvoice { Id=29, Name = "test3", Note = "note3", Amount = 400.00f, Tax = 30.00f, Total = 430.00f}, 


      }; 

     System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 

      //use Serialize method to convert patient list to json string 

      string clientInvoiceJson = serializer.Serialize(clientInvoices); 
      ViewBag.ClientInvoicesJson = clientInvoiceJson; 

和視圖看起來像這樣

<input type="hidden" id="clientInvoices" value="@ViewBag.ClientInvoicesJson" /> 
<table id="list47"></table> 
<div id="plist47"></div> 

<script type="text/javascript"> 

    var mydata1 = $("#clientInvoices").attr("value"); 
    var mydata = mydata1; 
    jQuery("#list47").jqGrid({ 
     data: mydata, 
     datatype: 'json', 
     height: 150, 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     colNames: ['Inv No', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
     colModel: [ 
      { name: 'Id', index: 'Id', width: 60 }, 
      { name: 'Name', index: 'Name', width: 100 }, 
      { name: 'Amount', index: 'Amount', width: 80 }, 
      { name: 'Tax', index: 'Tax', width: 80 }, 
      { name: 'Total', index: 'Total', width: 80 }, 
      { name: 'Note', index: 'Note', width: 150 } 
     ], 
     pager: "#plist47", 
     viewrecords: true, 
     caption: "Manipulating Array Data" 
    }); 

</script> 

Answer 1

我認爲你缺少jsonReader添加到您的網格選項

   jsonReader: { 
        repeatitems: false, 
        id: "Id" 

       }, 

爲什麼要在一個單獨的函數中調用服務器方法，並在變量var mydata = mydata1中分配響應;

，而不是在網格選項，使用URL來調用服務器方法

url:'your_url_which_invoke_server_method',