如何将数据发送到 Kendo Grid？答案

【问题标题】：How to send data to Kendo Grid?如何将数据发送到 Kendo Grid？
【发布时间】：2014-08-07 00:11:40
【问题描述】：

我的目标是有一个带有两个按钮的输入文本框，它们将使用输入执行不同的数据库查询，然后将结果输出到 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));
}

我不知道如何将 input 和 submitBut 传递给 javascript 函数 bundlesReadData()，因为我想将条件数据传递给 Bundles_Read() 方法。我也不知道这个 DataSourceRequest 对象在做什么，它阻止我在 Search() 方法中调用 GetBundlesByBunNum() 和 GetBundlesByCustNum() 方法。如果有任何不清楚的地方或我需要提供更多详细信息来帮助您，请告诉我。

【问题讨论】：

你的网格不是数据加载
我只得到了加载所有数据的网格。现在我需要它根据条件加载 2 组不同的数据。

标签： ajax asp.net-mvc-4 razor kendo-grid

【解决方案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>

【讨论】：