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

Posted 2023-05-07

【中文标题】用于选择的 KendoUI Grid Ajax 绑定参数

【英文标题】：KendoUI Grid Ajax Binding Parameters For Select

【发布时间】：2013-03-18 00:57:20

【问题描述】：

我有一个基本的KendoUI Grid 用于我的 ASP.NET MVC 应用程序，它使用 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));

【问题讨论】：

请注意，如果您过滤的字段未在网格中显示，但在您提供的 模型 中，则可以使用 Nicholas 的方法网格

【参考方案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();

【讨论】：

我过滤的数据比我要在网格中显示的更多。这是对客户数据的全局搜索。

我不关注您的评论...使用.Data("getAdditionalData")，您可以将任何额外的数据返回到服务器端，它根本不需要与网格相关...我'我只是以 FirstName 和 LastName 为例。

我正在回答您最初的陈述，即不确定我为什么不使用内置... 这看起来很有希望。我一会儿看看。

必须对它进行一些语法更改才能让它飞起来，但它的工作原理就像一个魅力！谢谢！！！

谢谢。在剑道 UI 站点或其他任何地方，您是否有任何其他使用这种方法的参考资料？

【参考方案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

【讨论】：

我需要在服务器级别进行过滤，并将过滤网格中未显示的字段。

感谢您离开这里...我将在我的开发人员的其他领域引用此内容...

可以使用此方法过滤网格中未显示的字段。但是，无法过滤不在您提供给网格的 model 中的字段。抱歉，我知道这是一个旧线程，但将来提到这个的人需要知道

【参考方案3】：

参考Pass Additional Data to the Action Method

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

下面列出的有效搜索示例：

重要提示：type="button" 为按钮； 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; 
    

【讨论】：

为什么AutoBind(False) 很重要？ （对不起，我知道这是一个老问题，但我想知道为什么）