Zaimplementowałem WebGrid. Sortowanie, stronicowanie i filtrowanie nie działają razem. Działają, gdy używasz ich samodzielnie. Po połączeniu tych trzech filtrów filtrowanie nie działa.

Objaw:
Filtruj zestaw wyników, a następnie sortuj.

lub

Filtruj zestaw wyników, a następnie przejdź do następnej strony.

W obu przypadkach filtr zostanie utracony. Ale robi to strona i sortuje.

W poniższym kodzie: Gdy metoda akcji jest wywoływana przez sortowanie lub paginację, dla każdego z parametrów filtru pokazywane są wartości null.

Gdy metoda działania jest wywoływana przez filtr, parametry filtra przechodzą.

Mówi mi to, że kiedy inicjujesz sortowanie lub stronicowanie, nie przesyła formularza.

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

Rozejrzałem się wokół SO i gdzie indziej. Istnieje wiele przykładów i osób pytających, jak zrobić jedno lub drugie lub wszystkie trzy. Ale widziałem tylkojeden z moim problemem, więc publikuję to tutaj. (jego również nie udało się rozwiązać)

Mam stronę zaimplementowaną w następujący sposób:

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

}
</code>

Siatka jest zaimplementowana jako widok częściowy w ten sposób:

<code><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 }))
            )
        );
}
</code>