Json結果不能綁定到KendoUI網格

我無法在kendo網格中顯示我從Controller作爲Json結果返回的數據。Json結果不能綁定到KendoUI網格

[HttpPost] 
    public ActionResult PermitSearch(BptSearchViewModel viewModel) 
    { 
     var data = appService.SearchPermitInspection(viewModel); 

     return Json(data); 
    }

現在從我查看我使用AJAX

@using (Ajax.BeginForm("PermitSearch", "Home", null, new AjaxOptions 
    { 
     HttpMethod = "post", 
     InsertionMode = InsertionMode.InsertAfter, 
     UpdateTargetId = "search-results-grid", 
     OnComplete = "OnCompleteMethod" 
    })) 
    { 
      .... 
    } 

<div id="search-results-grid"></div>

提交信息與OnCompleteMethod腳本低於

function OnCompleteMethod(dataq, status) { 
    if (status === "success") { 
     $("#search-results-grid").kendoGrid({ 
      columns: [ 
       { 
        field: "jobname", 
        title: "Job Type" 
       }, 
      dataSource: { 
       data: { 
        "items" : dataq 
       }, 
       schema: { 
        data: "items" 
       } 
      }, 
      groupable: true, 
      sortable: true, 
      pageable: { 
       refresh: true, 
       pageSizes: true, 
       buttonCount: 5 
      }, 
      noRecords: { 
       template: "No data available on current page. Current page is: #=this.dataSource.page()#" 
      } 
     }); 
    } 
}

，而且我上回看起來像這樣的數據我給控制器打電話後

我已經看到這個作品的例子是使用數組內部的對象的鍵而不用引號，就像這樣，但是我找不到任何可以應用的轉換來將json數據傳遞給網格。

[ 
     { 
     jobname: "job1" 
     }, 
     { 
     jobname: "job2" 
     } 
]

您可以在這裏看到

瀏覽器的，我做錯了什麼在這裏的響應？

來源

2017-05-16 Heinrich

當進入OnCompleteMethod函數時'dataq'和'status'包含什麼？ – Sandman

您已經將模式定義爲在名爲「items」的屬性中查找數據，但我沒有看到它作爲JSON示例中的屬性，請嘗試返回名爲「items」的數組並且它應該綁定。 –

@StephenByrne @StephenByrne我試過你的方法，但仍然不起作用，如果我直接複製並粘貼我在響應中看到的數據作爲腳本的一部分，我可以看到它上面的元素，但作爲參數傳遞函數似乎與我更新了我的問題不同的格式，但奇怪的是，即使在腳本內粘貼帶有雙引號的代碼似乎也能工作，對此有任何幫助？ – Heinrich

如果dataq是local data，其包含所有在網格所需的項目的對象陣列，嘗試使用格網定義：

$("#search-results-grid").kendoGrid({ 
    columns: [{ 
     field: "jobname", 
     title: "Job Type" 
    }], 
    dataSource: { 
     data: JSON.parse(dataq), 
     pageSize: 10    
    }, 
    groupable: true, 
    sortable: true, 
    pageable: { 
     refresh: true, 
     pageSizes: true, 
     buttonCount: 5 
    }, 
    noRecords: { 
     template: "No data available on current page. Current page is: #=this.dataSource.page()#" 
    } 
});

EDIT

更新以包括的dataq定義如每OP和添加一個pageSize屬性，以防止網格分頁中的空值。

This Dojo例子對我來說很好（在你的問題中指定了兩種格式）？

EDIT 2 - 溶液中發現

繼續我們的討論進一步後，揭發該dataq從包含控制器功能的整個響應。因此，您需要從dataq訪問responseText，並且因爲它是JSON字符串，您需要執行JSON.parse(dataq.responseText)以將其提取到適合網格數據源的對象列表中。

來源

2017-05-17 08:30:27 Sandman

它沒有工作，如果我只是把數據作爲它呈現正確的腳本的一部分，但如果我將它作爲參數傳遞，則不，控制檯顯示此錯誤「e.slice不是函數」 – Heinrich

那麼您的數據不會以您在問題中發佈的相同格式傳遞給該函數。使用控制檯查看執行'OnCompleteMethod'時編輯你的問題的'dataq'。 – Sandman

我剛剛更新了問題 – Heinrich

我想你應該嘗試通過在剃刀代碼中使用網格htmlhelper而不是javascript函數來構建網格。您可以參考Ajax binding in the Telerik documentation here。

基本上，如果網格的人口是唯一需要該視圖的Ajax，那麼您甚至不需要「使用」規範。相反，它將在網格配置中指定。同樣的，你並不需要的JavaScript代碼要麼...您的視圖剃刀電網可能是這個樣子：

@(Html.Kendo().Grid<BptSearch>() 
    .Name("search-results-grid") 
    .DataSource(dataSource => dataSource 
      .Ajax() 
      .Read(read => read.Action("PermitSearch", "[controller]")) 
    ) 
     .Columns(columns => 
      { 
       columns.Bound(job => job.jobID).Title("Job ID"); 
       columns.Bound(job => job.jobName).Title("Job Type"); 
      }) 
     .Pageable() 
     .Sortable() 
    )

如果沒有顯示任何結果，「無記錄顯示」的範圍內顯示消息尋呼機（這是設計）。

這個Grid FAQ可能是一個很好的參考資料，如果你還想做其他事情。

來源

2017-05-16 19:55:37 Andarta

其實我試圖不使用劍道助手，你知道它是什麼導致我的錯誤在JavaScript？ – Heinrich

看起來像你的JavaScript你需要刪除「[」後「列：」，並在「dataSource」之前關閉「}」後添加逗號。如果這不適合你，那麼我不確定。爲什麼不使用html助手？ – Andarta

我通常會發現，通過使用Javascript而不是幫助者，您可以更好地控制Kendo控件的所有方面。這只是我的看法。 – Sandman

Json結果不能綁定到KendoUI網格

回答

相關問題