ASP.NET CORE 페이징 컨트롤 제작 매뉴얼

프로젝트 리소스 위치를 확인합니다.

프로젝트 리소스의 업데이트 이력을 일자별로 확인합니다.

NLOG를 사용하기 위해 환경설정하기

LogInformation, LogTrace, LogWarning, LogDebug, LogError 총 다섯 개의 logger method 중에서 왜 LogTrace와 LogDebug만 작동하지 않는지 그 이유를 알아보고 해결책을 제시합니다.

NLog 서비스 시작할 때 모듈 가져오는 부분이 NLog.Web 5.3부터 변경되었습니다. NLog관련 최신 패키지를 사용하시는 분들은 모두 해당됩니다.

해당 NLog패키지 : NLog.Web.AspNetCore 5.3.4 (2023.9.24 기준)

변경전: NLogBuilder.ConfigureNLog("nlog.config").GetCurrentClassLogger();

변경후: LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();

변경사유 : warning CS0618: 'NLogBuilder' is obsolete: 'Use LogManager.Setup().LoadConfigurationFromAppSettings() instead. Marked obsolete with NLog.Web 5.3'

NLogBuilder 대신 LogManager를 사용하세요.

또한, NLog는 5.2.4로 NLog.Web.AspNetCore는 5.3.4로 각각 패키지를 업데이트하세요.

NLOG를 Service Lifetime(수명)을 사용해 구성하는 방법에 대해 알아봅니다.

ASP.NET Core에서는 Service Lifetime으로 등록하지 않고는 Service용 class를 사용할 수 없습니다.

NLOG를 예로 들어 서비스로 등록하지 않고 class를 사용할 때 발생하는 예외(exception)에 대해 알아봅니다.

ASP.NET CORE에서 Lifetime(수명)별로 Service를 등록하는 방법에 대해 알아봅니다.

ASP.NET CORE에서 Middleware를 등록하는 방법에 대해 알아봅니다.

ASP.NET CORE MVC로 프로그래밍을 할 때는 제일 처음에 Domain Model부터 작성합니다.

Database와 통신할 수 있도록 DB Table의 Column에 해당하는 C# class의 변수들을 지정합니다.

그 변수들에 Attribute들을 추가하여 나중에 작성할 View에서 활용합니다.

(예 : @Html.DisplayNameFor method에서 사용할 DisplayAttribute에 Name 값 지정)

Database에 Table을 작성합니다.

HR(Human Resources) 관련 List들을 만들기 위해 기본적으로 필요한 작업입니다.

Excel file 데이터를 DB에 넣기 위해 SQL 구문으로 만들어 추출하는 방법을 알아봅니다.

(Excel file을 열기 위한 Office를 설치해서 사용하기 어려운 분들을 위해 SQL 구문 추출이 완료된 파일도 첨부합니다. 하지만 Excel에서 SQL 구문을 뽑아내는 것은 매우 중요하므로 반드시 영상을 따라서 직접 작업해 주시기를 부탁드립니다.)

Dapper를 NuGet Packages로 설치한 후에 Controller에서 호출해 사용할 Service method를 작성합니다.

생성할 method 이름은 GetEmployeesAsync입니다.

HRController는 GetEmployeesAsync method(Service)에서 받아온 값을 EmployeeInfo ViewModel에 담아 Index View로 보냅니다.

또한 이 영상에서 EmployeeInfo ViewModel도 작성합니다.

DataTable을 사용하기 위한 환경을 설정합니다.

DataTable 속성으로 사용되는 pagingType과 lengthMenu(데이터 개수 지정하는 Select box)에 대해 알아봅니다.

추가적으로 _Layout.cshtml에서 RenderSectionAsync method를 사용하는 방법을 배웁니다.

SortNo 컬럼이 있어야 Paging을 할 수 있는 것은 아닙니다.

하지만 Paging이 제대로 동작하는지 바로바로 확인해 보기 위해서는 꼭 필요합니다.

SortNo 컬럼을 추가하는 방법을 배웁니다.

또한, DB Table의 디자인을 변경하는 방법을 알아봅니다.

HR List View UI를 bootstrap의 card 스타일로 만듭니다.

추가적으로 View에서 bootstrap으로 navigation tab을 구성합니다.

데이터 존재여부에 따라 Model.Employees(ViewModel의 list)를 화면에 출력하는 방식을 학습합니다.

