如何使用ajax響應和MVC Razor重新綁定telerik網格

Question

請讓我知道如何使用Ajax Respone重新綁定telerik網格。 如何在控制器中編寫返回方法，以便ajax Response獲取所有數據並將這些數據與Telerik網格綁定。

Answer 1

網格有一個廣泛的客戶端API，您可以在您的方案中使用。要注意的事件是OnDataBinding。

看看下面我們爲Grid所做的例子。 http://demos.telerik.com/aspnet-mvc/grid/externalservicetwitter

這是一個演示，我們連接到Twitter並獲取推文。但是，連接到Twitter的行爲，搜索推文，獲取推文和綁定網格與結果都是從客戶端完成的。

電網首先被定義如下：

<%= Html.Telerik().Grid<TwitterItem>() 
     .Name("Grid") 
     .Columns(columns => 
     { 
      columns.Template(o => { }).Title("Author").Width(100); 
      columns.Template(o => { }).Title("Avatar").Width(80); 
      columns.Bound(o => o.text).Title("Post"); 
     }) 
     .ClientEvents(events => events 
      .OnDataBinding("onDataBinding") 
      .OnRowDataBound("onRowDataBound") 
     ) 
     .Scrollable(scrolling=>scrolling.Height(400)) 
%> 

當用戶點擊搜索按鈕，我們發出對電網ajaxrequest。這裏是代碼片段：

$('#searchButton').click(function(e) { 
    e.preventDefault(); 
    $('#Grid').data('tGrid').ajaxRequest(); 
}); 

這將導致OnDataBinding火。下面是ondatabinding方法的代碼片段：

function onDataBinding(e) { 
    var grid = $(this).data('tGrid'); 

    $('.t-status .t-icon', grid.element).addClass('t-loading'); 
    // call the twitter search api 
    $.ajax({ 
     url: 'http://search.twitter.com/search.json', 
     contentType: 'application/json; charset=utf-8', 
     type: 'GET', 
     dataType: 'jsonp', 
     error: function(xhr, status) { 
      alert(status); 
     }, 
     data: { 
      q: $('#searchText').val() 
     }, 
     success: function(result) { 
      grid.dataBind(result.results); 
      $('.t-status .t-icon', grid.element).removeClass('t-loading'); 
     } 
    }); 
} 

正如你可以看到，我們發出一個Ajax請求Twitter和當數據回來的時候，我們只需要調用DataBind方法對電網。

希望我能夠回答你的問題。

Lohith（技術傳播者，Telerik India）