Фильтр теряется в WebGrid + Paging + Сортировка + Фильтрация в .NET 4.0

Я реализовал WebGrid. Сортировка, пейджинг и фильтрация не работают вместе. Они работают, когда вы используете их в одиночку. Когда вы объединяете три, в то же время фильтрация не работает.

Симптом:
Отфильтруйте набор результатов, затем выполните сортировку.

или

Отфильтруйте набор результатов, затем перейдите на следующую страницу.

В обоих случаях фильтр теряется. Но это страница и сортировка.

В коде позади: Когда метод действия вызывается через сортировку или разбивку на страницы, для каждого из параметров фильтра отображаются значения NULL.

Когда метод действия вызывается через фильтр, параметры фильтра проходят.

Это говорит мне, что когда вы инициируете сортировку или разбивку на страницы, чтобы она не отправляла форму.

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

Ответ 1

При создании ссылок на страницы и сортировки помощник WebGrid учитывает все параметры строки запроса, присутствующие в текущем URL-адресе. Он игнорирует значения POSTed и route. И поскольку ваши POST-формы в форме поиска, значения, введенные пользователем в этой форме, не присутствуют в строке запроса, поэтому они не являются частью ссылок разбиения на страницы и сортировки, и когда вы нажимаете на одну из этих ссылок, значения потерял. Это по дизайну.

Итак, один из способов исправить это - заменить AjaxForm:

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

со стандартной формой HTML с использованием GET-глагола:

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

или форма AJAX с использованием GET-глагола:

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

Теперь, когда пользователь хочет что-то отфильтровать и нажимает кнопку "Поиск в представлении", значения, введенные им в форме поиска, попадут в строку запроса, и при рендеринге помощник WebGrid будет использовать их для генерации ссылок на Сортировку и страницу и конечно, когда вы нажимаете на эти ссылки, значения будут отправляться на сервер.

Если вы хотите больше контролировать это, вы можете рассмотреть более сложные элементы управления сетью, такие как MvcContrib.Grid или Telerik Grid для ASP.NET MVC.

Ответ 2

Отправьте форму в URL-адрес, на который указывает ссылка поискового вызова:

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

Это не помогает мне, но может помочь вам

Ответ 3

Просто создайте GET для своего метода действий, всякий раз, когда сортировка или пейджинг срабатывает из сетки, он попадает в метод GET вместе с множеством параметров (вы можете видеть, указав на номер подкачки или сортировать заголовок сетки, используя веб-страницу инструменты разработчика вашего браузера), там вы можете отфильтровать свой набор данных, а затем передать модель в представление:

[HttpGet]
public ActionResult MyPage()

Каждый раз, когда вы выполняете сортировку или пейджинг, этот метод будет удален, тогда вы можете сделать свою фильтрацию, вы можете добавить некоторые статические флаги, которые могут быть назначены в зависимости от того, что вы хотите фильтровать.