asp.net-mvc - 如何使用 ajax 响应和 MVC Razor 重新绑定 Telerik 网格

Question

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

Answer 1

Grid 有一个广泛的客户端 API，您可以在您的场景中使用它。要注意的事件是 OnDataBinding。

看看我们为 Grid 提供的以下示例。 http://demos.telerik.com/aspnet-mvc/grid/externalservicetwitter

这是一个我们连接到 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 (Tech Evangelist, Telerik India)