Question

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

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

我之前使用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"))
    )
)

控制器

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

如果您的要求可以通过内置过滤解决，那么Nicholas的答案可以解决。但是，如果您的要求可以通过内置过滤解决，为什么要创建自定义搜索表单？

所以我想你有理由手动进行搜索，所以这就是我们在项目中如何做到的（所以也许有更简单的方法，但这对我们有用）：

控制器动作很好：

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

Answer 2

您可以通过调用网格数据源上的filter来设置网格上的过滤器。

所以在你的按钮的onclick处理函数中，输入如下内容：

var $Grid = $('#Grid').data('kendoGrid');

$Grid.dataSource.filter([
  { field: 'FirstName', operator: 'eq', value: $('#firstName').val() },
  { field: 'LastName', operator: 'eq', value: $('#lastName').val() }
]);

以下是Kendo文档的链接：DataSource.filter

Answer 3

参考Pass Additional Data to the Action Method

要将其他参数传递给操作，请使用数据方法。提供JavaScript函数的名称，该函数将返回带有附加数据的JavaScript对象：

下面列出的工作搜索示例：

重要提示：按钮type="button"; Grid的AutoBind(false);否则，它将无法正常工作

查看

@model IEnumerable<KendoUIMvcSample.Models.Sample> @{ ViewBag.Title = "Index"; } <script type="text/javascript"> function getAdditionalData() { return { FirstName: 'A', LastName: 'B', }; } $(document).ready(function () { $('#Submit1').click(function () { alert('Button Clicked'); //Refresh the grid $('#ssgrid222').data('kendoGrid').dataSource.fetch(); }); }); </script> <h2>Index</h2> @using (Html.BeginForm()) { @(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>() .Name("ssgrid222") .Columns(columns => { columns.Bound(p => p.SampleDescription).Filterable(false).Width(100); columns.Bound(p => p.SampleCode).Filterable(false).Width(100); columns.Bound(p => p.SampleItems).Filterable(false).Width(100); }) .AutoBind(false) .Pageable() .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height:430px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Orders_Read", "Sample") .Data("getAdditionalData")) ) ) <input id="Submit1" type="button" value="SubmitValue" /> }

<强>控制器

namespace KendoUIMvcSample.Controllers { public class SampleController : Controller { public ActionResult Index() { SampleModel AddSample = new SampleModel(); Sample s1 = new Sample(); return View(GetSamples()); } public static IEnumerable<Sample> GetSamples() { List<Sample> sampleAdd = new List<Sample>(); Sample s12 = new Sample(); s12.SampleCode = "123se"; s12.SampleDescription = "GOOD"; s12.SampleItems = "newone"; Sample s2 = new Sample(); s2.SampleCode = "234se"; s2.SampleDescription = "Average"; s2.SampleItems = "oldone"; sampleAdd.Add(s12); sampleAdd.Add(s2); return sampleAdd; } public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel) { string firstParam = customerSearchModel.FirstName; return Json(GetOrders().ToDataSourceResult(request)); } private static IEnumerable<Sample> GetOrders() { return GetSamples(); } } public class CustomerSearchModel { public string FirstName { get; set; } public string LastName { get; set; } } }

<强>模型

namespace KendoUIMvcSample.Models { public class SampleModel { public List<Sample> samples; } public class Sample { public string SampleDescription { get; set; } public string SampleCode { get; set; } public string SampleItems { get; set; } } }

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

视图

控制器

3 个答案: