14

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

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

或者

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

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

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

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

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

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

我环顾了 SO 和其他地方。有很多例子和人们问如何做一个或另一个或所有三个。但是我只看到一个与我的问题有关的问题，所以我将其发布在这里。（他的也没有解决）

我的页面实现如下：

@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>

}

网格被实现为像这样的局部视图：

<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 }))
            )
        );
}
4

3 回答 3

24

When building the pagination and sort links, the WebGrid helper takes into account all query string parameters present in the current url. It ignores POSTed and route values. And since your Search form POSTs, the values that have been entered by the user in this form are not present in the query string, so they are not part of the pagination and sort links and when you click on one of those links the values are lost. This is by design.

So one way to fix that is to replace your AjaxForm:

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

with a standard HTML form using the GET verb:

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

or an AJAX form using the GET verb:

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

Now, when the user wants to filter something and hits the Search submit button the values he entered in the search form will end up in the query string and when rendering the WebGrid helper will use them to generate its Sort and Page links and of course when you click on those links the values will be sent to the server.

If you want more control over this you might consider more advanced grid controls such as MvcContrib.Grid or the Telerik Grid for ASP.NET MVC.

于 2012-04-07T07:28:46.420 回答
1

将表单提交到分页链接指向的 URL：

<script type="text/javascript">
     $(function () {
        $('th a, tfoot a').click(function () {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>

这对我没有帮助，但可能对你有帮助

于 2012-11-27T13:30:47.867 回答
1

只需为您的操作方法创建一个 GET，每当从网格触发排序或分页时，它会触发 GET 方法以及许多参数（您可以通过使用 Web 开发人员工具指向网格的分页编号或排序标题来查看您的浏览器），您可以在那里过滤数据集，然后将模型传递给视图：

[HttpGet]
public ActionResult MyPage()

每次您执行排序或分页时，都会点击此方法，然后您可以进行过滤，您可以添加一些静态标志，这些标志可以根据您要过滤的内容进行分配。

于 2017-02-01T20:39:53.857 回答