Ajax绑定

您可以为Ajax绑定配置Grid组件扩展。

当为Ajax绑定进行配置时，用于ASP。NET MVCmakes Ajax requests when doing paging, sorting, filtering, grouping, or when saving data. For a runnable example, refer to theAjax网格绑定的演示．

绑定ajax模式具有以下特点:

• Grid只检索表示当前页面的数据(JSON格式)。结果，只有Grid被更新。
• 所有Grid模板(列、细节)都在客户端执行。他们遵循jQuery模板的剑道UI定义规则，并可能包含嵌入式JavaScript代码。

为ASP. Grid配置。NET MVCto do Ajax binding to the产品北风数据库表:

1. 创建一个新的ASP。NET MVCweb application. Follow the steps from the介绍性的文章为ASP添加Telerik UI。NET MVCto the application.

   如果已安装Telerik UI for ASP。NET MVCVisual Studio Extensions，为ASP创建一个Telerik UI。NET MVC应用程序。

   1. 添加一个新的实体框架数据模型．右键单击~ /模型文件夹中的解决方案资源管理器和选择添加新项目．选择数据>ADO。NET实体数据模型在添加新项目对话框。命名模型Northwind.edmx并点击下一个．这开始了实体数据模型向导．

      

2. 选择从数据库生成选项，并单击下一个．配置到Northwind数据库的连接。点击下一个．

   

3. 选择产品表中的您希望在模型中包含哪些数据库对象?．保持所有其他选项为默认设置。点击完成．

   

4. 打开HomeController.cs并添加一个新的动作方法，它将以JSON的形式返回Products。Grid对该操作发出Ajax请求。

   Products_Read() {}

5. 添加一个类型的新参数Kendo.Mvc.UI.DataSourceRequest对行动。它将包含当前Grid请求信息—页面、排序、分组和筛选。属性来修饰该参数Kendo.Mvc.UI.DataSourceRequestAttribute．属性将填充DataSourceRequest对象从发布的数据中获取。现在导入Kendo.Mvc.UI名称空间。

   public IActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {}

6. 使用ToDataSourceResult扩展方法将产品转换为Kendo.Mvc.UI.DataSourceResult对象。类提供的信息，此扩展方法将对数据进行分页、筛选、排序或分组DataSourceRequest对象。使用ToDataSourceResult扩展方法，导入Kendo.Mvc.Extensions名称空间。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new SampleContext()) {IQueryable products = northwind. products;DataSourceResult result = products.ToDataSourceResult(request);返回Json(结果);}}

7. 返回DataSourceResult为JSON。为Ajax绑定配置Kendo UI Grid。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new SampleContext()) {IEnumerable Customers = northwind.Customers;DataSourceResult result = customers.ToDataSourceResult(request);返回Json(结果);当你使用异步的' ToDataSourceResultAsync '对等体时，同样的事情也适用。public async Task Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable products = northwind. products;DataSourceResult result = await products.ToDataSourceResultAsync(request);返回Json(结果);}}

8. 在视图中，配置Grid以使用在前面步骤中创建的操作方法。

@(Html.Kendo(). grid () . name ("grid") . dataSource (dataSource => dataSource //配置grid数据源. .Ajax() //指定使用Ajax绑定. . read (read => read. products). dataSource (dataSource => dataSource //配置grid数据源。Action("Products_Read"， "Home")) //设置操作方法，将数据以JSON格式返回。. events (ev => ev. error ("onError"))) . columns (columns =>{//创建一个绑定到ProductID属性的列。列。Bound(product => product. productid);//创建一个绑定到ProductName属性的列列。绑定(product => product. productname);//创建一个绑定到UnitsInStock属性的列列。绑定(product => product. unitsinstock); }) .Pageable() // Enable paging .Sortable() // Enable sorting )

<脚本>函数onError(e) {console.log(e.status);} > < /脚本

1. 构建并运行应用程序。

要下载Visual Studio项目，请参见这个GitHub存储库．

另请参阅

• 数据源的概述
• 网格的常见问题
• 自定义Ajax绑定的Grid HtmlHelper。NET MVC (Demo)
• 知识库组
• 服务器端API