asp.net-mvc - KendoUI 网格 Ajax 绑定(bind)参数选择

Question

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

搜索表单包含在 _CustomerSearch 部分 View 中。

我之前已经使用 Telerik MVC 扩展实现了此类操作，方法是利用 OnDataBinding 客户端事件并更新其中的参数值，然后手动进行 Ajax 调用以获取数据。 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"))
    )
)

Controller

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

我设想 Controller 看起来像这样，但找不到任何以这种方式实现的示例，这就是我需要帮助的地方。

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

Answer 1

如果您的要求可以通过内置过滤来解决，尼古拉斯的答案可能会起作用。但是，如果您的需求可以通过内置过滤来解决，为什么您要创建自定义搜索表单？

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

Controller Action 正常:

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();