asp.net mvc kendo Grid Filter

浏览数：248 / 时间：2015年06月09日

　　以前做项目都是用asp.net WebForm，最近做一个简单的小网站，后台数据检索功能，公司买的kendo控件，以前也没用用过，搞了半天才搞好，写给一些刚用的人做个参考......

先上一个效果图：

需求：一个简单的搜索页面，可以使用kendo中Grid对列表进行显示，但是，如果把检索框加在外面怎么做呢，在kendo Grid中有一个Filter属性，可以对没一列进行检索，但是，必须得点击检索列时选择检索。如果把搜索框放在外面怎么实现呢，上代码......

.cshtml

                @(Html.Kendo().Grid<ShareProfileListModels>()
                      .Name("AllProfileGrid")
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.Status)
                              .Title("")
                              .ClientTemplate("<input type=‘checkbox‘ #= Error ? checked=‘checked‘: ‘‘ # class=‘chkbx‘ />")
                              .HtmlAttributes(new { style = "text-align: center" })
                              .Width(50);
                          columns.Bound(e => e.ProfileId).Title("ProfileID").Width(120);
                          columns.Bound(e => e.ProfileName).Title("名称");
                          columns.Bound(e => e.SolutionName).Title("解决方案");
                      })
                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                      .Pageable()
                      .Navigatable()
                      .Sortable()
                      .Scrollable()
                      .Pageable(pageable => pageable
                          .Refresh(false)
                          .PageSizes(true)
                          .ButtonCount(5)
                          .Messages(m =>
                              m.ItemsPerPage("个页面一页")
                                  .Empty("没有页面数据")
                                  .First("首页").Last("末页").Next("下一页").Previous("前一页").Refresh("刷新")
                                  .Display("当前页显示总共 {2} 个页面中的第 {0}个到第{1} 个")))
                      .Groupable(g => g.Messages(e => e.Empty("Profile检索列表")))
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Batch(true)
                          .PageSize(20)
                          .ServerOperation(false)
                          .Model(model => model.Id(p => p.ProfileId))
                          .Model(model =>
                            {
                                model.Id(p => p.ProfileId);
                                model.Field(p => p.ProfileId).Editable(false);
                                model.Field(p => p.ProfileName).Editable(false);
                                model.Field(p => p.SolutionName).Editable(false);
                                model.Field(p => p.Status).Editable(true);
                            })
                          .Read(read => read.Action("AllProfileGrid_Read", "Admin"))
                          .Update("AllProfileGrid_Update", "Admin")
                      )
                      )

$("#btnSearch").click(function () {
$filter = new Array();

$profileName = $("#ProfileName").val();
$solutionName = $("#SolutionName").val();

if ($firstName) {
$filter.push({ field: "ProfileName", operator: "contains", value: $profileName });
}

if ($lastName) {
$filter.push({ field: "SolutionName", operator: "contains", value: $solutionName });
}

var grid = $("#AllProfileGrid").data("kendoGrid");
grid.dataSource.filter($filter);

});

</script>

Controller.cs

public 
ActionResult Management()
{
    return 
View();
}
 
[AcceptVerbs(HttpVerbs.Post)]
public 
ActionResult AllProfileGrid_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ShareProfileListModels> shareProfiles)
{
    if 
(shareProfiles != null 
&& ModelState.IsValid)
    {
        foreach 
(var 
product in 
shareProfiles)
        {
            //Update
        }
    }
 
    return 
Json(shareProfiles.ToDataSourceResult(request, ModelState));
}