View에서 foreach 키워드를 통해 Domain Model 각 변수값(DB 컬럼값)을 불러와서 리스트의 데이터로 화면에 뿌려줍니다.

또한, Domain Model에 SortNo 변수를 추가하고 DB Table의 SortNo 컬럼을 NOT NULL로 지정합니다.

그리고 EmployeeDapperService의 GetEmployeesAsync method에서 사용된 SQL구문에 SortNo 컬럼을 추가한 후에

정렬도 ORDER BY FirstName 에서 ORDER BY SortNo로 변경합니다.

API Controller에서 View로 보낼 Ajax ViewModel 정보를 작성합니다.

View에서 Ajax를 구현하기 위해 DataTable에 두 가지 속성을 추가합니다.

그것은 각각 "ajax"와 "columns"입니다.

이 속성들을 통해 직전 영상에서 Web API로 작성한 method 내용을 불러올 수 있습니다.

Javascript의 DataTable 함수에서 Employees Table의 컬럼값들을 불러올 때는 JSON 방식을 사용합니다.

Ajax List용 View를 만들면서 추가적으로 Layout에 Dropdown Menu 작업도 해 봅니다.

새로 프로젝트를 생성해서 진행하시는 분들은 Layout 뷰의 Drowdown Menu가 정상동작하지 않을 경우에 참고하세요.

페이징 컨트롤을 이해없이 만들면 의미가 없습니다.

동작원리를 모르면 만들 때마다 미리 만들어 놓은 소스코드를 보면서 작성해야 되거든요.

그렇게 하지 않기 위해서는 이해를 해야 하는데 그 첫 관문은 바로 Paging Group을 만드는 것입니다.

Paging Group을 이해하면서 만들 수 있다면 당신은 이미 Paging Control 계에 발을 들여 놓으셨습니다.

개인적으로 제일 중요하다고 생각하는 섹션이 바로 이 섹션입니다.

또한 이 섹션 안에서 Paging Group은 가장 중요한 강의 중 하나입니다.

페이징 컨트롤 안 만들고 리스트에 데이터를 다 출력하면 안될까요?

너무 어려워요. 외워서 만드는 건 재미가 없구요.

웹에서는 어쩔 수 없이 만들어야 하긴 하는데, 그럼 재미있게 만드는 방법 좀 알려주세요.

Paging Group 다음에는 Start Page 만드는 방법을 알아야 페이징 컨트롤 제작에 한 발짝 더 나아갈 수 있습니다.

제가 Paging Group과 Start Page를 제대로 이해한 것이 맞을까요?

확인할 방법은 없나요?

그래서 이 강의가 준비되었습니다.

직접 소스 코딩하면서 테스트를 통해 확인해 보세요.

페이징 컨트롤 만들 때 나오는 변수들 너무 복잡하죠?

나올 때마다 계산을 해줘야 하니 참...

그러나 원리를 알면 변수들을 만날 때마다 두려운 것이 아니라

"까짓 거 내가 계산해 주마!"하는 마음으로 바뀔 수 있습니다.

Paging에 등장하는 변수들이 친숙하다면 이미 당신은 Paging Control 제작에 달인이 될 가능성이 높습니다!

드디어 Paging 작업에 돌입합니다.

지금까지 미뤄두었던 변수들도 만나게 되구요.

이해하려고 노력했던 시간들은 이제 직접 변수들을 사용하면서 빛나게 됩니다.

저는 여러분을 항상 응원하고 있습니다.

즐겁게 코딩하세요.

Dapper ORM을 통해 Database로 부터 데이터를 받아옵니다.

Paging과 관련해 Skip method와 Take method를 작성합니다.

EmployeeInfo ViewModel에 PagingInfo 변수를 추가합니다.

EmployeeDapperService에 GetEmployeeInfoAsync method를 추가합니다.

HttpGetAttribute를 통해 Get방식으로 접근할 URL을 지정합니다.

appsettings.json에 ItemsPerPage(페이지 데이터 개수)와 NumberLinksPerPage(Paging Control 숫자링크 개수)의 값을 지정합니다.

HttpPostAttribute를 통해 Post방식으로 접근할 URL을 지정합니다.

[ValidateAntiForgeryTokenAttribute] ▶ View로부터 교차사이트 위조방지 토큰을 받아서 Post로 접근하는 모든 요청을 검증합니다.

