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