带有复选框过滤器的 MVC 3 WebGrid

Question

我正在使用 MVC 3 RTM 开发一个 Web 应用程序。在视图中，我有一个 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 似乎并没有自我更新。

有没有其他人经历过这种情况，或者有人对寻找什么有一些好的建议？

谢谢！

Answer 1

我通常添加一个表单（在我的 WebGrid 上方），其中包含一个名为“Keywords”的文本框和一个名为“IsActive”的复选框，当单击“Go”按钮时，它会重新加载 WebGrid，将“Keywords”和“IsActive”选项添加到查询字符串。

您可以向表单添加更多元素，它们的值将被发送。

使用以下帮助程序脚本 - 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]);
}

然后，在我的 webgrid 上方，我有以下部分文件 - *_ListFilter。 html*

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