26. 모델, 뷰, 컨트롤러

• 2/12/2024
• 3 minutes to read

ASP.NET Core MVC 기본 구성요소 실습 가이드

이 가이드에서는 ASP.NET Core MVC의 핵심 구성요소를 실습을 통해 배웁니다. DotNetNote 프로젝트를 생성하고, 기본 컨트롤러와 뷰를 구현하는 과정을 단계별로 안내합니다.

1. 프로젝트 생성

1. Visual Studio를 열고 새 프로젝트 만들기를 선택합니다.
2. ASP.NET Core 웹 애플리케이션을 선택하고 다음을 클릭합니다.
3. 프로젝트 이름을 DotNetNote로 지정하고, 저장 위치를 선택한 후 생성을 클릭합니다.
4. 인증 사용 안함을 선택하고, **ASP.NET Core 8.0 (또는 최신 버전)**을 선택한 후 MVC 템플릿을 선택하고 생성을 클릭합니다.

2. 컨트롤러 추가

1. 솔루션 탐색기에서 Controllers 폴더를 마우스 오른쪽 버튼으로 클릭하고 추가 > 새 항목을 선택합니다.
2. ASP.NET 탭에서 Controller Class를 선택하고, 파일 이름을 BasicController.cs로 지정한 후 추가를 클릭합니다.

BasicController.cs

namespace DotNetNote.Controllers;

public class BasicController : Controller
{
    public IActionResult Index() => View();
    public IActionResult Unit() => View();
    public IActionResult Quiz(int id, int page)
    {
        ViewBag.Page = page;
        ViewData["Id"] = id;
        return View();
    }
    [HttpPost]
    public IActionResult Quiz(string answer)
    {
        ViewBag.Answer = answer;
        return View();
    }
    public IActionResult Analysis()
    {
        int score = 100;
        return View(score);
    }
    public IActionResult Review() => View();
}

이 컨트롤러는 다양한 액션 메서드를 포함하며, 각각의 뷰 페이지로 연결됩니다.

3. 뷰 추가

각 액션 메서드에 대응하는 뷰를 Views\Basic 폴더에 추가합니다. 먼저 Basic 폴더를 생성한 후, 아래의 뷰 파일들을 추가합니다.

Index.cshtml

@{ 
    Layout = null; 
}

<h1>/Basic/Index 뷰 페이지</h1>
<a href="/Basic/Unit">Unit 페이지로 이동</a>
<a asp-controller="Basic" asp-action="Unit">Unit 페이지로 이동</a>

Unit.cshtml

@{ 
    Layout = null;
}

<h1>/Basic/Unit 뷰 페이지</h1>
<h2>쿼리스트링 값을 전송</h2>
<a href="/Basic/Quiz?Page=1234&Id=1111">퀴즈 페이지로 이동</a>

Quiz.cshtml

@{
    Layout = null; 
}

<h1>Quiz</h1>
넘어온 Id 값: @ViewData["Id"]<br />
넘어온 Page 값: @ViewBag.Page<br />

<form action="/Basic/Quiz" method="post">
    <input type="text" name="answer" />
    <input type="submit" value="전송" />
</form>

@ViewBag.Answer

Analysis.cshtml

이 뷰는 강력한 형식(Strongly Typed)의 뷰 페이지를 구현합니다. 뷰에 전달되는 모델의 타입을 정의하여 사용자에게 보여줄 데이터를 처리합니다.

@model int

<h1>Analysis 페이지</h1>
<p>당신의 점수는 @Model 입니다.</p>

Review.cshtml

@{ 
    Layout = null; 
}

<h1>Review 페이지</h1>

4. 실행 및 테스트

• 프로젝트를 실행합니다.
• 브라우저에서 http://localhost:{포트번호}/Basic/Index로 접속하여 각 링크를 통해 다른 페이지로의 이동이 잘 작동하는지 확인합니다.
• Quiz 페이지에서 값을 입력하고 제출하여 POST 액션의 동작을 확인합니다.
• Analysis 페이지로 이동하여 전달된 모델 데이터(점수)가 잘 표시되는지 확인합니다.

이 실습을 통해 ASP.NET Core MVC의 기본 구성요소인 컨트롤러, 액션 메서드, 뷰 페이지의 작동 방식을 이해하고, 간단한 MVC 애플리케이션을 구현하는 경험을 할 수 있습니다.