2014-03-13 5 views
0

나는이 코드 쓰기 Home/Index로드 부분보기에서 원하는에 페이징을 만드는 방법 :PartialView

NewsPagingViewModel 클래스 :

컨트롤러

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

에서

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

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

그리고 이런 식으로 처음 실행 좋은에서 Home/Index

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

에서 : enter image description here

하지만 pagging의 클릭은 다음과 같이 부분보기로 리디렉션 때 enter image description here

그러나 나는 부분보기 새로 고침 원 집/색인.

+0

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이'NewsPagingViewModel' 우리를보기 여기에 전체 자습서를 참조하십시오보기에 PagedList 통합, 그래서 나는 더 나은 제안 할 수있을 것 페이지 매김의 구현. – Yorro

+0

@Yorro : 내 질문에 NewsPagingViewModel 코드를 추가합니다. 감사 – Pouya

답변

1

PagedList 라이브러리를 사용하는 것이 좋습니다. Microsoft가 라이브러리를 공식 튜토리얼 (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 단계

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