2

現在、ここから取得した MvcPaging nuget パッケージを使用しています: https://github.com/martijnboland/MvcPaging

私の問題は、@Html.Pager ヘルパーを使用するときに要素を置き換えるのではなく、ということです。新しいタブで部分ビューを開きます。

私の目標は、ページ全体を更新することなく、Ajax を介して QuickLinks セクションを更新することです。

これは私のコントローラーです:

    private CasuallyProDb db = new CasuallyProDb();
    private const int DefaultPageSize = 7;

    //
    // GET: /Home/
    public ActionResult Index()
    {
        int currentPageIndex = 0;
        var news = db.PostedNews.OrderBy(a=>a.NewsId).ToPagedList(currentPageIndex, DefaultPageSize);
        return View(news);

    }

    public ActionResult AjaxPage(int? page)
    {
        int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
        var news = db.PostedNews.OrderBy(a => a.NewsId).ToPagedList(currentPageIndex, DefaultPageSize);
        return PartialView("_QuickLinks", news);
    }

これは、部分ビューをレンダリングする私のインデックス ビューです。

@model IPagedList<CasuallyPro.Models.News>
@using MvcPaging
<div id="quickLinksWrapper" class="float-right">
    @Html.Partial("_QuickLinks", Model)
</div>

そして、これは私の _QuickLinks.cshtml 部分ビューです:

@model IPagedList<CasuallyPro.Models.News>
@using MvcPaging

<div id="quickLinksDisplay">
<ul>
    @foreach (var news in Model)
    {
        <li>
            <img alt="" src="@Html.DisplayFor(modelItem => news.CategoryIcon)"/>
            <div class="quickLinksTitle">@Html.DisplayFor(modelItem => news.Title)<br/>
                <span class="quickLinksDetails">
                    <span class="quickLinksUsername"> Posted by @Html.DisplayFor(modelItem => news.PostedUserName)</span>
                    <span class="quickLinksDate"> on @Html.DisplayFor(modelItem => news.PostedDate)</span>
                </span>
            </div>
        </li>
    }
</ul>
<div id="quickLinksPagedList">
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount, new AjaxOptions
                                                                          {
                                                                            UpdateTargetId = "quickLinksWrapper"
                                                                          }).Options(o => o.Action("AjaxPage"))
</div>

彼らが提供したサンプルプロジェクトを見ていますが、これでうまくいくはずですが、残念ながら適切に機能していません。目立たない ajax のために、_Layout.cshtml の head セクションでスクリプトを参照しています。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

任意のガイダンスをいただければ幸いです。

4

0 に答える 0