Question

请告诉我如何使用Ajax Respone重新绑定telerik网格。如何在控制器中编写返回方法，以便ajax响应获取所有数据并将这些数据与Telerik网格绑定。

Answer 1

Grid有一个广泛的客户端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');
        }
    });
}

正如您所看到的，我们向twitter发出了ajax请求，当数据返回时，我们只是在网格上调用dataBind方法。

希望我能够回答你的问题。

Lohith（技术传播者，Telerik India）

如何使用ajax响应和MVC Razor重新绑定telerik网格

1 个答案: