如何將數據發送到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>