Kendo Grid 在 Read() 中传递附加参数答案

【问题标题】：Kendo Grid pass additional parametert in Read()Kendo Grid 在 Read() 中传递附加参数
【发布时间】：2018-02-23 16:53:40
【问题描述】：

我已经对我的剑道网格应用了外部过滤器，它可以在单个文本框和一个按钮上正常工作。但是现在我需要在网格上方添加另一个文本框和一个按钮，并根据单击的按钮调用相应的方法。为此，我需要将其他参数传递给网格。

我已经添加了 2 个文本框和 2 个按钮作为后续，目前 Read() 调用 AdditionalData() 来发送文本框之一的值。如何传递另一个文本框的值？

<div style="margin-bottom: 5px;">
@Html.TextBox("compSearch", (string)TempData["searchString"], new { id = "txtCompanySearch", style = "width: 400px;" })
    <button id="searchButton" class="button" type="button" style="text-align:center;" onclick="searchAccounts()">
        <span>Search</span>
        <img src="~/Content/images/magnifier.png" />
    </button>
    <input type="hidden" id="hdnSrchString" value="@ViewBag.searchString" />

    @Html.TextBox("compSearchByMasterRateSheetId", (string)TempData["searchStringMRS"], new { id = "txtCompanySearchByMasterRateSheetId", style = "width: 400px;" })
    <button id="searchByMasterRateSheetIdButton" class="button" type="button" style="text-align:center;" onclick="searchAccountsMRS()">
        <span>Search By Master Rate Sheet ID</span>
        <img src="~/Content/images/magnifier.png" />
    </button>
    <input type="hidden" id="hdnSrchStringMRS" value="@ViewBag.searchStringMRS" />

</div>

<div class="k-content">



  @(Html.Kendo().Grid<Customer>()
                .Name("accountsGrid")
            .Columns(col =>
            {
                col.Bound(c => c.CustomerName).Title("Account").Width("30%");
                col.Bound(c => c.SourceSystemId).Title("B ID").Width("20%");
                col.Bound(c => c.AccountManager).Title("Account Manager").Width("30%");
                col.Bound(c => c.IsExternalQuotingEnabled).Title("External Quoting Enabled?").Width("20%");
            })
            .SetLevel3Defaults(Model)
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetCompanyInfo", "Home").Data("additionalData"))
                .PageSize(20)                  
            )
)

additionalData方法如下：

function additionalData() {
        return {
            searchString: $("#txtCompanySearch").val()
        }
    }

【问题讨论】：

标签： jquery asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

首先，不需要 ViewBag - 只需像这样参数化您的服务器操作：

[HttpPost]
public ActionResult GetCompanyInfo(string searchString, string searchStringMRS)
{
    if (!string.IsNullOrWhiteSpace(searchString))
    { search by searchString }
    else
    { search by searchStringMRS }
    ...
}

然后更改您的附加数据：

function additionalData() {
        return {
            searchString: $("#txtCompanySearch").val(),
            searchStringMRS: $("#txtCompanySearchByMasterRateSheetId").val()
        }
    }

这些将按名称匹配并传递到您的 READ 操作中。只需保留 1 个按钮即可触发过滤。

此外，您可以将过滤器移动到网格的工具栏。见here。

【讨论】：