KendoUI电网阿贾克斯绑定参数对于选择 [英] KendoUI Grid Ajax Binding Parameters For Select

查看:174
本文介绍了KendoUI电网阿贾克斯绑定参数对于选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有我的ASP.NET MVC应用程序基本 KendoUI 电网,它使用了AJAX读结合。我想加强这使电网的上述表格是用来帮助应显示在网格中选择数据。这是一个像名基础领域,姓,出生日期,客户资源等方面与搜索按钮标准的搜索表单。当搜索按钮pressed,我要强制电网去​​获得通过传递与我上面提到领域的搜索型号满足来自控制器的标准的数据。

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

我以前与Telerik的MVC扩展手动攻到OnDataBinding客户端事件和更新的参数值那里,然后让Ajax调用来获取数据来实现这样的事情。它不会出现KendoUI将操作该方式相同。

查看

  @ Html.Partial(_ CustomerSearch模型)
<小时>
@(Html.Kendo()网格和LT; ViewModels.CustomerModel>()
    。名称(网格)
    .Columns(列=>
    {
        columns.Bound(P => p.Id).Hidden(真);
        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(数据源=>数据源
        阿贾克斯()
        .Read(读=> read.Action(_搜索,客户))
    )

控制器

 公众的ActionResult _search([DataSourceRequest] DataSourceRequest要求)
{
    返回JSON(DataService.GetCustomers2()ToDataSourceResult(要求));
}

我设想看起来像这样的控制器,但找不到任何东西正在实施这样,任何一个例子这正是我需要帮助。

 公众的ActionResult _search([DataSourceRequest] DataSourceRequest要求,CustomerSearchModel customerSearchModel)
{
    返回JSON(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(要求));
}


解决方案

尼古拉斯答案可能的工作,如果你的要求可以用内置的过滤解决。但是,如果你的要求可以用内置的过滤要创建一个自定义搜索表单为什么解决?

所以,我想你有充分的理由这样做手工搜索所以这里是我们如何在我们的项目做了(所以也许还有更多更简单的方法,但仍这个工作对我们来说):

控制器动作是好的:

 公众的ActionResult _search([DataSourceRequest] DataSourceRequest要求,
                            CustomerSearchModel customerSearchModel)
{
    返回JSON(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(要求));
}

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

 函数getAdditionalData(){
    //保留的属性名称
    //使用DataSourceRequest:排序,页面的pageSize,组,过滤器
    返回{
        姓:$(#名字)VAL()。
        名字:$(#姓氏)VAL()。
        // ...
    };
}

然后就可以配置此功能就被称为每个读:

  .DataSource(数据源=>数据源
        阿贾克斯()
        .Read(读=> read.Action(_搜索,客户)
                          。数据(getAdditionalData))
    )

最后,在你点击链接,你只需要刷新网格:

  $('#网格)的数据(kendoGrid')dataSource.fetch()。

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.

The search form is contained within the _CustomerSearch partial view.

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.

View

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

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 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):

The controller action is fine:

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

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电网阿贾克斯绑定参数对于选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