ModelState.AddModelError를 여러 개 사용하는 방법에 대해 다룹니다.(Controller 부분만, View의 코드부분은 [Paging List - Post방식일 때 Test] 강의에서 다룹니다.)

Paging Control을 자동이 아닌 수동으로 제작하기 위해 DataTable 함수의 속성을 삭제 및 추가합니다.

pagingType과 lengthMenu 속성을 삭제하고, paging, searching, info 속성을 추가합니다.

전체 데이터가 없을 경우와 검색해서 일치하는 데이터가 없을 경우를 구분해서 처리합니다.

Razor View에서 화면에 문자열을 나타내는 방법을 알려줍니다.

Paging List의 layout을 구성하기 위한 준비 영상입니다.

총 다섯부분의 Paging List layout을 각각 div로 구분하여 작성합니다.

layout 다섯 부분 중에서, 세번째 위치로 Paging List 테이블을 이동합니다.

Form 태그를 통해 Post 방식으로 서버에 Paging 정보를 보내는 내용을 다룹니다.

검색버튼의 중복클릭을 방지하는 방법을 배웁니다.

Paging List의 layout을 본격적으로 구성합니다.

layout 다섯 부분 중에서, 첫번째로 페이지의 데이터 개수를 지정하는 Select box를 구성합니다.

두번째로 검색 부분을 구성합니다.

네번째로 데이터 정보를 보여주는 부분을 구성합니다.

Paging List에서 가장 중요한 Paging Control 부분을 ul 태그로 구성합니다.

페이징 컨트롤 제작할 때 보통 TagHelper를 사용합니다만,

그 전에 Partial View(부분 뷰)로 한 번 만들어 본다면 TagHelper 작성이 그리 어렵지 않게 느껴질 것입니다.

TagHelper 작성이 어렵다면 일단 Partial View로 만들어 사용하고...

이후에 조금씩 TagHelper 작성을 도전해 보는 것은 어떨까요?

이 영상에서는 Partial View에서 Model 지정하는 방법을 배웁니다.

Paging Control에서 First와 Previous 부분을 구성합니다.

Paging Control에서 Next와 Last 부분을 구성합니다.

Paging Control에서 Numbers 즉 숫자 링크 부분을 구성합니다.

Paging을 논리적으로 이해한 것을 이제 직접 코드로 작성합니다. (PagingGroup, StartPage, EndPage, TotalPage)

Partial View로 Paging Control을 완성한 이 시점에서 Post 방식일 때의 Paging List를 테스트합니다.

View와 관련해서 수정할 사항들이 있으니 관심있게 봐주시면 감사하겠습니다.

ModelState.AddModelError를 여러 개 사용하는 방법에 대해 다룹니다.(Controller 부분은 위의 [Paging List - Action method (2) : Post방식의 List를 가져오기] 강의에서 했었고, 여기서는 View에서 이와 관련해 코드를 작성합니다.)

TagHelper로 페이징 컨트롤을 만들 수 있다면 이미 당신은 페이징 컨트롤을 다 익힌 것입니다.

페이징 컨트롤을 원리로 이해한 것을 TagHelper로 구현하려고 하는 당신.

TagHelper 구현에 자신있다면 당신은 프로그램 개발자로 성공한 것이나 다름없습니다.

이 영상에서는 List View에 ul 태그를 작성하면서 TagHelper와 연결하기 위한 준비를 합니다.

/View/_ViewImports.cshtml에 TagHelper를 사용하기 위한 참조를 추가합니다.

TagHelper로 사용되는 PageLinkTagHelper class를 작성합니다.

View에서 사용한 Url.Action method를 PageLinkTagHelper class에서 사용하는 방법을 배웁니다.

UrlHelper 구성을 위해 instance를 생성해 주는 Factory를 구성합니다.

class 관련해서 instance를 생성하는 방법도 잠깐 언급합니다.

(간단하게 설명하면, class는 붕어빵 제작을 위한 틀이고, instance는 틀에서 만들어낸 붕어빵입니다.)

TagHelper class를 상속받고, 그 내부에 있는 Process method를 상속받는 방법을 학습합니다.

class 상속은 :(콜론 기호) 옆에 부모클래스를 위치시키면 됩니다.

method 상속은 부모클래스에서 virtual로 지정한 method를, 자식클래스에서 override method로 지정해 주면 됩니다.

