ASP.NET MVC GridView按钮点击按文本框中的值过滤？ （DevExpress的）

Question

摘要：我想在文本框中输入文本，按下按钮，GridView应显示缩小的内容 - 按值过滤。

详情：作为DevExpress APS.NET MVC 5初学者，我有一个使用GridView的简单演示应用程序。第一个示例使用带有过滤器行的Gridview - 由DevExpress（14.2）GridView向导生成的所有内容。

在列过滤器中输入一些值时，显示的内容会在一段时间后减少：

我需要实现替代方法，我在文本框中输入值，并且只有在按下Apply按钮后才更新GridView内容：

视图定义如下：

@{
    ViewBag.Title = "GridView filtering";
}

<h2>@ViewBag.Title</h2>

@Html.DevExpress().Label(settings =>
{
    settings.Name = "Label";
    settings.Text = "Filter for the Name column";
}).GetHtml()

@Html.DevExpress().TextBox(settings =>
{
    settings.Name = "TextBox";
}).GetHtml()

@Html.DevExpress().Button(settings =>
{
    settings.Name = "BtnApply";
    settings.Text = "Apply";
    settings.UseSubmitBehavior = true;
}).GetHtml()


@Html.Action("GridViewPartial")

我迷失了如何将按钮单击绑定到功能，如何获取文本框内容，以及如何将其传递给GridView并使其更新。

Answer 1

在此方案中，“应用”按钮不应执行提交。将其UseSubmitBehavior属性设置为False。处理按钮的客户端Click事件。要在标记中访问它，请使用ButtonSettings.ClientSideEvents：

@Html.DevExpress().Button(settings =>
{
    settings.Name = "BtnApply";
    settings.Text = "Apply";
    settings.UseSubmitBehavior = false;
    settings.ClientSideEvents.Click = "btnApplyClick";
}).GetHtml()

在btnApplyClick JS函数中，使用TextBox'es clien-side GetText方法获取TextBox中输入的文本。然后，使用Grid的客户端AutoFilterByColumn通过Name列将过滤器应用于网格：

<script type="text/javascript">
    function btnApplyClick(s, e) {
        var filter = TextBox.GetText();
        GridView.AutoFilterByColumn("Name", filter);
    }
</script>

其中“GridView”是GridView扩展名的名称。