在操作方法中从服务器端过滤 Telerik ListView 中的数据

Question

嘿，我正在使用 Telerik ListView 控件及其绑定数据成功收到所有数据，但我想要搜索或过滤数据，并且再次绑定列表视图我想从服务器端开始数据正确的方式我的代码如下
- 这是我使用 telerik ListView 模板查看代码
  
  <script type="text/x-kendo-tmpl" id="template"> <div class="col-md-8 jumbotron"> <div class="col-sm-4"> <span><b>Name:</b></span><br /> <span><b>Gender:</b></span><br /> <span><b>DOB:</b></span><br /> <span><b>Country:</b></span><br /> <span><b>Province:</b></span><br /> <span><b>Interset:</b></span><br /> </div> <img img src="#:Image#" width="100" height="100" /> <div class="col-sm-4"> <span>#:FirstName#</span><br /> <span>#:Gender#</span><br /> <span>#:DOB#</span><br /> <span>#:CountryName#</span><br /> <span>#:ProvinceName#</span><br /> <span>#:Interset#</span><br /> </div> </div> </script>
- 这是 Telerik Kendo ListView 从服务器端获取数据库中的所有数据
  
  <div class="demo-section k-content wide"> @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>() .Name("ListView") .TagName("div") .ClientTemplateId("template") .DataSource(dataSource => dataSource .ServerOperation(true) .Read(read => read.Action("Get", "Home") ) ) ) </div>
- 这是我的控制器获取数据现在我想在文本框中输入文本时从服务器端过滤数据，文本传递到控制器并从数据库过滤数据然后再次传递给视图绑定列表视图
public JsonResult Get([DataSourceRequest] DataSourceRequest request) { var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel { FirstName = list.FirstName, Gender = list.Gender, DOB = list.DOB.Value.ToShortDateString(), Image = list.Image, CountryName = list.Name, ProvinceName = list.ProvinceName, Interset = list.Interset }).ToList(); return Json(studentData.ToDataSourceResult(request)); }

Answer 1

Here is how done it according to my Requirement 

 - Client Side

@Html.TextBox("SearchBox")

<button id="btnSearch">Filter</button> 

<script type="text/x-kendo-tmpl" id="template">
    <div class="col-md-8  jumbotron">
        <div class="col-sm-4">
            <span><b>Name:</b></span><br />
            <span><b>Gender:</b></span><br />
            <span><b>DOB:</b></span><br />
            <span><b>Country:</b></span><br />
            <span><b>Province:</b></span><br />
            <span><b>Interset:</b></span><br />
        </div>
        <img img src="#:Image#" width="100" height="100" />
        <div class="col-sm-4">
            <span>#:FirstName#</span><br />
            <span>#:Gender#</span><br />
            <span>#:DOB#</span><br />
            <span>#:CountryName#</span><br />
            <span>#:ProvinceName#</span><br />
            <span>#:Interset#</span><br />
        </div>
    </div>
</script>

<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>()
                .Name("ListView")
                .TagName("div")
                .ClientTemplateId("template")
              .DataSource(dataSource =>
              {
                  dataSource.Read(read => read.Action("GetStudentListViewData", "Home")).ServerOperation(true);
                  dataSource.PageSize(2);
              }).Pageable()
    )
</div>

<script src="~/Scripts/Kendo/Scripts/kendo.all.min.js"></script>
    <script src="~/Scripts/Kendo/Scripts/kendo.aspnetmvc.min.js"></script>
    <script>
        $('#btnSearch').click(function () {

            filterListView();
        });
        $('#SearchBox').keypress(function (e) {
            if (e.which == 13) {//Enter key pressed
                $('#btnSearch').click();//Trigger search button click event
            }
        });
        function filterListView() {
            debugger;
            var searhValue = $('#SearchBox').val();
            var dataSource = ({
                filters: {
                    // leave data items which are
                    logic: "or",
                    filters: [
                      { field: "FirstName", operator: "contains", value: searhValue },
                      { field: "CountryName", operator: "contains", value: searhValue },
                      { field: "Gender", operator: "contains", value: searhValue },
                      { field: "ProvinceName", operator: "contains", value: searhValue },
                    { field: "Interset", operator: "contains", value: searhValue }
                    ]
                }
            });
            var list = $("#ListView").data("kendoListView");
            list.dataSource.filter(dataSource.filters);
        }
</script>

服务器端

    public JsonResult GetStudentListViewData([DataSourceRequest] DataSourceRequest request)
{
    var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel
    {
        FirstName = list.FirstName,
        Gender = list.Gender,
        DOB = list.DOB.Value.ToShortDateString(),
        Image = list.Image,
        CountryName = list.Name,
        ProvinceName = list.ProvinceName,
        Interset = list.Interset
    }).ToList();

    return Json(studentData.ToDataSourceResult(request));
}

在操作方法中从服务器端过滤 Telerik ListView 中的数据

Filter Data in Telerik ListView from server side in action method

c#

model-view-controller

jquery

telerik