[일:] 2025년 05월 12일

무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #4: View와 Controller 구성

1. Controller 와 View 생성

지난 3편에서 Medcare Template의 HTML 구조와 메뉴를 간략하게 살펴보았습니다. 이제 본격적으로 MVC Web Application의 View를 구성하기 위해 다운로드 받은 HTML 소스 파일들을 프로젝트의 View 폴더 내에 각 메뉴에 해당하는 하위 폴더 (Home, About, Department, Doctors, Blog, Contact)를 생성하여 옮겨줍니다. 각 폴더 안에는 해당 메뉴의 내용을 담을 index.cshtml 파일을 생성할 예정입니다. 수동으로 생성하는 것이 아닌 Visual Studio 2022 에서 몇 번의 마우스 클릭과 몇 번의 Typing 만으로 메뉴의 빈 화면들을 구성할 수 있습니다.

Home 메뉴는 추가되어 있으니 About, Department, Doctors, Contact 메뉴를 추가해 보겠습니다. 먼저 About 메뉴부터 추가해 보죠. Capture 된 화면을 차례대로 따라하며 About 메뉴를 추가해 보시기 바랍니다.

먼저 아래 그림과 같이 Solution Explorer 에서 Controller 폴더를 오른쪽 Click 하여 나타나는 Context menu 를 따라가 클릭합니다.

Controller > Add > Controller …

메뉴 클릭시 나타나는 화면에서 MVC Controller – Empty 를 선택하고  Add  버튼을  click 합니다.나타나는 화면에서 MVC Controller – Empty 를 선택하고 하단 Name 칸의 내용을 지우고 ..“AboutController” 를 입력합니다.아래 그림처럼 AboutController 가 추가된 모습을 보실 수 있습니다.AboutController 가 추가되면서 오른쪽에는 생성된 소스가 표시되는데요. 이번에는 View 를 추가해 보도록 하겠습니다. 

생성된 Source를  보면  자동으로 Index()  method가  생성된  것을  확인할  수 있습니다.  사용자의 request를 받아 처리하고, business logic을 수행하며, 다양한 형태의 응답을 생성하는 역할을 하는  Method 를 ActionMethod 라고 하는데 index method 는 해당 Controller  를 실행시킬  때 기본적으로  실행되는  method  라고  생각하시면 됩니다.  http://localhost/About  를 Browser 주소창에  입력하시면  기본적으로  About Controller 의 index method  가 실행됩니다. Source 상에서 Index() 를 오른쪽 click 하여 나타난 Context menu 에서 Add View … 를 클릭합니다.나타난 화면에서 Razor View- Empty 를 선택할 수도 있지만 일단 Razor View 를 click 하겠습니다.나타난 화면에서 Use a layout page Checkbox 를 클릭하여 사용할 Layout 을 선택하겠습니다.Checkbox 를 click 하고 … 버튼을 클릭하면 화면이 나타납니다. 나타난 화면에서 Views 폴더를 선택한 후  Shared 폴더를 선택합니다. 오른쪽 Contents of folder 칸에서 _Layout.cshtml 을 선택하고 OK 버튼을 클릭합니다. _Layout.cshtml 파일은 만들 페이지들이 갖는 공통의  틀이라고  생각하시면 됩니다.아래와 같이 선택한 _Layout.cshtml 파일의 Layout Page 의 경로가 채워졌습니다.  Add 버튼을  click  합니다.그 결과 Views 폴더에 About 폴더가 생성되고 그 내부에 index.cshtml 파일이 생성됩니다. 오른쪽에 생성된 파일의 내용도 함께 표시됩니다.  처음 생성된 Source 에서 “index” 라고 적힌 부분을 “About” 로 수정해 줍니다.

Layout 이 화면에서 설정한 Layout 페이지의 경로가 보입니다. _ViewStart.cshtml 에 기본 Layout 을 설정하는 부분이 있어 이 코드는 추가할 필요없지만 필요에 따라 해당페이지에서 별도의 Layout 을 설정하려한다면 아래 코드와 같이 추가해서 설정해 줄 수 있습니다.이렇게 About menu 를 추가해 보았습니다.

위 과정을 반복하여 Department, Docters, Contact 메뉴를 추가해 보시기 바랍니다.

추가한 결과는 아래와 같습니다.

5개의 Controller 와 Views Folder 에 5개의 View 가 추가된 모습을 보실 수 있습니다.

추가를 마쳤으니 어떻게 보이는지 실행을 시켜보겠습니다.

두 화살표 버튼 모두 클릭하면 실행이 되지만 왼쪽 버튼은 debugging 을 수행하는 버튼으로  왼쪽 버튼을 클릭합니다.

아래와 같이 실행 화면이 나타납니다. 아직 Menu 를 표시하는 Source 를 추가하지 않았기 때문에 수동으로 주소를 입력해서 이동해 보겠습니다.

주소창에 About 를 추가한 후 Enter 를 눌러보십시오. Department, Docters, Contact 를 About 대신 입력하여 테스트 해보시기 바랍니다.

마무리

이번 4편에서는 다운로드 받은 Medcare 템플릿의 HTML 소스를 MVC 웹 애플리케이션의 기본적인 View와 Controller 구조로 변환하기 위해 Menu 를 Controller 와 View 로 생성하는 과정을 살펴보았습니다. 다음은 Header 와 Footer 를 추출하면서 Layout 을 구성하는 방법을 살펴보겠습니다.

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\