폼 유효성 검사와 모델 바인딩
ASP.NET Core는 유효한 데이터 수신 및 처리를 위한 강력한 메커니즘을 제공합니다. 이 문서에서는 사용자로부터 폼 데이터를 수집하고 처리하는 방법에 대해 단계별로 탐구합니다. 특히, System.ComponentModel.Annotations.dll을 활용한 유효성 검사(Validation)에 초점을 맞춥니다. 이는 필요한 값만을 안전하게 받기 위한 필수 조치입니다.
// 유효성 검사(Validation): 필요한 값만 받을 수 있도록 처리하는 조치
폼 유효성 검사 (Form Validation)
웹 어플리케이션에서 사용자 입력은 중요한 부분입니다. 이때, 입력 데이터가 애플리케이션 설계 의도와 일치하는지 판단하는 과정이 필요합니다. 이 과정을 '유효성 검사' 또는 'Validation'이라 합니다. ASP.NET MVC에서는 HTML, 자바스크립트, 태그 헬퍼(Tag Helper) 등 다양한 방법으로 유효성 검사를 수행할 수 있습니다. 이는 System.ComponentModel.DataAnnotations 네임스페이스를 통해 모델 수준에서 지원되며, 클라이언트 측에서는 JavaScript와 jQuery를 사용합니다.
사용자 입력 유효성 검사의 중요성
잘못된 데이터 입력은 애플리케이션에 다양한 문제를 일으킬 수 있습니다. 유효성 검사를 통해 잘못된 데이터의 사전 검사와 악의적 공격 예방이 가능합니다. 예를 들어, SQL 인젝션 및 사용자 정보 탈취와 같은 위협으로부터 애플리케이션을 보호할 수 있습니다.
유효성 검사 유형
- 클라이언트 측 유효성 검사
- 서버 측 유효성 검사
모델 메타데이터와 애너테이션
모델 클래스에 대한 제약 조건은 System.ComponentModel.DataAnnotations 네임스페이스 내의 애너테이션을 통해 지정할 수 있습니다. 이러한 메타데이터 또는 애너테이션은 모델의 유효성 검사 규칙을 정의합니다.
주요 모델 애너테이션
[Required]: 필수 입력 요소 지정[StringLength]: 문자열 길이 제한[Display]: 레이블에 표시할 텍스트 지정[DataType]: 데이터 유형(비밀번호, 이메일 등) 지정[MinLength]/[MaxLength]: 문자열의 최소/최대 길이 지정[RegularExpression]: 정규식을 통한 제약 조건 지정[Range]: 값의 범위 지정[Compare]: 값 비교 (주로 암호 확인에 사용)[BindNever]: 바인딩 제외 지정
ASP.NET Core는 이러한 메타 데이터 특성을 통해 클라이언트 및 서버 측 유효성 검사를 지원합니다.
Spring Boot의 유효성 검사 애너테이션
Spring Boot에서는 <artifactId>spring-boot-starter-validation</artifactId>을 통해 유효성 검사를 지원합니다. @NotNull, @NotEmpty, @NotBlank, @Size, @Pattern, @Max, @Min 등의 애너테이션을 사용하여 모델 유효성을 검사합니다. 컨트롤러에서는 @Valid 애너테이션을 통해 모델 검증을 수행합니다.
강력한 형식의 뷰 (Strongly Typed View)
특정 모델을 기반으로 하는 뷰를 '강력한 형식의 뷰'라고 합니다. 이는 @model 지시어를 사용하여 지정되며, 모델 기반의 헬퍼 메서드나 태그 헬퍼를 이용하여 데이터를 처리합니다. 예를 들어, Html.TextBoxFor(m => m.Name)은 모델의 Name 속성 값을 출력합니다.
모델 바인딩 (Model Binding)
모델 바인딩은 HTTP 요청 데이터를 .NET 객체와 매핑하여 액션 메서드에 전달하는 과정입니다. 이는 폼 데이터, 라우트 변수, 쿼리 스트링 등을 포함합니다. ModelState.IsValid 속성을 통해 데이터의 유효성 검사 결과를 확인할 수 있습니다. 이 속성은 모델에 정의된 유효성 검사 규칙을 기반으로 합니다.
ModelState 관련 추가 기능
ModelState.GetValidationState: 특정 유효성 검사 상태 조회ModelState.AddModelError(): 에러 메시지 지정
5. [실습] 폼 유효성 검사와 모델 바인딩
5.1. 소개
ASP.NET Core MVC와 Spring Boot MVC에서 제공하는 여러 가지 폼에 대한 유효성 검사를 처리하는 방식과 모델 바인딩, ASP.NET Core 태그 헬퍼 사용법을 다뤄 보겠습니다.
5.2. 따라하기 1: 폼 유효성 검사 테스트용 메인 페이지 작성
(1) MVC 학습용 데모 웹 프로젝트인 DotNetNote 웹 프로젝트를 실행합니다. Controllers 폴더에 FormValidationDemoController.cs라는 이름으로 MVC 컨트롤러 클래스를 추가합니다. 다음과 같이 기본값으로 Index 액션 메서드가 함께 만들어진다.
코드: /Controllers/FormValidationDemoController.cs
using Microsoft.AspNetCore.Mvc;
namespace DotNetNote.Controllers
{
public class FormValidationDemoController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
최종 완성된 미리 보기 소스 전체는 다음과 같습니다.
코드: DotNetNote\Controllers\FormValidationDemoController.cs
namespace DotNetNote.Controllers;
public class FormValidationDemoController : Controller
{
//[1] 따라하기 1: 폼 유효성 검사 테스트용 메인 페이지 작성
#region Main Page
public IActionResult Index() => View();
#endregion
//[2] 따라하기 2: 순수 HTML과 JavaScript를 사용한 유효성 검사
#region HTML
public IActionResult Html() => View();
// [HttpPost]
public IActionResult HtmlProcess(string txtName, string txtContent)
{
//var r = $"이름: {txtName}, 내용: {txtContent}";
ViewBag.ResultString =
$"이름: {txtName}, 내용: {Request.Form["txtContent"]}";
return View();
}
#endregion
//[3] 따라하기 3: MVC 헬퍼 메서드 사용하기
#region Helper Method
[HttpGet]
public IActionResult HelperMethod() => View();
[HttpPost]
public IActionResult HelperMethod(string txtName, string txtContent)
{
ViewBag.ResultString = $"이름: {txtName}, 내용: {txtContent}";
return View();
}
#endregion
//[4] 따라하기 4: 강력한 형식의 뷰와 모델 바인딩 사용하기
#region Strongly Type View + Model Binding
public IActionResult StronglyTypeView() => View();
[HttpPost]
public IActionResult StronglyTypeView(MaximModel model) => model is null ? throw new ArgumentNullException(nameof(model)) : (IActionResult)View();
#endregion
//[5] 따라하기 5: 모델 기반 유효성 검사 및 서버측 유효성 검사
#region Model Validation + Server Validation
public IActionResult ModelValidation() => View();
[HttpPost]
public IActionResult ModelValidation(MaximModel model)
{
if (model is null)
{
throw new ArgumentNullException(nameof(model));
}
// 직접 유효성 검사
if (string.IsNullOrEmpty(model.Name))
{
ModelState.AddModelError("Name", "이름을 입력하세요.");
}
if (string.IsNullOrEmpty(model.Content))
{
ModelState.AddModelError("Content", "내용을 입력하세요.");
}
if (!ModelState.IsValid)
{
// @Html.ValidationSummary(true)일 때는 아래 에러만 표시
ModelState.AddModelError("", "모든 에러");
}
// 넘겨온 모델에 대한 유효성 검사
if (ModelState.IsValid)
{
return View("Completed");
}
return View();
}
public IActionResult Completed() => View();
#endregion
//[6] 따라하기 6: 클라이언트측 유효성 검사
#region Client Validation
public IActionResult ClientValidation() => View();
[HttpPost]
public IActionResult ClientValidation(MaximModel model)
{
// 넘겨온 모델에 대한 유효성 검사
if (ModelState.IsValid)
{
return View("Completed");
}
return View();
}
#endregion
//[7] 따라하기 7: 태그 헬퍼 사용하기
#region TagHelper
public IActionResult TagHelperValidation() => View();
[HttpPost]
public IActionResult TagHelperValidation(MaximModel model)
{
// 넘겨온 모델에 대한 유효성 검사
if (ModelState.IsValid)
{
return View("Completed");
}
return View();
}
#endregion
//[8] 따라하기 8: 태그 헬퍼 사용 폼 유효성 검사 진행하기
#region TagHelper
[HttpGet]
public IActionResult ApplicationForm()
{
return View();
}
[HttpPost]
public IActionResult ApplicationForm(Applicant applicant)
{
// 넘겨온 모델에 대한 유효성 검사
if (ModelState.IsValid)
{
// 유효성 검사를 통과하면 DB에 관련 정보 저장
return View("Completed");
}
return View();
}
#endregion
#region MultiSelectOption Demo
[HttpGet]
public IActionResult MultiSelectOption() => View();
[HttpPost]
public IActionResult MultiSelectOption(string[] questions, string[] answers) => View();
#endregion
}
(2) FormValidationDemo 컨트롤러의 Index 액션에 해당하는 Index 뷰 페이지를 만들겠습니다. Views 폴더에 FormValidationDemo 폴더를 생성하고 이곳에 Index.cshtml 파일로 MVC 뷰 페이지를 작성합니다.
이번 강의 데모의 모든 뷰 페이지는 레이아웃을 사용하지 않습니다.
코드: /Views/FormValidationDemo/Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>폼 유효성 검사</title>
</head>
<body>
<h1>폼 유효성 검사</h1>
<ul>
<li><a href="#">메인</a></li>
<li><a href="/FormValidationDemo/Html">HTML 폼 구성</a></li>
<li><a href="~/FormValidationDemo/HelperMethod">헬퍼 메서드 사용</a></li>
<li><a href="~/FormValidationDemo/StronglyTypeView">강력한 형식의 뷰</a></li>
<li><a asp-controller="FormValidationDemo"
asp-action="ModelValidation">모델 기반 서버 측 유효성 검사</a></li>
<li><a asp-controller="FormValidationDemo"
asp-action="ClientValidation">클라이언트 측 유효성 검사</a></li>
<li><a asp-controller="FormValidationDemo"
asp-action="TagHelperValidation" >태그 헬퍼</a></li>
</ul>
</body>
</html>
Index 뷰 페이지 구성을 보겠습니다. 링크를 구성할 때 메인 링크는 # 기호로 현재 페이지를 표시하였습니다. 다음 세 링크 생성 시 href 속성에 / 기호 또는 ~/ 기호를 사용하여 프로젝트 루트부터 시작되는 경로를 표시했습니다. 참고로, ~/ 형식으로 프로젝트 루트부터 시작하는 경로를 생성하는 방식은 ASP.NET Core 고유의 기능입니다.
나머지 링크 세 개는 ASP.NET Core MVC에서 제공하는 asp-로 시작하는 태그 헬퍼를 사용하여 앞으로 제작할 특정 컨트롤러의 특정 액션으로 이동하는 링크를 만들어 보았습니다. asp-controller로 이동할 컨트롤러를 지정하고 asp-action에 액션 메서드의 이름을 지정하여 링크를 만듭니다.
(3) 웹 프로젝트를 실행하고 /FormValidationDemo/Index 경로를 요청하여 Index 뷰 페이지를 실행하면 다음과 같이 앞으로 실습을 통해 만들어 볼 페이지에 대한 링크를 제공합니다.
그림: 폼 유효성 검사 관련 페이지 링크 제공
따라하기 2: 순수 HTML과 JavaScript를 사용한 유효성 검사
이 튜토리얼에서는 추가 프레임워크 없이 순수 HTML과 JavaScript만을 사용하여 폼 유효성 검사를 수행하는 방법을 소개합니다.
1단계: FormValidationDemo 컨트롤러 구성
FormValidationDemo 컨트롤러에는 두 개의 액션 메서드, Html과 HtmlProcess,가 포함되어 있습니다. Html 액션 메서드는 순수 HTML을 사용해 폼을 구성하는 것을 목표로 하며, HtmlProcess 액션 메서드는 Html 뷰 페이지로부터 전송된 데이터를 받아 출력하는 목적으로 사용됩니다. 이번 실습에서는 각각 별도로 페이지를 구성하여 처음 접하는 분들도 쉽게 따라할 수 있도록 설계하였습니다.
코드: /Controllers/FormValidationDemoController.cs
using DotNetNote.Models;
using Microsoft.AspNetCore.Mvc;
namespace DotNetNote.Controllers
{
public class FormValidationDemoController : Controller
{
// [1] 폼 유효성 검사 테스트용 메인 페이지 작성
public IActionResult Index()
{
return View();
}
// [2] 순수 HTML과 JavaScript를 사용한 유효성 검사
public IActionResult Html()
{
return View();
}
public IActionResult HtmlProcess(string txtName, string txtContent)
{
ViewBag.ResultString = $"이름: {txtName}, 내용: {Request.Form["txtContent"]}";
return View();
}
}
}
Html() 액션 메서드는 기본적으로 [HttpGet] 특성을 사용하며, HtmlProcess() 액션 메서드는 [HttpPost] 특성을 사용합니다. HtmlProcess()에서는 C# 6.0에서 소개된 문자열 보간 기능을 사용해 데이터를 뷰 페이지로 전송하며, 매개변수 이름과 뷰 페이지의 입력 필드 이름이 일치해야 함을 기억해야 합니다.
2단계: Html.cshtml 뷰 페이지의 유효성 검사 개선
Html 액션에 해당하는 Html.cshtml 뷰 페이지는 순수 HTML로 구성되어 있으며, 기본적인 JavaScript를 사용한 유효성 검사 코드를 포함하고 있습니다. 이 초기 구현은 사용자가 입력 버튼을 클릭할 때 onsubmit 이벤트 처리기를 통해 checkForm 함수를 호출함으로써, 이름과 내용 필드의 유효성을 검사합니다. 이는 가장 기본적이고 오래된 유효성 검사 방식 중 하나입니다.
초기 코드는 다음과 같습니다.
코드: /Views/FormValidationDemo/Html.cshtml
<!DOCTYPE html>
<html>
<head>
<title>순수 HTML</title>
<script>
function checkForm() {
var name = document.getElementById("txtName");
var content = document.getElementById("txtContent");
if (name.value.length < 1 || content.value.length < 1) {
alert("이름과 내용을 입력해 주세요.");
name.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h2>HTML 태그로 폼 구성</h2>
<form action="/FormValidationDemo/HtmlProcess" method="post" onsubmit="return checkForm();">
이름: <input type="text" name="txtName" id="txtName" /><br />
내용: <input type="text" name="txtContent" id="txtContent" /><br />
<input type="submit" value="입력" />
</form>
</body>
</html>
이 코드를 현대적이고 자바스크립트스러운 방식으로 개선하기 위해, 다음과 같은 접근 방식을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<title>순수 HTML</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
var nameInput = document.getElementById('txtName');
var contentInput = document.getElementById('txtContent');
form.addEventListener('submit', function(event) {
if (nameInput.value.trim() === '' || contentInput.value.trim() === '') {
alert('이름과 내용을 입력해 주세요.');
nameInput.focus();
event.preventDefault();
}
});
});
</script>
</head>
<body>
<h2>HTML 태그로 폼 구성</h2>
<form action="/FormValidationDemo/HtmlProcess" method="post">
이름: <input type="text" name="txtName" id="txtName" /><br />
내용: <input type="text" name="txtContent" id="txtContent" /><br />
<input type="submit" value="입력" />
</form>
</body>
</html>
개선된 코드는 몇 가지 핵심 변경사항을 포함합니다.
- DOM 로드 이벤트 리스너:
DOMContentLoaded를 사용해 DOM 요소가 완전히 로드된 후 스크립트가 실행되도록 합니다. 이는 안정적인 DOM 조작을 보장합니다. - 쿼리 선택자와 이벤트 리스너:
document.querySelector와addEventListener를 사용해 폼 제출 이벤트를 처리합니다. 이 방식은 코드를 더 모듈화하고, HTML과 JavaScript의 분리를 장려합니다. - 유효성 검사와
preventDefault메서드: 유효성 검사 실패 시event.preventDefault()를 호출해 폼의 기본 제출 동작을 방지합니다. 이는 사용자에게 유효하지 않은 입력을 수정할 기회를 제공합니다. trim메서드 사용: 사용자 입력의 앞뒤 공백을 제거해, 공백만 있는 입력을 방지합니다.
3단계: HtmlProcess.cshtml 뷰 페이지 구성
HtmlProcess.cshtml 뷰 페이지는 매우 간단하게 구성되어 있으며, 주로 ViewBag에 담긴 데이터를 출력하는 용도로 사용됩니다.
코드: /Views/FormValidationDemo/HtmlProcess
.cshtml
넘어온 값: @ViewBag.ResultString
실행 결과
Html뷰 페이지(/FormValidationDemo/Html)를 실행하면, 사용자로부터 이름과 내용을 입력 받는 간단한 형태의 폼이 표시됩니다. 이때, UI를 더 꾸미고 싶다면 부트스트랩 등을 사용할 수 있으나, 본 예제는 기본 HTML 태그만을 사용하여 진행합니다.- 입력 항목을 비워두고 <입력> 버튼을 클릭하면, 경고 대화상자가 표시되며 폼의 유효성 검사가 수행됩니다.
- 모든 항목을 채우고 <입력> 버튼을 클릭하면,
HtmlProcess액션을 통해 전송된 내용이 다음과 같이 출력되는 전형적인 폼 처리 형태를 확인할 수 있습니다.
따라하기 3: MVC 헬퍼 메서드를 활용한 폼 구성
ASP.NET Core MVC에서는 순수 HTML 대신 편리한 헬퍼 메서드를 제공하여 폼 구성과 데이터 처리를 보다 쉽게 할 수 있습니다. 이번 장에서는 FormValidationDemo 컨트롤러 내에 HelperMethod 액션 메서드를 추가하여 MVC 헬퍼 메서드의 사용 방법을 살펴보겠습니다.
1. 액션 메서드 구현
먼저, FormValidationDemoController에 폼을 렌더링 하기 위한 HelperMethod 액션 메서드를 [HttpGet] 특성과 함께 추가합니다. 이어서, 폼 데이터를 처리하기 위해 같은 이름의 액션 메서드에 [HttpPost] 특성을 적용하고, 폼에서 전송된 데이터를 받기 위해 txtName과 txtContent라는 이름의 매개변수를 추가합니다.
코드: /Controllers/FormValidationDemoController.cs의 HelperMethod 액션 메서드
#region Helper Method
[HttpGet]
public IActionResult HelperMethod()
{
return View();
}
[HttpPost]
public IActionResult HelperMethod(string txtName, string txtContent)
{
ViewBag.ResultString = $"이름: {txtName}, 내용: {txtContent}";
return View();
}
#endregion
이 구조는 폼을 렌더링 하고 사용자의 입력을 처리하는 두 가지 작업을 동일한 뷰에서 수행할 수 있게 해 줍니다. [HttpGet]으로 렌더링된 폼에 데이터를 입력하고 제출하면, [HttpPost] 특성이 적용된 메서드가 해당 데이터를 처리하게 됩니다. 처리 결과는 ViewBag을 통해 뷰에 전달됩니다.
2. 뷰 페이지 구성
다음으로, Views/FormValidationDemo 폴더 내에 HelperMethod.cshtml 뷰 페이지를 생성합니다. 이 페이지에서는 HTML의 <form> 태그 대신 Html.BeginForm() 메서드를 사용하여 폼을 구성합니다. Html.BeginForm()은 다양한 오버로드를 제공하여 폼의 액션, 컨트롤러, 라우팅 변수, 전송 방식, 추가 속성 등을 유연하게 지정할 수 있습니다.
코드: /Views/FormValidationDemo/HelperMethod.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>헬퍼 메서드로 폼 구성</title>
<script>
function CheckForm() {
var name = document.getElementById("txtName");
var content = document.getElementById("txtContent");
if (name.value.length < 1 || content.value.length < 1) {
window.alert("이름과 내용을 입력하세요.");
name.focus();
name.select();
return false;
}
return true;
}
</script>
</head>
<body>
<h2>헬퍼 메서드로 폼 구성</h2>
@using (Html.BeginForm("HelperMethod", "FormValidationDemo", FormMethod.Post, new { onsubmit = "return CheckForm();" }))
{
<label>이름: </label> @Html.TextBox("txtName")<br />
<label>내용: </label> @Html.TextBox("txtContent")<br />
<input type="submit" value="입력" />
}
@if (ViewBag.ResultString != null)
{
<div>@ViewBag.ResultString</div>
}
</body>
</html>
이 코드 예제에서 Html.BeginForm()은 폼을 시작하고, @Html.TextBox()는 사용자 입력을 위한 텍스트 박스를 생성합니다. 또한, JavaScript를 사용하여 폼 제출 전에 입력값을 검증하는 간단한 클라이언트 사이드 검증 로직을 추가했습니다.
3. 실행과 확인
프로젝트를 실행하고 /FormValidationDemo/HelperMethod 경로로 접근하면, 구성한 뷰 페이지가 브라우저에 표시됩니다. 이 페이지에서는 MVC 헬퍼 메서드를 사용하여 구성된 폼을 확인할 수 있습니다. 사용자가 입력 후 폼을 제출하면, 입력된 데이터는 [HttpPost] 액션 메서드를 통해 처리되고, 결과가 뷰에 표시됩니다.
4. 개발자 도구로 확인
뷰 페이지가 제대로 작동하는지 확인하기 위해 웹 브라우저에서 F12 개발자 도구를 열고 HTML 소스를 확인할 수 있습니다. 이를 통해 Html.BeginForm() 메서드가 실제 HTML <form> 태그와 <input> 태그로 변환되어 사용자의 입력을 처리하는 과정을 직접 볼 수 있습니다.
따라하기 4: 강력한 형식의 뷰와 모델 바인딩 활용하기
이번 섹션에서는 폼 데이터를 모델 기반으로 묶어서 전송하는 모델 바인딩 방법을 소개합니다. 모델 바인딩은 폼 데이터를 서버로 전송할 때 모델 객체에 자동으로 매핑되는 기능을 제공하여 개발의 편리성을 높여줍니다.
1. 모델 클래스 정의
Models 폴더에 MaximModel.cs 파일을 생성하고, 다음과 같이 세 개의 필드를 정의합니다. 이때, [Display] 어트리뷰트를 사용하여 뷰 페이지에서 보여질 필드의 이름을 재정의할 수 있습니다. [Display] 어트리뷰트 사용을 위해 System.ComponentModel.DataAnnotations 네임스페이스를 포함시키는 것을 잊지 마세요.
// /Models/MaximModel.cs
using System.ComponentModel.DataAnnotations;
namespace DotNetNote.Models
{
public class MaximModel
{
public int Id { get; set; }
[Display(Name = "이름")]
public string Name { get; set; }
[Display(Name = "내용: ")]
public string Content { get; set; }
}
}
2. 강력한 형식의 뷰 생성
MVC 뷰 페이지를 특정 모델 기반으로 구성하려면, 해당 뷰 페이지 상단에 @model 키워드를 사용하여 모델 클래스를 지정합니다. 이를 통해 생성되는 강력한 형식의 뷰(Strongly Typed View)는 해당 타입에 대한 인텔리센스 지원을 받을 수 있어 모델 기반 페이지 구성이 보다 용이해집니다.
컨트롤러에는 Get과 Post용 액션 메서드를 다음과 같이 구성합니다. Post 액션 메서드는 MaximModel 클래스 타입의 매개변수를 받도록 설정하여 모델 바인딩을 활용합니다.
코드: /Controllers/FormValidationDemoController.cs
#region Strongly Type View + Model Binding
public IActionResult StronglyTypeView() => View();
[HttpPost]
public IActionResult StronglyTypeView(MaximModel model)
{
return model is null ? throw new ArgumentNullException(nameof(model)) : (IActionResult)View();
}
#endregion
이렇게 모델 클래스를 매개변수로 받는 방식은 각각의 매개변수를 별도로 받는 방식보다 훨씬 편리하며, MVC가 모델 클래스의 속성과 매칭되는 폼 데이터를 자동으로 바인딩해주는 모델 바인딩 기능을 활용합니다.
3. 강력한 형식의 뷰 페이지 구성
/Views/FormValidationDemo 폴더 내에 StronglyTypeView.cshtml 파일을 생성하고, @model 키워드를 사용해 MaximModel 타입을 지정합니다. 이를 통해 강력한 형식의 뷰 페이지를 구성할 수 있습니다.
코드: /Views/FormValidationDemo/StronglyTypeView.cshtml
@model DotNetNote.Models.MaximModel
<!DOCTYPE html>
<html>
<head>
<title>강력한 형식의 뷰</title>
</head>
<body>
<h2>강력한 형식의 뷰와 모델 바인딩 사용하기</h2>
@using (Html.BeginForm())
{
@Html.LabelFor(n => n.Name)
<text>: </text>
@Html.TextBoxFor(n => n.Name)<br />
@Html.LabelFor(c => c.Content)
<text>: </text>
@Html.TextBoxFor(c => c.Content)<br />
<input type="submit" value="전송" />
}
</body>
</html>
이 뷰 페이지에서는 Html.LabelFor()와 Html.TextBoxFor() 헬퍼 메서드를 사용하여 모델 속성에 기반한 레이블과 텍스트박스를 생성합니다.
4. 실행 및 확인
StronglyTypeView.cshtml 페이지를 실행하면, 모델 기반으로 구성된 Name과 Content 필드가 포함된 폼을 확인할 수 있습니다. 이 과정에서 Html.TextBoxFor() 등의 헬퍼 메서드를 통해 추가되는 data-val-required와 같은 데이터 속성은 클라이언트 측 유효성 검사에 유용하게 사용됩니다. jQuery 유효성 검사 플러그인과 같은 도구를 사용할 때 이러한 속성들이 특히 유용합니다.
따라하기 5: 모델 기반 유효성 검사 및 서버 측 유효성 검사
이번 실습에서는 모델 기반 서버 측 유효성 검사를 진행합니다. 유효성 검사는 사용자 입력이 모델의 요구 사항을 충족하는지 서버에서 확인하는 과정입니다.
1. 모델 클래스에 유효성 검사 특성 추가
Models 폴더 내 MaximModel 클래스에 유효성 검사를 위한 다양한 데이터 어노테이션을 추가합니다. 이 어노테이션들은 입력 필드에 적용되어 사용자가 올바른 형식의 데이터를 입력하도록 요구합니다.
// /Models/MaximModel.cs
using System.ComponentModel.DataAnnotations;
namespace DotNetNote.Models
{
public class MaximModel
{
public int Id { get; set; }
[Display(Name = "이름")]
[Required(ErrorMessage = "이름을 입력하세요.")]
[StringLength(25, MinimumLength = 1, ErrorMessage = "이름은 1자 이상 25자 이하입니다.")]
public string Name { get; set; }
[Display(Name = "내용")]
[Required(ErrorMessage = "내용을 입력하세요.")]
[StringLength(255, MinimumLength = 1, ErrorMessage = "내용은 1자 이상 255자 이하입니다.")]
public string Content { get; set; }
}
}
유효성 검사를 위한 주요 어노테이션 특성
모델 클래스의 속성에 적용 가능한 다양한 데이터 어노테이션(Data Annotations)을 사용하여 유효성 검사를 강화할 수 있습니다. 각 어노테이션은 특정 유효성 검사 규칙을 정의하여, 모델의 데이터가 올바른 형식과 조건을 충족하는지 확인하는 데 사용됩니다.
- Required: 필드가 반드시 필요함을 나타냅니다. 이 특성이 적용된 필드는 빈 값일 수 없습니다.
- StringLength: 문자열의 최소 및 최대 길이를 지정합니다. 이를 통해 입력 값의 길이를 제한할 수 있습니다.
- Range: 숫자 필드의 최솟값과 최댓값을 지정합니다. 이 특성을 사용하여 특정 범위 내의 값만 허용할 수 있습니다.
- RegularExpression: 특정 정규 표현식 패턴에 맞는 데이터만 허용하도록 합니다. 이를 통해 입력 형식을 더욱 세밀하게 제어할 수 있습니다.
- DataType: 데이터의 특정 유형(예: 이메일, 전화번호, URL 등)을 지정합니다. 이 특성은 입력 데이터의 형식을 명확히 하기 위해 사용됩니다.
- Phone: 전화번호 형식의 데이터를 나타냅니다.
- Email: 이메일 형식의 데이터를 나타냅니다.
- Url: URL 형식의 데이터를 나타냅니다.
- BindNever: 모델 바인딩 시 특정 속성을 무시하도록 지정합니다. 이 특성이 적용된 필드는 모델 바인딩 과정에서 제외됩니다.
2. 서버 측 유효성 검사
유효성 검사 로직을 포함하는 컨트롤러의 액션 메서드를 구성합니다. ModelState.IsValid를 통해 모델 상태를 확인하고, 유효하지 않은 경우 오류 메시지를 포함하여 뷰를 다시 렌더링합니다.
코드: /Controllers/FormValidationDemoController.cs
#region Model Validation + Server Validation
public IActionResult ModelValidation()
{
return View();
}
[HttpPost]
public IActionResult ModelValidation(MaximModel model)
{
if (!ModelState.IsValid)
{
ModelState.AddModelError("", "유효성 검사에 실패했습니다.");
return View(model);
}
return View("Completed");
}
#endregion
3. 유효성 검사 통과 시 보여줄 뷰
유효성 검사를 통과한 후 사용자에게 보여줄 Completed.cshtml 뷰 페이지는 아래와 같이 구성합니다.
코드: /Views/FormValidationDemo/Completed.cshtml
<script>alert("완료되었습니다.");</script>
4. 유효성 검사 결과 표시
유효성 검사 결과를 사용자에게 표시하기 위해 ModelValidation.cshtml 뷰 페이지에서 @Html.ValidationSummary()와 @Html.ValidationMessageFor() 헬퍼 메서드를 사용합니다. 이러한 메서드들은 유효성 검사 오류 메시지를 사용자에게 표시하는 데 사용됩니다.
코드: /Views/FormValidationDemo/ModelValidation.cshtml
@model DotNetNote.Models.MaximModel
<!DOCTYPE html>
<html>
<head>
<title>모델 기반 서버 측 유효성 검사</title>
</head>
<body>
<h2>모델 기반 유효성 검사</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(false)
@Html.LabelFor(n => n.Name)
<text>: </text>
@Html.TextBoxFor(n => n.Name)
@Html.ValidationMessageFor(n => n.Name)<br />
@Html.LabelFor(c => c.Content)
<text>: </text>
@Html.TextBoxFor(c => c.Content)
@Html.ValidationMessageFor(c => c.Content)<br />
<input type="submit" value="전송" />
}
</body>
</html>
5. 오류 표시
오류가 있는 입력 필드에는 자동으로 유효성 검사 관련 데이터 속성이 추가되며, 이를 통해 사용자 인터페이스에서 오류를 시각적으로 표시할 수 있습니다. 서버 측 유효성 검사는 사용자가 폼을 제출한 후 서버로 데이터를 보내 검증하는 과정을 말합니다.
5.7 클라이언트 측 유효성 검사 실습
이번 실습에서는 서버 측 유효성 검사와 함께 클라이언트 측 유효성 검사를 구현해 보겠습니다. 클라이언트 측 유효성 검사는 사용자 입력을 서버로 보내기 전에 브라우저에서 먼저 검증하는 과정입니다. 이를 통해 사용자에게 즉각적인 피드백을 제공하고, 서버 부하를 줄일 수 있습니다.
1. 액션 메서드 구성
FormValidationDemoController에 ClientValidation 이름으로 GET과 POST 방식의 액션 메서드를 추가합니다. POST 방식의 액션 메서드는 유효성 검사를 통과하면 결과를 Completed 뷰 페이지로 이동시킵니다.
// /Controllers/FormValidationDemoController.cs
public IActionResult ClientValidation()
{
return View();
}
[HttpPost]
public IActionResult ClientValidation(MaximModel model)
{
if (ModelState.IsValid)
{
return View("Completed");
}
return View();
}
2. 클라이언트 측 유효성 검사를 위한 뷰 페이지 생성
ClientValidation.cshtml 뷰 페이지를 생성하여, jQuery 기반의 클라이언트 측 유효성 검사를 구현합니다. jQuery Validation 및 jQuery Validation Unobtrusive 플러그인을 사용하여 입력 필드의 유효성을 검증합니다.
@model DotNetNote.Models.MaximModel
<!DOCTYPE html>
<html>
<head>
<title>클라이언트 측 유효성 검사</title>
</head>
<body>
<h2>클라이언트 측 유효성 검사</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(false)
@Html.LabelFor(n => n.Name)
<text>: </text>
@Html.TextBoxFor(n => n.Name)
@Html.ValidationMessageFor(n => n.Name)
<br />
@Html.LabelFor(c => c.Content)
<text>: </text>
@Html.TextBoxFor(c => c.Content)
@Html.ValidationMessageFor(c => c.Content)
<br />
<input type="submit" value="전송" />
}
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</body>
</html>
이 코드는 폼의 유효성 검사를 클라이언트 측에서 자동으로 진행하도록 설정합니다. 사용자가 폼을 제출할 때 입력 값이 유효하지 않으면, 서버로 데이터를 보내기 전에 즉각적으로 에러 메시지를 표시합니다.
3. 유효성 검사 실행 및 결과 확인
ClientValidation 페이지를 실행하고, 폼에 잘못된 데이터를 입력한 후 전송 버튼을 클릭해 보세요. 서버로의 요청 없이 즉시 유효성 검사가 이루어지며, 오류 메시지가 사용자에게 표시됩니다. 이는 클라이언트 측 유효성 검사를 통해 사용자 경험을 향상시키고, 서버의 부담을 줄이는 효과적인 방법입니다.
5.8 태그 헬퍼를 이용한 폼 구성과 유효성 검사
ASP.NET Core의 강력한 기능 중 하나인 태그 헬퍼를 사용하여 폼 구성과 유효성 검사를 진행하는 방법을 알아봅시다. 태그 헬퍼는 HTML 태그에 서버 측 기능을 추가하여, 폼의 유효성 검사를 비롯한 다양한 작업을 용이하게 만듭니다.
1. 태그 헬퍼를 활용한 액션 메서드 구성
FormValidationDemo 컨트롤러에 TagHelperValidation 액션 메서드를 추가하여 태그 헬퍼 기반의 폼 유효성 검사를 구현합니다. 이 메서드는 폼 데이터를 받아 유효성 검사를 수행하고, 통과 시 완료 페이지를 보여줍니다.
// /Controllers/FormValidationDemoController.cs
public IActionResult TagHelperValidation()
{
return View();
}
[HttpPost]
public IActionResult TagHelperValidation(MaximModel model)
{
if (ModelState.IsValid)
{
return View("Completed");
}
return View();
}
2. 태그 헬퍼를 사용한 뷰 페이지 구성
TagHelperValidation.cshtml 페이지를 생성하여 태그 헬퍼를 이용한 폼 구성을 다음과 같이 정의합니다. asp- 접두사를 사용하여 폼, 입력 필드, 유효성 검사 메시지 등을 MVC와 연결합니다.
@model DotNetNote.Models.MaximModel
<!DOCTYPE html>
<html>
<head>
<title>태그 헬퍼로 폼 구성하기</title>
</head>
<body>
<h2>태그 헬퍼로 폼 구성 및 유효성 검사</h2>
<form asp-controller="FormValidationDemo" asp-action="TagHelperValidation" method="post">
<div asp-validation-summary="ModelOnly"></div>
<label asp-for="Name"></label>:
<input asp-for="Name" />
<span asp-validation-for="Name"></span>
<br />
<label asp-for="Content"></label>:
<input asp-for="Content" />
<span asp-validation-for="Content"></span>
<br />
<input type="submit" value="전송" />
</form>
</body>
</html>
이 방식을 통해, HTML 태그에 직접적으로 서버 측 코드를 주입하여 사용할 수 있는 장점을 활용합니다. 이로써 폼 관련 코드 구성이 보다 간결하고 명확해집니다.
3. 태그 헬퍼 기반 폼의 실행
태그 헬퍼를 사용하여 구성한 폼은 기존의 순수 HTML이나 헬퍼 메서드 방식으로 만든 폼과 동일하게 실행되며, 클라이언트 및 서버 측에서 유효성 검사를 정상적으로 수행합니다.
따라하기 8: 태그 헬퍼를 사용한 폼 유효성 검사
이번 섹션에서는 ASP.NET Core의 태그 헬퍼(tag helper)를 활용하여 폼 유효성 검사를 수행하는 과정을 다룹니다. 이 예제는 지원서 제출 폼의 유효성을 검사하는 과정을 통해 실제 웹 애플리케이션에서의 데이터 검증 방법을 설명합니다.
공통 상수 모음: DotNetNote\Models\Constants.cs
아래는 DotNetNote 애플리케이션에서 사용되는 Constants 클래스의 정의와 설명입니다. 이 클래스는 애플리케이션 전반에 걸쳐 공통으로 사용되는 상수와 설정 값을 중앙 집중적으로 관리하며, 코드의 유지보수성을 향상시키는 데 기여합니다.
using Microsoft.AspNetCore.Mvc.Rendering;
namespace DotNetNote.Models;
/// <summary>
/// 공통 상수 저장소를 제공합니다.
/// 이 클래스를 통해 애플리케이션 내에서 필요한 상수와 설정 값을 일관되게 관리할 수 있습니다.
/// </summary>
public partial class Constants
{
// DotNetNote 사이트의 기본 URL을 정의합니다.
public const string DotNetNoteSiteUrl = "http://www.dotnetnote.com";
// "예" 또는 "아니오" 선택을 위한 SelectListItem 목록을 정의합니다.
public static List<SelectListItem> YesOrNo = new List<SelectListItem>
{
new SelectListItem() { Value = "Yes", Text = "Yes" },
new SelectListItem() { Value = "No", Text = "No" }
};
}
이 클래스의 주요 구성 요소는 다음과 같습니다:
DotNetNoteSiteUrl: 애플리케이션에서 사용되는 기본 사이트 URL을 상수로 저장합니다. 이 값은 애플리케이션 내에서 동적으로 링크를 생성하거나 리다이렉션을 수행할 때 참조될 수 있습니다.YesOrNo: 사용자가 웹 양식에서 "예" 또는 "아니오"를 선택할 수 있게 하는SelectListItem객체의 리스트입니다. 각 항목은Text속성으로 사용자에게 표시될 문자열을,Value속성으로 서버에 전송될 값을 가집니다. 이 리스트는 드롭다운 리스트나 리스트박스에서 사용될 수 있으며,Microsoft.AspNetCore.Mvc.Rendering네임스페이스에 정의된SelectListItem클래스를 활용합니다.
SelectListItem 클래스는 ASP.NET Core에서 사용자 인터페이스의 선택 요소를 구성할 때 핵심적인 역할을 합니다. 이를 통해 개발자는 사용자에게 제공할 선택 옵션을 명확하게 정의할 수 있으며, 사용자 경험을 개선하는 데 기여할 수 있습니다. Constants 클래스와 같은 중앙 집중식 설정 관리는 애플리케이션의 유지보수성과 확장성을 향상시키는 데 중요한 역할을 합니다.
모델 정의: DotNetNote\Models\Applicant.cs
먼저, Applicant 모델을 정의합니다. 이 모델에는 지원자의 정보를 담는 여러 속성들이 있으며, 각 속성에는 유효성 검사 규칙이 적용됩니다. 예를 들어, Name 속성에는 [Display], [Required], [StringLength] 애너테이션이 적용되어 이름이 필수적으로 입력되어야 하며, 1자 이상 25자 이하로 제한됩니다.
using System.ComponentModel.DataAnnotations;
namespace DotNetNote.Models;
public class Applicant
{
public int Id { get; set; }
[Display(Name = "이름")]
[Required(ErrorMessage = "이름을 입력하시오.")]
[StringLength(25, MinimumLength = 1, ErrorMessage = "이름은 1자 이상 25자 이하")]
public string Name { get; set; }
[Required]
public string FatherName { get; set; }
public string FatherDob { get; set; }
[Required]
public string IsFatherMember { get; set; }
[Required]
public string MotherName { get; set; }
public string MotherDob { get; set; }
}
컨트롤러 액션: DotNetNote\Controllers\FormValidationDemoController.cs
컨트롤러에서는 GET 요청을 처리하기 위한 ApplicationForm 메서드와 POST 요청 시 폼 데이터를 받아 유효성 검사를 수행한 후 결과를 처리하는 ApplicationForm 메서드를 정의합니다. 유효성 검사를 통과하면 관련 정보를 데이터베이스에 저장하거나 다음 단계로 넘어갈 수 있습니다.
using Microsoft.AspNetCore.Mvc;
namespace DotNetNote.Controllers;
public class FormValidationDemoController : Controller
{
[HttpGet]
public IActionResult ApplicationForm()
{
return View();
}
[HttpPost]
public IActionResult ApplicationForm(Applicant applicant)
{
if (ModelState.IsValid)
{
// 유효성 검사를 통과하면 처리 로직
return View("Completed");
}
return View(applicant);
}
}
유효성 검사 스크립트: DotNetNote\Views\Shared\_ValidationScriptsPartial.cshtml
클라이언트 측 유효성 검사를 위해 jQuery Validation Plugin과 jQuery Validation Unobtrusive Plugin을 사용합니다. 이 스크립트는 폼에 입력된 데이터의 유효성을 실시간으로 검사합니다.
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
폼 뷰: DotNetNote\Views\FormValidationDemo\ApplicationForm.cshtml
지원서 폼 뷰에서는 ASP.NET Core의 태그 헬퍼를 사용하여 모델 속성에 바인딩된 입력 필드와 유효성 검사 메시지를 정의합니다. 태그 헬퍼는 asp-for 속성을 사용하여 모델의 각 속성과 연결됩니다. 또한, asp-validation-for 태그 헬퍼를 사용해 해당 필드의 유효성 검사 메시지를 표시합니다. 이 예제에서는 부트스트랩을 사용하여 폼을 스타일링하고, jQuery를 사용하여 날짜 선택기(datepicker) 기능을 제공합니다.
코드: DotNetNote\Views\FormValidationDemo\ApplicationForm.cshtml
@model DotNetNote.Models.Applicant
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>지원서 폼</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/bootstrap-3-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
</head>
<body>
<h1>지원서 폼</h1>
<form asp-controller="FormValidationDemo" asp-action="ApplicationForm" method="post">
<div class="form-group">
<label asp-for="Name" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name"></span>
</div>
</div>
<div class="form-group">
<label asp-for="FatherName" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="FatherName" class="form-control" />
<span asp-validation-for="FatherName"></span>
</div>
</div>
<div class="form-group">
<label asp-for="FatherDob" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="FatherDob" class="form-control" />
<span asp-validation-for="FatherDob"></span>
</div>
</div>
<div class="form-group">
<label asp-for="IsFatherMember" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select asp-for="IsFatherMember" class="form-control"
asp-items=
"@(new SelectList(DotNetNote.Models.Constants.YesOrNo, "Value", "Text"))">
<option value=""></option>
</select>
<span asp-validation-for="IsFatherMember"></span>
</div>
</div>
<div class="form-group">
<label asp-for="MotherName" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MotherName" class="form-control" />
<span asp-validation-for="MotherName"></span>
</div>
</div>
<div class="form-group">
<label asp-for="MotherDob" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MotherDob" class="form-control" />
<span asp-validation-for="MotherDob"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" name="btnSubmit" value="전송" />
</div>
</div>
</form>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
@await Html.PartialAsync("_ValidationScriptsPartial")
<script src="~/lib/moment/moment.js"></script>
<script src="~/lib/bootstrap-3-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script>
$(function () {
$("#FatherDob").datepicker();
$("#MotherDob").datepicker();
});
</script>
</body>
</html>
이 예제를 통해 ASP.NET Core에서 태그 헬퍼를 사용한 폼 유효성 검사의 구현 방법을 이해할 수 있습니다. 태그 헬퍼는 개발자가 HTML 폼 요소를 쉽게 정의하고 관리할 수 있도록 지원하며, 유효성 검사 규칙을 클라이언트와 서버 측에서 모두 적용하여 데이터의 정확성을 보장합니다.
마무리
이 장에서는 다양한 방식으로 폼을 구성하고 유효성 검사를 진행하는 방법에 대해 살펴보았습니다. 가장 최신의 방식인 태그 헬퍼를 사용하는 방식이 가장 효과적이며, 앞으로의 예제에서 주로 사용될 예정입니다. 그러나, 기초적인 폼 구성은 순수 HTML 및 헬퍼 메서드를 사용해도 충분하므로, 이번 실습을 통해 MVC에서 폼 구성의 전반적인 개념을 이해했기를 바랍니다. 태그 헬퍼에 대한 자세한 내용은 후속 장에서 더 깊이 다룰 예정입니다.
기타
ASP.NET Core에서의 Request.QueryString 및 Request.Form 사용법
ASP.NET Core는 ASP.NET 4.X의 Request.QueryString[] 및 Request.Form[] 사용법을 개선하여, 쿼리 스트링이나 폼 데이터를 처리하는 데 더욱 간편하고 명시적인 방법을 제공합니다. 이를 위해 [FromQuery] 특성과 HttpContext.Request 개체를 활용할 수 있습니다.
쿼리 스트링 데이터 처리하기
쿼리 스트링으로부터 데이터를 받아 처리하려면, 액션 메서드의 매개변수에 [FromQuery] 특성을 적용할 수 있습니다. 다음 예시는 BoardView 액션 메서드에서 쿼리 스트링을 통해 boardName과 boardNum 값을 받는 방법을 보여줍니다.
[HttpGet]
public IActionResult BoardView([FromQuery] string boardName, [FromQuery] int boardNum)
{
ViewData["BoardName"] = boardName;
ViewData["BoardNum"] = HttpContext.Request.Query["BoardNum"];
return View();
}
이 코드는 BoardView?BoardName=Recruit&BoardNum=11 형태의 URL에서 쿼리 스트링 값을 읽어 ViewData를 통해 뷰에 전달합니다.
탭 정보를 쿼리 스트링으로 받기
HttpContext.Request.Query를 사용하여 쿼리 스트링 정보를 직접 조회할 수도 있습니다. 예를 들어, 사용자가 선택한 탭 정보를 쿼리 스트링으로부터 받아 처리하는 방법은 아래와 같습니다.
var tab = "Profile"; // "Profile"이 기본 탭 값
if (HttpContext.Request.Query["tab"].Count > 0)
{
tab = HttpContext.Request.Query["tab"][0].ToString();
}
이 방식을 통해, 기본값이 "Profile"인 tab 변수에 쿼리 스트링을 통해 전달된 탭 정보를 저장할 수 있습니다. 이렇게 ASP.NET Core에서는 HttpContext.Request.Query를 통해 쿼리 스트링에 접근하여 다양한 요청 데이터를 유연하게 처리할 수 있습니다.