How to create Paging in PartialView

Question

I want in Home/Index Load Partial View I Write This Code:

NewsPagingViewModel class:

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

In Controller

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

In _News partialView

@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>

And In Home/Index

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

In the First Run Good Like This:

but when click in pagging Redirect to partial view Like this:

But I Want Refresh Partial View In Home/Index.

Answer 1

I would suggest you use the PagedList library. Its so awesome that Microsoft decided to use the library in their official tutorials (full tutorial here)

It provides a very clean code while doing pagination. See sample codes below.

Step 1

Add the PagedList.Mvc library using Nuget. https://www.nuget.org/packages/PagedList.Mvc/

Step 2

Integrate PagedList in your action method. Here is an example on how you could do it.

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

Step 3

Integrate PagedList in your View

@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))

See complete tutorial here 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