KendoUI电网阿贾克斯绑定参数对于选择(KendoUI Grid Ajax Binding Pa

2019-08-18 01:36发布

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

搜索表单包含在_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();


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

下面是剑道文档的链接: DataSource.filter



Answer 3:

请参阅传递额外的数据操作方法

传递额外的参数的动作使用数据的方法。 提供一个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; }
    }
}


文章来源: KendoUI Grid Ajax Binding Parameters For Select