(override를 단어 그대로 해석하면, 부모클래스에서 지정한 virtual method를 자식클래스 method에서 재정의하기 위해 override 키워드를 사용한다는 의미입니다만, 이해하기에는 좀 복잡합니다. 그냥 간단하게 method 상속은 부모의 virtual 키워드와 자식의 override 키워드를 통해 이루어진다고 생각하시면 됩니다.)

구성한 UrlHelper를 ViewContextAttribute를 통해 사용하는 방법을 학습합니다.

ViewContext와 ControllerContext 같이 Context가 붙은 정보들에 대해 알아봅니다.

ViewContext를 View가 아닌 PageLinkTagHelper class에서 사용하는 방법을 배웁니다.

List View에 작성한 ul 태그의 속성들을 이 class의 변수들과 매칭시키는 작업을 하기 위해 사용되는 변수들을 추가합니다.

List View에 작성한 ul 태그의 속성들을 이 class의 변수들과 매칭시키는 작업을 합니다.

Process method에 First와 Previous 부분을 구성합니다.

Process method에 Next와 Last 부분을 구성합니다.

Next와 Last 부분에 disabled되는 조건을 하나 추가합니다.

(그 조건은 바로 검색 후에 데이터가 0일 경우입니다.)

조건 추가 작업은 전에 진행한 Partial View의 Next와 Last 부분에도 같이 적용합니다.

Process method에 Numbers 즉 숫자 링크 부분을 구성합니다.

Process method의 두 파라미터 즉, TagHelperContext 타입인 context와 TagHelperOutput 타입인 output에 대해 학습합니다.

지금까지는 이해를 돕기 위해 dataNo 즉, SortNo로 설명을 했으나, 실제로는 몇번째 데이터냐 하는 것이죠?

이런 약간의 사고전환은 크게 어렵지 않다고 봅니다.

마지막 데이터가 몇번째 데이터인지 나타내는 LastItem에 대한 내용이 List View에서 "데이터 정보를 보여주는 부분"에 나와있는데요.

그 부분을 화면에 올바르게 출력하도록 하기 위한 코드를 추가합니다.

Paging Control에서 링크 URL은 반드시 searchName 즉, 검색명까지 포함해서 가지고 다녀야 합니다.

[HR List & HR Ajax List]와 HR Paging List는 어떤 차이가 있는가?

또, HR List와 HR Ajax List는 어떤 차이가 있는가?

Paging Control을 수동으로 제작하지 말고 DataTable Javascript Library에서 제공하는 자동 Paging Control 그냥 사용하면 안되나요?라는 질문에 대해 답변합니다.

List의 테이블에서 컬럼별로 오름차순, 내림차순 정렬하는 것과 관련된 의견을 언급합니다.

Paging Control과 관련된 주변이야기를 허심탄회하게 나누어 봅니다.

나는 왜 Paging Control에 대한 강의를 하게 되었나?

---------------------------------------------------------

수강생분들께 드리는 숙제가 있습니다. (제시한 두 개의 과제는 제가 다운로드 파일로도 첨부했습니다.)

이제 수강한 것으로 만족하지 마시고 한 걸음 더 나아가 성장하는 여러분이 되시기를 바랍니다.

과제 1 : Paging Control의 숫자링크부분을 정해진 NumberLinksPerPage안에서 구성하는 방법을 사용하지 말고, 미국식으로 숫자링크들 앞뒤에 ...이 붙는 특이한 형태의 Paging Control을 제작해 보세요.

과제 2 : HR Ajax List에서는 Web API에서 받아온 데이터들을 Ajax 방식으로 View에 출력해 주는데, 이런 방식은 Razor View에서만 사용가능한 것이 아니라 일반적인 HTML 페이지에서도 사용할 수 있습니다. 그러면 wwwroot에 html 폴더를 만들고 그 안에 Ajax.html 이라는 이름으로 HTML 파일을 하나 만드세요.

과제를 작성해서 저의 이메일로 보내주세요.

지금까지 시청해 주셔서 감사합니다.

P.S. 필요한 경우에 제가 커멘트를 달아서 답장메일 보내드립니다.

새로 프로젝트를 생성해서 진행하시는 분들은 프로젝트 루트(root)에 있는 Program.cs 파일이 수정되었으니 확인하시기 바랍니다.