MVC 3 WebGrid с флажком фильтра - PullRequest
Новая
       7

MVC 3 WebGrid с флажком фильтра

2 голосов
/ 24 марта 2011

Я занимаюсь разработкой веб-приложения с использованием MVC 3 RTM.В представлении у меня есть WebGrid, который отлично работает с сортировкой и подкачкой страниц.Однако мне также потребовалась некоторая поддержка фильтрации на странице, поэтому я добавил текстовое поле и флажок.Код вида выглядит следующим образом: 

@using (Html.BeginForm("Index", "Customer", FormMethod.Get))
{
    <fieldset>
        <legend>Filter</legend>
        <div class="display-label">
            Search for</div>
        <div class="display-field">@Html.TextBox("filter", null, new { onchange = "$('form').submit()" })</div>
        <div class="display-label">
            Show inactive customers?
        </div>
        <div class="display-field">
            @Html.CheckBox("showInactive", false, new { onchange = "$('form').submit()" })
        </div>
    </fieldset>

    var grid = new WebGrid(canPage: true, canSort: true, ajaxUpdateContainerId: "grid", rowsPerPage: 10, defaultSort: "Name");
    grid.Bind(Model, rowCount: Model.Count, autoSortAndPage: false);
    grid.Pager(WebGridPagerModes.All);
    @grid.GetHtml(htmlAttributes: new { id = "grid" },
                  columns: grid.Columns(
                    grid.Column("Name", "Name"),
                    grid.Column("Address", "Address"),
                    grid.Column("IsActive", "Active", (item) => item.IsActive ? "Yes" : "No")));

}

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

Я попытался установить точку останова в моем контроллере, и там нет проблем.Запрос отправляется, когда я пытаюсь выполнить сортировку, и контроллер правильно возвращает представление с результатом в качестве модели.Но не похоже, что WebGrid обновляется сам.

Кто-нибудь еще испытывал это, или у кого-нибудь есть хороший совет, что искать?

Спасибо!

1 Ответ

1 голос
/ 24 марта 2011

Я обычно добавляю форму (над моей WebGrid), которая содержит текстовое поле с именем «Ключевые слова» и флажок «IsActive», и когда нажимается кнопка «Перейти», он перезагружает WebGrid, добавляя «Ключевые слова» и «IsActive»варианты строки запроса.

Вы можете добавить больше элементов в форму, и их значения будут отправлены al

Используйте следующий вспомогательный скрипт - webgrid.helper.js : 

function reloadGrid(form) {
    var grid = form._grid ? form._grid.value : "grid";
    var args = {};
    updateQueryParams(args, grid + " th a");
    args.sort = "";
    args.sortdir = "";
    updateQueryParams(args, grid + " tfoot a");
    args.page = 1;

    for (var i = 0; i < form.elements.length; i++) {
        var el = form.elements[i];
        if (el.type == "text" || el.type == "select" || (el.type == "radio" && el.checked))
            args[el.name] = el.value;
        else if (el.type == "checkbox")
            args[el.name] = el.checked;
    }

    //get controller name
    var s = $("#grid th a")[0].onclick.toString();
    s = s.substring(s.indexOf("/"));
    var controller = s.substring(0, s.indexOf("?"));

    var queryString = "";
    for (var key in args)
        queryString += "&" + key + "=" + escape(args[key]);

    var url = controller + "?" + queryString.substring(1);
    $("#" + grid).load(url + " #" + grid);
}


function updateQueryParams(args, path) {
    var links = $("#" + path);
    if (links.length == 0)
        return;

    var s = links[0].onclick.toString();
    s = s.substring(s.indexOf("?") + 1);
    s = s.substring(0, s.indexOf(" #"));

    var a = /\+/g;  // Regex for replacing addition symbol with a space
    var r = /([^&=]+)=?([^&]*)/g;
    var d = function (s) { return decodeURIComponent(s.replace(a, " ")); };
    var q = s;

    while (e = r.exec(q))
        args[d(e[1])] = d(e[2]);
}

Тогда чуть выше моей веб-сетки у меня есть следующий частичный файл - * _ListFilter.cshtml *

@using (Html.BeginForm(null, null, FormMethod.Get))
{ 
    <div id="filter">
    <table width="600">
    <tr>
    <td>@Html.TextBoxFor(c => c.Keywords, new { size = 50, placeholder = Strings.SearchByKeywords, title = Strings.SearchByKeywords })</td>

    <td>&nbsp
...