Filter is getting lost in WebGrid + Paging + Sorting + Filtering in .NET 4.0

Question

I've implemented a WebGrid. Sorting, paging and filtering do not work together. They work when you use them alone. When you combine the three, at the same time, filtering doesn't work.

The symptom:
Filter the resultset, then sort.

or

Filter the resultset, then go to next page.

In both cases, the filter is lost. But it does page and sort.

In the code behind: When the action method is called via a sort or pagination, nulls show for each of the filter parameters.

When the action method is called via the filter, the filter parameters come through.

This tells me that when you initiate a sort or a pagination that it's not submitting the form.

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

I've looked around on SO and elsewhere. There are plenty of examples and people asking how to do one or another or all three. But I have only seen one with my issue, so I'm posting it here. (his was unsolved as well)

I have my page implemented as follows:

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

}

The grid is implemented as a partial view like this:

<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

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.