14

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 }))
            )
        );
}
4

3 に答える 3

24

ページネーションと並べ替えのリンクを作成するとき、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 forASP.NETMVCなどのより高度なグリッドコントロールを検討してください。

于 2012-04-07T07:28:46.420 に答える
1

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

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

これは私には役立ちませんが、あなたに役立つかもしれません

于 2012-11-27T13:30:47.867 に答える
1

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

[HttpGet]
public ActionResult MyPage()

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

于 2017-02-01T20:39:53.857 に答える