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