2

検索可能なアイテムのリストがあり、ページにはページネーションがあります。検索クエリを入力すると、部分ビューが正しく読み込まれます (AJAX)。ただし、ページネーションを使用すると、非 ajax リクエストが発生します (ページ全体がリロードされ、ヘッダーに XmlHttpRequest フラグはありません)。

これは何が原因ですか？

$(function () {
 // Adds Ajax to pagination of search results
    var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            type: "get",
            data: $("form").serialize() 
        };

        $.ajax(options).done(function (data) {
            var $target = $a.parents("div.pagedlist").attr("data-nn-target");
            var $newHtml = $(data);
            $target.html($newHtml);
            $newHtml.effect("highlight");
        });

        // Prevent default action
        return false;
    };

    $(".main-content").on("click", ".pagedlist a", getPage);
 });

<form method="GET" action='@Url.Action("Index", "Show")' data-nn-ajax="true" data-nn-target="#contentlist" class="form-search">
    <div class="input-append mysearch">
        <input type="search" class="span5 search-query" name="query" data-nn-autocomplete="@Url.Action("AutoComplete")" />
        <input type="submit" class="btn" value="Search" />
    </div>
</form>

<div id="contentlist">
    <table></table> // content
    <div class="pagedlist" data-nn-target="#contentlist">
        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.MinimalWithItemCountText)
    </div>
</div>

チュートリアルによると、このコード行は、結果セットにページネーションを使用できないという問題を解決するはずです。

data: $("form").serialize()

 public ActionResult Index(string query = "", int page = 1) {
        IPagedList<ShowViewModel> model;

        if (Request.IsAjaxRequest()) {
            model = ViewModelFactory.Instance.CreateShowViewModels(_showRepository.GetShows()
                                                                                       .Where(
                                                                                           x =>
                                                                                           x.Title.ToLower()
                                                                                            .Contains(
                                                                                                query.ToLower())))
                                         .OrderByDescending(x => x.LatestRelease).ToList().ToPagedList(page, 15);
            ViewBag.Search = query;
            return PartialView("_Shows", model);
        }

        model = ViewModelFactory.Instance.CreateShowViewModels(_showRepository.GetShows()).OrderByDescending(x => x.LatestRelease).ToList().ToPagedList(page, 15);
        ViewBag.Search = null;
        return View(model);
    }

Viewと呼び出しの両方にブレークポイントを置くと、ページネーションを使用PartialViewするたびにブレークポイントにヒットしViewます (そのため、毎回すべてのデータが表示されます)。リクエストが AJAX リクエストとして認識されないのはなぜですか?

4

1 に答える 1

1

.main-contentがページネーション リンクの真の祖先であることを確認してください。そうしないと、イベントの委任$(".main-content").on("click", ".pagedlist a", getPage)が機能しません。

更新：

続きの問題。これ：

var $target = $a.parents("div.pagedlist").attr("data-nn-target");

...代わりに次のようにする必要があります。

var $target = $($a.parents("div.pagedlist").attr("data-nn-target"));

これは、そのセレクターを使用する jQuery オブジェクトではなく、attr("data-nn-target")単にselectorを提供するためです。

于 2013-06-28T17:14:34.253 に答える