如何将数据发送到Kendo Grid？

Question

我的目标是要有一个带有两个按钮的输入文本框，它们将对输入执行不同的数据库查询，然后将结果输出到Kendo Grid。 有人可以给我举个例子或指出我做错了什么吗？ 我想使用Ajax，因为据我有限的了解，这将阻止整个页面的重新加载。

查看代码：

<div class="loginForm">
    <div id="searchForm" class="well">
        <h2>Search</h2>
        <form method="post" action="~/Search/Search">
            <input type="text" id="search" name="input" class="form-control input-group input-group-lg" placeholder="Search..." required autofocus/>
            <br />
            <input type="submit" id="bunNumBut" name="submitBut" class="btn btn-primary btn-sm pull-left" value="Bundle Number" />
            <input type="submit" id="custNumBut" name="submitBut" class="btn btn-primary btn-sm pull-right" value="Customer Number" />
        </form>
    </div>
</div>
<br />
<div>
{
    @(Html.Kendo().Grid(Model)
        .Name("searchResultsG")
        .Columns(columns =>
        {
            columns.Bound(c => c.BundleNumber);
            columns.Bound(c => c.CustomerNumber);
            columns.Bound(c => c.Carrier);
            columns.Bound(c => c.Active);
        })
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .Sortable()
        .Editable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read
                .Action("Bundles_Read", "Search")
                .Data("bundlesReadData"))
            .Model(model => model.Id(p => p.CustomerNumber)))
    )
}
</div>
<script>
function bundlesReadData() {
    return {
        input: $('#search').val()
    };
}
</script>

控制器代码：

[HttpPost]
public ActionResult Search(string input, string submitBut)
{
    searchInput = input;          //private class variables, but they get erased on each request
    submitButton = submitBut;     //private class variables, but they get erased on each request
    switch (submitButt)
    {
        case "Bundle Number":
            return View("Index");
        case "Customer Number":
            return View("Index");
        default:
            return View("Index");
    }
}

public ActionResult Bundles_Read([DataSourceRequest]DataSourceRequest request)
{
    if (searchInput == "Bundle Number")
        return Json(GetBundlesByBunNum(searchInput).ToDataSourceResult(request));
    else
        return Json(GetBundlesByCustNum(searchInput).ToDataSourceResult(request));
}

我不知道如何将输入和SubmitBut传递给javascript函数bundlesReadData（），因为我想将条件数据传递给Bundles_Read（）方法。 我也不知道此DataSourceRequest对象在做什么，这使我无法在Search（）方法中调用GetBundlesByBunNum（）和GetBundlesByCustNum（）方法。 让我知道是否有任何不清楚的地方，或者是否需要提供更多详细信息来帮助您。

Answer 1

如果您已经返回了所有数据，则可以通过单个文本框使用kendo的过滤器功能，而不必发出其他ajax请求来过滤结果。

当用户在文本框字段中输入内容时，如果BundleNumber或CustomerNumber包含用户输入字段值，则网格将过滤搜索结果。

<div class="loginForm">
    <div id="searchForm" class="well">
        <h2>Search</h2>
        <input type="text" id="search" name="input" class="form-control input-group input-group-lg" placeholder="Search..." required autofocus/>
    </div>
</div>

<script type="text/javascript">
    $(function()
    {
        $('#search').on('input', function()
        {
            var value = $(this).val();
            if (value)
            {
                $("#searchResultsG").data("kendoGrid").dataSource.filter(
                {
                    logic: "or",
                    filters:
                    [
                        { field: "BundleNumber", operator: "contains", value: value },
                        { field: "CustomerNumber", operator: "contains", value: value }
                    ]
                });
            }
            else
            {
                $("#searchResultsG").data("kendoGrid").dataSource.filter({});
            }
        });
    });    
</script>