How to create Paging in PartialView - asp.net-mvc

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