用于选择的KendoUI Grid Ajax绑定参数

Question

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

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

通过点击OnDataBinding客户端事件并更新那里的参数值然后手动进行Ajax调用来获取数据,我之前已经使用Telerik MVC扩展实现了这种事情.看来KendoUI不会以同样的方式运行.

视图

@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));
}

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

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

Answer 1

如果您的要求可以通过内置过滤解决,尼古拉斯的答案可以奏效.但是,如果您的要求可以通过构建过滤解决,为什么要创建自定义搜索表单？

所以我想你有理由手动进行搜索,所以这就是我们在项目中完成它的方式(所以也许有更简单的方法,但这对我们来说仍然有用):

控制器动作很好:

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

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

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

然后,您可以配置此函数在每次读取时调用:

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

最后在按钮单击中,您只需要刷新网格:

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