Asp.net Mvc PagedList 페이징 처리 (검색 기능 포함) (1)

현재 저의 버전은 아래와 같습니다.

.framework : 4.5.2
Mvc : 5.2.3.0
Paged : 1.17.0
PagedList.Mvc : 4.5.0

게시판의 하이라이트 페이징 기능...
닷넷프레임워크 Mvc로 작업을 했을경우 페이징을 지원하는 패키지가 있는데..
그중 대표적인 라이브러리 중 하나인 PagedList 를 사용해보겠습니다.
우선 적용할 프로젝트가 있고 페이징을 뺀 기본적인 게시판 기능이 만들어져있다는 가정하에 진행하도록 하겠습니다.
그리고 저는 일반 게시판이 아닌 배너 게시판에 페이징 기능을 추가하면서 작업한걸 스샷 찍은거라 Board가 아니라 Banner라는 테이블에 연결되는 혼돈하지말아주세요.

 

1. PagedList 패키지 설치라이브러리 설치

1) 우선 참조에 가셔서 마우스 오른쪽을 누르면 아래와 같이 [NuGet 패키지 관리] 메뉴가 뜹니다. 눌러줍니다.

 

2) 팩키지 관리자 창이 뜨면 찾아보기에서 'pagedlist' 라고 검색합니다. 검색 결과중 아래와 같은 팩키지를 선택하고 오른쪽 창에서 설치를 눌러줍니다. 저는 안정적인 최신 버전인  4.5.0 버전을 설치하는군요.

 

3) 설치를 시작하면 아래와 같이 2개의 팩키지가 설치 된다고  설치할꺼냐고 다시 한번 확인하는 창이 나오네요.

 

4) 설치가 완료되면 하단에 출력창에 [완료] 라고 뜹니다.

 

 

2. Controller 수정

1) Using 지시문을 컨트롤러 맨 상단에 추가하자.

Using PagedList;

 

2) 리스트를 표출하는 ActionResult 가 Index라고 할때, 아래와 같이 변경해주자.

public ActionResult Index(int? Page)

{

// int? Page : 리스트 페이지가 불러올때 null 을 허용하는 int Page 를 받아온다.
// Page 는 현재 호출되는 페이지 번호가 저장되어있다.

// 우선 데이터를 가져옵니다.
var banners = from b in db.Banners
                    select b;

// 현재 페이지 정보가 없다면 1페이지로 간주하고 아니면 페이지 정보를 넘긴다다.
int PageNo = Page ?? 1;

// PageSize : 한 페이지에 불러올 컨텐츠의 수
int PageSize = 3;

return View(banners.ToPagedList(PageNo, PageSize));

} 

 

3. View 수정

1) 기존에 있던 using 지시문을 날리고.. 아래처럼 변경해주자.

@using PagedList.Mvc;
@model PagedList.IPagedList<프로젝트명.Models.테이블명(모델명)>
// (ex @model PagedList.IPagedList<ProjectName.Models.Banner>

 

2) 페이지 리스트가 나올 자리를 잡고 아래구문을 넣어주자.

@Html.PagedListPager(Model, Page => Url.Action("Index", new {Page}))

 

3) 이제 실행해보자. 아래 그림처럼 나온다.

 

4) 2)에서 적용한 코드가 3)의 그림처럼 나오는데 그쪽 코드를 한번 열어봤습니다. 현재 제가 설정한 상태의 버전에서 출력해주는 코드는 아래와 같습니다.

<div class="pagination-container">
    <ul class="pagination">
        <li class="active"><a>1</a></li>
        <li><a href="/Banner?page=2">2</a></li>
        <li class="PagedList-skipToNext"><a href="/Banner?page=2" rel="next">»</a></li>
    </ul>
</div>

 

5) 혹시 3)번의 그림처럼 나오지않는 분들도 있을텐데.. 저의 샘플은 현재 제이쿼리 css와 부트스트랩이 적용된 상태라 위에 처럼 나옵니다. 혹시 다르게 나오시는분들은 팩키지 설치될때 '/Content/PagedList.css' 라는 파일이 같이 설치되었습니다. 뷰 소스 편하신곳에 아래 처럼 삽입하시면 기본적인 디자인이 들어간 형태의 페이징 화면을 보실수 있습니다. 그게 아니면 4)에 코드를 참고하여 스스로 css를 작성해도 됩니다.

<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />

 

끝.

- 관련글 -

2018/07/11 - [Asp.Net Mvc] - Asp.net Mvc PagedList 페이징 처리 (검색 기능 포함) (2)