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>

如何将数据发送到剑道网格？

1 个答案: