c# - 在 .NET 4.0 中，过滤器在 WebGrid + 分页 + 排序 + 过滤中丢失

Question

我已经实现了 WebGrid。排序、分页和过滤不能一起工作。当您单独使用它们时，它们会起作用。当您同时结合这三者时，过滤不起作用。

症状:
过滤结果集，然后排序。

或

过滤结果集，然后转到下一页。

在这两种情况下，过滤器都丢失了。但它会分页和排序。

在后面的代码中:当通过排序或分页调用操作方法时，每个过滤器参数都会显示空值。

当通过过滤器调用 Action 方法时，过滤器参数通过。

这告诉我，当您启动排序或分页时，它并没有提交表单。

public ActionResult MyPage(int? page, int? rowsPerPage, 
              string sort, string sortdir, 
              string orderNumber, string person, string product)

我查看了 SO 和其他地方。有很多例子和人们询问如何做一个或另一个或所有三个。但我只看到one with my issue ，所以我把它贴在这里。 (他的也没有解决)

我的页面实现如下:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))
{
    <div class="right">
        <select id="rowsPerPage" name="rowsPerPage">
            <option>15</option>
            <option>25</option>
            <option>50</option>
            <option>75</option>
            <option>100</option>
        </select>
    </div>  

    <div class="table">
        <div class="tableRow">
            <div class="tableCell">
                Order Number
            </div>
            <div class="tableCell">
                Person
            </div>
            <div class="tableCell">
                Product
            </div>
        </div>
        <div class="tableRow">
            <div class="tableCell">
                <input type="text" id="orderNumber" name="orderNumber" />
            </div>
            <div class="tableCell">
                <input type="text" id="person" name="person" />
            </div>
            <div class="tableCell">
                <input type="text" id="product" name="product" />
            </div>          
            <div class="tableCell">
                <input type="submit" class="button" value="Search" />
            </div>  
        </div>
    </div>

<br/>

<div id="myGrid">
    @Html.Partial("_MyPage", Model)
</div>

}

网格实现为这样的局部 View :

<script type="text/javascript">
    $(document).ready(function () {
        resetUI();
    });
</script>

@{
    var grid = new WebGrid(canPage: true, rowsPerPage: Model.rowsPerPage, canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "resetUI");
    grid.Bind(Model.rows, rowCount: Model.TotalRecords, autoSortAndPage: false);
    @grid.GetHtml(
        tableStyle: "fancyTable",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row",
        alternatingRowStyle: "alt",
        mode: WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious,
        nextText: "Next",
        previousText: "Previous",
        htmlAttributes: new { id = "grid" },
        columns: grid.Columns(
            grid.Column("OrderDate", "Order Date", format: @<text>@((item.OrderDate != null) && (item.OrderDate.ToString("MM/dd/yyyy") != "01/01/0001") ? item.OrderDate.ToString("MM/dd/yyyy") : "")</text>),
            grid.Column("OrderNumber", "Order Number"),
            grid.Column("Field1, "Field 1"),
            grid.Column("Field2", "Field 2"),
            grid.Column("Person", "Person"),
            grid.Column("Product", "Product"),
            grid.Column(format: (item) => Html.ActionLink("View", "Details", new { id = item.orderNumber }))
            )
        );
}

Answer 1

在构建分页和排序链接时，WebGrid 助手会考虑当前 url 中存在的所有查询字符串参数。它忽略 POSTed 和路由值。并且由于您的搜索表单 POST，用户在此表单中输入的值不存在于查询字符串中，因此它们不是分页和排序链接的一部分，当您单击其中一个链接时，这些值是丢失。这是设计使然。

因此解决这个问题的一种方法是替换您的 AjaxForm:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))

使用 GET 动词的标准 HTML 表单:

@using (Html.BeginForm("MyPage", null, FormMethod.Get))

或使用 GET 动词的 AJAX 表单:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))

现在，当用户想要过滤某些东西并点击搜索提交按钮时，他在搜索表单中输入的值将最终出现在查询字符串中，并且在呈现 WebGrid 助手时将使用它们来生成其排序和页面链接以及当然，当您单击这些链接时，这些值将被发送到服务器。

如果您想对此进行更多控制，您可以考虑使用更高级的网格控件，例如 MvcContrib.Grid或 Telerik Grid for ASP.NET MVC .