web-dev-qa-db-ja.com

.NET4.0のWebGrid +ページング+並べ替え+フィルタリングでフィルターが失われています

WebGridを実装しました。並べ替え、ページング、フィルタリングは連携して機能しません。単独で使用すると機能します。 3つを同時に組み合わせると、フィルタリングは機能しません。

症状：
結果セットをフィルタリングしてから並べ替えます。

または

結果セットをフィルタリングしてから、次のページに進みます。

どちらの場合も、フィルターは失われます。しかし、それはページとソートを行います。

コードビハインド：アクションメソッドが並べ替えまたはページ付けを介して呼び出されると、フィルターパラメーターごとにnullが表示されます。

アクションメソッドがフィルターを介して呼び出されると、フィルターパラメーターが通過します。

これは、ソートまたはページ付けを開始すると、フォームを送信していないことを示しています。

public ActionResult MyPage(int? page, int? rowsPerPage, 
              string sort, string sortdir, 
              string orderNumber, string person, string product)

私はSOや他の場所を見回しました。1つまたは別の方法または3つすべてを行う方法を尋ねる例や人々がたくさんあります。しかし、私は見ただけです 私の問題の1つ なので、ここに投稿します（彼も未解決でした）

私のページは次のように実装されています：

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))
{
    <div class="right">
        <select id="rowsPerPage" name="rowsPerPage">
            <option>15</option>
            <option>25</option>
            <option>50</option>
            <option>75</option>
            <option>100</option>
        </select>
    </div>  

    <div class="table">
        <div class="tableRow">
            <div class="tableCell">
                Order Number
            </div>
            <div class="tableCell">
                Person
            </div>
            <div class="tableCell">
                Product
            </div>
        </div>
        <div class="tableRow">
            <div class="tableCell">
                <input type="text" id="orderNumber" name="orderNumber" />
            </div>
            <div class="tableCell">
                <input type="text" id="person" name="person" />
            </div>
            <div class="tableCell">
                <input type="text" id="product" name="product" />
            </div>          
            <div class="tableCell">
                <input type="submit" class="button" value="Search" />
            </div>  
        </div>
    </div>

<br/>

<div id="myGrid">
    @Html.Partial("_MyPage", Model)
</div>

}

グリッドは、次のような部分ビューとして実装されます。

<script type="text/javascript">
    $(document).ready(function () {
        resetUI();
    });
</script>

@{
    var grid = new WebGrid(canPage: true, rowsPerPage: Model.rowsPerPage, canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "resetUI");
    grid.Bind(Model.rows, rowCount: Model.TotalRecords, autoSortAndPage: false);
    @grid.GetHtml(
        tableStyle: "fancyTable",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row",
        alternatingRowStyle: "alt",
        mode: WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious,
        nextText: "Next",
        previousText: "Previous",
        htmlAttributes: new { id = "grid" },
        columns: grid.Columns(
            grid.Column("OrderDate", "Order Date", format: @<text>@((item.OrderDate != null) && (item.OrderDate.ToString("MM/dd/yyyy") != "01/01/0001") ? item.OrderDate.ToString("MM/dd/yyyy") : "")</text>),
            grid.Column("OrderNumber", "Order Number"),
            grid.Column("Field1, "Field 1"),
            grid.Column("Field2", "Field 2"),
            grid.Column("Person", "Person"),
            grid.Column("Product", "Product"),
            grid.Column(format: (item) => Html.ActionLink("View", "Details", new { id = item.orderNumber }))
            )
        );
}
c#asp.net-mvcasp.net-mvc-3webgrid
14
010110110101

ページネーションと並べ替えのリンクを作成するとき、WebGridヘルパーは現在のURLに存在するすべてのクエリ文字列パラメーターを考慮に入れます。 POSTされた値とルート値は無視されます。また、検索フォームはPOSTであるため、ユーザーがこのフォームに入力した値はクエリ文字列に存在しないため、ページネーションと並べ替えのリンクの一部ではなく、これらのリンクの1つをクリックすると値は次のようになります。失われました。これは仕様によるものです。

したがって、これを修正する1つの方法は、AjaxFormを置き換えることです。

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))

gET動詞を使用した標準のHTMLフォームで：

@using (Html.BeginForm("MyPage", null, FormMethod.Get))

または、GET動詞を使用したAJAXフォーム：

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))

これで、ユーザーが何かをフィルタリングしたいときに[検索送信]ボタンを押すと、検索フォームに入力した値がクエリ文字列になり、WebGridヘルパーをレンダリングすると、それらを使用して並べ替えリンクとページリンクが生成されます。これらのリンクをクリックすると、値がサーバーに送信されます。

これをより細かく制御したい場合は、 MvcContrib.Grid や Telerik Grid for ASP.NET MVC などのより高度なグリッドコントロールを検討してください。

24
Darin Dimitrov

ページングリンクが指すURLにフォームを送信します。

<script type="text/javascript">
     $(function () {
        $('th a, tfoot a').click(function () {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>

これは私を助けませんがあなたを助けるかもしれません

1
Karthik Chintala

アクションメソッドのGETを作成するだけで、グリッドから並べ替えまたはページングが発生するたびに、多くのパラメーターとともにGETメソッドにヒットします（のWeb開発ツールを使用してグリッドのページング番号または並べ替えヘッダーをポイントすると確認できますブラウザ）、データセットをフィルタリングして、モデルをビューに渡すことができます：

[HttpGet]
public ActionResult MyPage()

ソートまたはページングを実行するたびに、このメソッドがヒットし、フィルタリングを実行できます。フィルタリングする対象に応じて割り当てることができる静的フラグを追加できます。

1
Utkarsh Bais