KendoUI Grid Ajax 绑定参数选择 [英] KendoUI Grid Ajax Binding Parameters For Select

问题描述

我的 ASP.NET MVC 应用程序有一个基本的 KendoUI 网格，它使用 ajax 绑定进行读取.我想增强这一点，以便使用网格上方的表单来帮助选择应显示在网格中的数据.这是一个标准的搜索表单，包含基本字段，如名字、姓氏、出生日期、客户来源等，并带有搜索按钮.当按下搜索按钮时，我想通过传入带有我上面引用的字段的搜索模型来强制网格从控制器获取符合条件的数据.

I have a basic KendoUI Grid for my ASP.NET MVC app which uses ajax binding for the read. I'd like to enhance this so that a Form above the grid is used to help select data that should be displayed in the grid. This is a standard search form with basic fields like First Name, Last Name, Date of Birth, Customer Source, etc. with a search button. When the search button is pressed, I want to force the grid to go get the data that meets the criteria from the controller by passing in the Search Model with the fields I referenced above.

搜索表单包含在 _CustomerSearch 部分视图中.

The search form is contained within the _CustomerSearch partial view.

我之前使用 Telerik MVC 扩展实现了这种事情，方法是利用 OnDataBinding 客户端事件并更新那里的参数值，然后手动进行 Ajax 调用以获取数据.KendoUI 似乎不会以同样的方式运行.

I've implemented this sort of thing before with the Telerik MVC extensions by tapping into the OnDataBinding client event and updating the parameter values there and then manually making the Ajax call to get the data. It doesn't appear KendoUI will operate this same way.

@Html.Partial("_CustomerSearch", Model)
<hr>
@(Html.Kendo().Grid<ViewModels.CustomerModel>()    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.DateOfBirth).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.IsActive);
    })
    .Scrollable()
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer"))
    )
)

控制器

public ActionResult _Search([DataSourceRequest]DataSourceRequest request)
{
    return Json(DataService.GetCustomers2().ToDataSourceResult(request));
}

我设想控制器看起来像这样，但找不到任何以这种方式实现的示例，这正是我需要帮助的.

I envision the controller looking something like this, but can't find any examples of anything being implemented this way, which is what I need help with.

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}

推荐答案

如果您的要求可以通过内置过滤来解决，那么 Nicholas 的回答可能会起作用.但是，如果您的需求可以通过内置过滤解决，为什么还要创建自定义搜索表单?

Nicholas answer could work if your requirements can be solved with the built in filtering. But if your requirements can be solved with the built filtering why do you want to create a custom search form?

所以我想您有理由手动进行搜索，下面是我们在项目中的做法(所以也许有更简单的方法，但仍然对我们有用):

So I suppose you have a reason to do the search manually so here is how we've done it in our project (so maybe there is more easier way but still this worked for us):

控制器动作很好:

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, 
                            CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}

下一步:您需要一个 JavaScript 函数来从搜索表单中收集数据(JS 对象的属性名称应与您的 CustomerSearchModel 的属性名称匹配):

Next step: you need a JavaScript function which collects the data from the search form (the property names of the JS object should match the property names of your CustomerSearchModel) :

function getAdditionalData() {
    // Reserved property names
    // used by DataSourceRequest: sort, page, pageSize, group, filter
    return {
        FirstName: $("#FirstName").val(),
        LastName: $("#LastName").val(),
        //...
    };
}

然后你可以配置这个函数在每次读取时调用:

Then you can configure this function to be called on each read:

.DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer")
                          .Data("getAdditionalData"))
    )

最后在你的按钮点击你只需要刷新网格:

Finally in your button click you just need to refresh the grid with:

$('#Grid').data('kendoGrid').dataSource.fetch();

这篇关于KendoUI Grid Ajax 绑定参数选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！