MVC에서 GET으로 화면을 보여 주고 POST로 값을 받기
이번 예제에서는 DotNetNote 프로젝트에 SignupController를 만들고, /signup 경로에서 회원가입 화면을 띄운 뒤, 사용자가 입력한 아이디, 이메일, 비밀번호 값을 POST로 전달받아 간단히 출력해 봅니다.
1. SignupController 만들기
먼저 Controllers 폴더에 SignupController.cs 파일을 추가합니다.
경로:
DotNetNote/Controllers/SignupController.cs
코드:
using Microsoft.AspNetCore.Mvc;
namespace DotNetNote.Controllers;
public class SignupController : Controller
{
[HttpGet("/signup")]
public IActionResult Index()
{
return View();
}
[HttpPost("/signup")]
public IActionResult Index(string username, string email, string password)
{
return Content(
$"Username: {username}, Email: {email}, Password: {password}");
}
}
위 코드에서 GET 액션 메서드는 /signup 주소로 접속했을 때 회원가입 입력 화면을 보여 줍니다.
POST 액션 메서드는 사용자가 폼을 제출했을 때 username, email, password 값을 전달받아 문자열로 출력합니다.
여기서 한 가지 중요한 점은 폼 요소의 name 속성 이름과 액션 메서드의 매개 변수 이름이 서로 같아야 한다는 것입니다.
예를 들어 name="username"으로 보낸 값은 string username으로 들어갑니다.
이렇게 요청으로 넘어온 값을 액션 메서드의 매개 변수에 자동으로 채워 주는 기능을 모델 바인딩(Model Binding)이라고 합니다. 처음에는 어렵게 볼 필요 없이, "폼에서 보낸 값을 메서드 변수에 자동으로 넣어 주는 기능" 정도로 이해하면 됩니다.
2. 회원가입 뷰 페이지 만들기
다음으로 Views/Signup 폴더를 만들고 Index.cshtml 파일을 추가합니다.
경로:
DotNetNote/Views/Signup/Index.cshtml
코드:
@{
ViewData["Title"] = "회원가입";
}
<h1>회원가입</h1>
<form method="post" action="/signup">
<p>
<label for="username">아이디</label><br />
<input type="text" id="username" name="username" />
</p>
<p>
<label for="email">이메일</label><br />
<input type="email" id="email" name="email" />
</p>
<p>
<label for="password">비밀번호</label><br />
<input type="password" id="password" name="password" />
</p>
<p>
<button type="submit">가입하기</button>
</p>
</form>
이 뷰 페이지는 단순한 HTML 폼으로 되어 있습니다.
사용자가 값을 입력하고 가입하기 버튼을 누르면 POST /signup 요청이 전송되고, 컨트롤러의 POST 액션 메서드가 실행됩니다.
3. 실행 순서
이 예제는 아래 순서로 동작합니다.
먼저 브라우저에서 /signup 경로로 접속합니다.
그러면 SignupController의 GET 액션 메서드가 실행되고 Views/Signup/Index.cshtml 파일이 화면에 출력됩니다.
사용자가 아이디, 이메일, 비밀번호를 입력한 뒤 폼을 제출하면 POST /signup 요청이 발생합니다.
그러면 같은 컨트롤러의 POST 액션 메서드가 실행되고, 전달된 값이 username, email, password 매개 변수로 들어옵니다.
현재 예제에서는 전달받은 값을 Content()로 그대로 출력해서, 값이 잘 넘어오는지 확인합니다.
4. 실행 결과 확인하기
프로젝트를 실행한 뒤 브라우저 주소창에 다음 주소를 입력합니다.
https://localhost:포트번호/signup
회원가입 화면이 표시되면 다음과 같이 값을 입력해 봅니다.
- 아이디: RedPlus
- 이메일: redplus@example.com
- 비밀번호: 1234
그 다음 가입하기 버튼을 클릭하면 브라우저에 아래와 비슷한 결과가 출력됩니다.
Username: RedPlus, Email: redplus@example.com, Password: 1234
이 결과가 보이면, 입력한 값이 폼에서 서버로 정상 전달된 것입니다.
5. 마무리
이번 예제에서는 SignupController와 회원가입 뷰 페이지를 만들고, 사용자가 입력한 값을 POST 방식으로 전달받아 간단히 출력해 보았습니다.
이때 폼의 name 속성과 액션 메서드의 매개 변수 이름을 서로 맞춰 주어야 값이 정상적으로 전달됩니다.