如何在 PartialView 中创建分页

Question

我想在Home/Index 加载部分视图我写这个代码：

NewsPagingViewModel 类：

public class NewsPagingViewModel
    {
        public IList<DommainCalsses.Models.News> News { get; set; }
        public int CurrentPage { get; set; }
        public int Count { get; set; }
        public int Term { get; set; }
        public int Page { get; set; }
        public int TotalRecords { get; set; }
    }

在控制器中

 public virtual ActionResult ShowNews(int page=0)

    {
        return PartialView(Views._News, new Posc.Model.News.NewsPagingViewModel() { CurrentPage = page, Count = 3, News = _newsService.GetList(page, 3), Term = 0, Page = page, TotalRecords = _newsService.GetCount() });
    }

在_News部分视图中

@model Posc.Model.News.NewsPagingViewModel

@{
    int currentPage = Model.CurrentPage + 1;
    int count = Model.Count;
    int max = (Model.TotalRecords % count == 0) ? Model.TotalRecords / count : (Model.TotalRecords / count) + 1;
    const int size = 8;
    int firstPage = ((currentPage - size) <= 0) ? 0 : currentPage - size;
    int lastPage = ((currentPage + size) >= max) ? max : currentPage + size;
}
<div id="label-table">



    @foreach (var item in Model.News)
    {
        <div class="row">
            <div class="col-sm-1" style="padding-left: 5px;margin-left: 5px;">

                <img src="@item.Image" />
            </div>
            <div class="col-sm-5">
                @Html.ActionLink(item.Abstract, MVC.Admin.News.Index())
            </div>
        </div>
    }
    @* Page Navigation *@

    <div class="pagination pagination-centered">
        <ul>
            @if (currentPage - 1 == firstPage)
            {
                <li class="active"><a>First</a></li>
            }
            else
            {
                <li>
                    @Ajax.ActionLink("First", MVC.Admin.News.ActionNames.ShowNews, MVC.Admin.News.Name, new { page = 0, count = Model.Count }, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnBegin = "showLoading", UpdateTargetId = "label-table", OnSuccess = "loadAjaxComponents", OnComplete = "hideLoading" }, null)
                </li>
            }
            @for (int i = firstPage; i < lastPage; i++)
            {
                @*if (i + 1 == currentPage)
                    {
                        <li class="active"><a>@i+1</a></li>
                    @*Html.ConvertToPersianString(i + 1)
                    }
                    else
                    {*@
                <li>
                    @*Html.ConvertToPersianString(i + 1).ToString()*@
                    @Ajax.ActionLink((@i + 1).ToString(), MVC.Admin.News.ActionNames.ShowNews, MVC.Admin.News.Name, new { page = @i }, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnBegin = "showLoading", UpdateTargetId = "News", OnSuccess = "loadAjaxComponents", OnComplete = "hideLoading" }, null)
                </li>
                @*}*@
            }
            @if (currentPage == lastPage)
            {
                <li class="active"><a>Last</a></li>
            }
            else
            {
                <li>
                    @Ajax.ActionLink("Last", MVC.Admin.News.ActionNames.ShowNews, MVC.Admin.News.Name, new { page = 0, count = Model.Count }, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnBegin = "showLoading", UpdateTargetId = "News", OnSuccess = "loadAjaxComponents", OnComplete = "hideLoading" }, null)
                </li>
            }
        </ul>
    </div>


</div>

在Home/Index

<div id="News">
    @Html.Action(MVC.Admin.News.ShowNews())
</div>

在第一次运行中像这样：

但是当点击分页重定向到局部视图时像这样：

但我想刷新主页/索引中的部分视图。

Answer 1

我建议您使用PagedList 库。太棒了，微软决定在他们的官方教程中使用这个库 (full tutorial here)

它在进行分页时提供了非常干净的代码。请参阅下面的示例代码。

第 1 步

使用 Nuget 添加 PagedList.Mvc 库。 https://www.nuget.org/packages/PagedList.Mvc/

第 2 步

在您的操作方法中集成 PagedList。这是一个关于如何做到这一点的示例。

using PagedList;
public ActionResult ShowNews(int? page)
{
    int currentPage = (page ?? 1);

    // Fix negative page
    currentPage = currentPage < 0 ? 1 : currentPage;

    int pageSize = 3;

    IEnumerable<Models.News> newsModels = newsService.GetList(currentPage, pageSize);

    return View(newsModels.ToPagedList(currentPage, pageSize));
}

第 3 步

在您的视图中集成 PagedList

@model PagedList.IPagedList<Models.News>
@using PagedList.Mvc;

@foreach (var item in Model.News)
{
    <div class="row">
        <div class="col-sm-1" style="padding-left: 5px;margin-left: 5px;">

            <img src="@item.Image" />
        </div>
        <div class="col-sm-5">
            @Html.ActionLink(item.Abstract, MVC.Admin.News.Index())
        </div>
    </div>
}


Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action(MVC.Admin.News.ActionNames.ShowNews))

在此处查看完整教程http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application