1

私はASP.NET MVC3アプリケーションを構築しています。検索ページでは、ajaxを使用してページの結果部分を取得および更新しています。問題はブラウザの履歴にあります。たとえば、ユーザーが結果の 5 ページ目にいて、ブラウザの更新をクリックすると、インデックス ページが表示されます (5 ページ目が更新されるはずです)。ブラウザの戻るボタンと同じ問題。いくつかの調査を行ったところ、jQuery Historyという名前の拡張機能が見つかりました。彼らの例では、タブ システム (非表示と表示) を使用していますが、私のものと同じ状況 (ページネーション) ではありません。ここに私のコードの簡単なものがあります:

前もって感謝します。

編集: Html 5 履歴 API を使用しようとしましたが、このコードを使用しても機能しません。最初のページ ナビゲーション (例: ページ 2 へ) の後、GET メソッドが 2 回実行されることに FireBug を使用して気づきました!!

編集 2:popstateデバッグ時に、イベントを処理するときにlocation.pathnameプロパティが常に持っている ことに気付きました/Home/GoToPageが、たとえば/Home/GoToPage?pageIndex=3

私のインデックスページ

<h2>Pages navigator</h2>      
@Html.Partial("_Result")

私の結果の部分ビュー

@model HistoryConcept.Models.Result

<aside id="content">
    @{
        var prevUrl = String.Format(@"/Home/GoToPage?pageIndex={0}", Model.PageNumber - 1);
        var nextUrl = String.Format(@"/Home/GoToPage?pageIndex={0}", Model.PageNumber + 1);

        <a id="goPrevious" href="@prevUrl">Previous page</a>
        <a id="goNext" href="@nextUrl">Next page</a> 
    }

    <div>Page number : @Model.PageNumber</div>
    <div>@Model.PageContent</div>
</aside>

結果の部分ビューの JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        window.addEventListener('popstate', function (e) {
            getPage(location.pathname);
        });

        setupHistoryClicks();
    });

    function setupHistoryClicks() {
        addClicker($('#goPrevious'));
        addClicker($('#goNext'));
    }

    function addClicker(link) {

        link.click(function (e) {
            var linkHref = link.attr('href');
            getPage(linkHref);
            history.pushState(null, null, linkHref);
            e.preventDefault();
        });
    }

    function getPage(href) {

        var req = new XMLHttpRequest();
        req.open("GET", href, false);
        req.send(null);

        if (req.status == 200) {
            $('#content').replaceWith(req.responseText);
            setupHistoryClicks();
            return true;
        }
        return false;
    }
</script>

私のコントローラー

public ActionResult Index()
        {
            var model = new Result {PageContent = "This is the home page"};
            return View(model);
        }

        public PartialViewResult GoToPage(int pageIndex)
        {
            var model = new Result
                {
                    PageNumber = pageIndex,
                    PageContent = "New page content"
                };
            return PartialView("_Result", model);
        }
4

1 に答える 1

0

ページングのパラメータ

•クエリ文字列にページ番号を保持する

このアプローチでは、ページあたりのアイテム数がサーバー側で構成されます。したがって、ページ番号 2 は 11 から 20 までのレコードを表示することを意味しますが、1 ページあたり 50 項目を表示することにした場合、問題は後で発生し、ページ番号 2 は 51 から 100 を意味します。これは間違っています。URL は常に同じ結果を返す必要があります。ユーザーがブックマークを付けたり、検索エンジンがアプリケーションの特定のページを特定のキーワードで参照したりする可能性があります。

•最良のアプローチは、2 つのパラメーターを保持することです。

Start : 開始インデックス Count: 1 ページあたりのアイテム数 したがって、start が 11 でレコード数が 10 の場合、11 から 20 のレコードが表示されます。

これにより、ページングは​​ UI によって完全に制御されますが、膨大なデータの負荷を避けるために、カウントの最大制限があることを確認してください。ajax Store start を使用したページング、および # のカウント、ボディ ロード時に # パラメータに基づいて最初のリクエストを作成します。

セッション？？ セッションを使用してページング ロジックを実装しないでください。URL には、同じデータをリロードするためのすべての情報が含まれている必要があります。ユーザーのブックマークがページ番号 10 をマークしている場合、ユーザーがブックマークにアクセスしたときに同じページをロードするようにしてください。これはすべてのユーザーが期待することですが、ビジネス要件ドキュメントにはありません。

于 2013-08-13T18:28:48.820 に答える