2

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 自体が更新されているようには見えません。

他の誰かがこれを経験したことがありますか、または何を探すべきかについて誰か良いアドバイスがありますか?

ありがとう！

4

1 に答える 1

1

通常、「Keywords」というテキストボックスと「IsActive」というチェックボックスを含むフォーム (WebGrid の上) を追加します。「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
于 2011-03-24T14:19:28.090 に答える