간단한 유효성 검사 수행(C#)

아티클
07/13/2023

ASP.NET MVC 애플리케이션에서 유효성 검사를 수행하는 방법을 알아봅니다. 이 자습서에서 Stephen Walther는 모델 상태 및 유효성 검사 HTML 도우미를 소개합니다.

이 자습서의 목표는 ASP.NET MVC 애플리케이션 내에서 유효성 검사를 수행하는 방법을 설명하는 것입니다. 예를 들어 다른 사용자가 필수 필드에 대한 값을 포함하지 않는 양식을 제출하지 못하도록 하는 방법을 알아봅니다. 모델 상태 및 유효성 검사 HTML 도우미를 사용하는 방법을 알아봅니다.

모델 상태 이해

모델 상태(또는 보다 정확하게 모델 상태 사전)를 사용하여 유효성 검사 오류를 나타냅니다. 예를 들어 목록 1의 Create() 작업은 Product 클래스를 데이터베이스에 추가하기 전에 Product 클래스의 속성의 유효성을 검사합니다.

컨트롤러에 유효성 검사 또는 데이터베이스 논리를 추가하는 것은 권장되지 않습니다. 컨트롤러는 애플리케이션 흐름 제어와 관련된 논리만 포함해야 합니다. 우리는 일을 간단하게 유지하기 위해 바로 가기를 복용하고 있습니다.

목록 1 - Controllers\ProductController.cs

//
// POST: /Product/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude="Id")] Product productToCreate)
{
    // Validation logic
    if (productToCreate.Name.Trim().Length == 0)
        ModelState.AddModelError("Name", "Name is required.");
    if (productToCreate.Description.Trim().Length == 0)
        ModelState.AddModelError("Description", "Description is required.");
    if (productToCreate.UnitsInStock

목록 1에서 Product 클래스의 Name, Description 및 UnitsInStock 속성의 유효성이 검사됩니다. 이러한 속성이 유효성 검사 테스트에 실패하면 오류는 모델 상태 사전(Controller 클래스의 ModelState 속성으로 표시됨)에 추가됩니다.

모델 상태에 오류가 있는 경우 ModelState.IsValid 속성은 false를 반환합니다. 이 경우 새 제품을 만들기 위한 HTML 양식이 다시 표시됩니다. 그렇지 않으면 유효성 검사 오류가 없으면 새 제품이 데이터베이스에 추가됩니다.

유효성 검사 도우미 사용

ASP.NET MVC 프레임워크에는 Html.ValidationMessage() 도우미와 Html.ValidationSummary() 도우미의 두 가지 유효성 검사 도우미가 포함되어 있습니다. 보기에서 이러한 두 도우미를 사용하여 유효성 검사 오류 메시지를 표시합니다.

Html.ValidationMessage() 및 Html.ValidationSummary() 도우미는 ASP.NET MVC 스캐폴딩에 의해 자동으로 생성되는 보기 만들기 및 편집에서 사용됩니다. 만들기 뷰를 생성하려면 다음 단계를 수행합니다.

제품 컨트롤러에서 만들기() 작업을 마우스 오른쪽 단추로 클릭하고 보기 추가 메뉴 옵션을 선택합니다(그림 1 참조).
보기 추가 대화 상자에서 강력한 형식의 보기 만들기(그림 2 참조)라는 확인란을 검사.
데이터 클래스 보기 드롭다운 목록에서 Product 클래스를 선택합니다.
콘텐츠 보기 드롭다운 목록에서 만들기를 선택합니다.
추가 단추를 클릭합니다.

보기를 추가하기 전에 애플리케이션을 빌드해야 합니다. 그렇지 않으면 클래스 목록이 데이터 클래스 보기 드롭다운 목록에 표시되지 않습니다.

그림 01: 보기 추가(전체 크기 이미지를 보려면 클릭)

그림 02: 강력한 형식의 보기 만들기(전체 크기 이미지를 보려면 클릭)

이러한 단계를 완료하면 목록 2에서 만들기 보기가 표시됩니다.

목록 2 - Views\Product\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Product>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Name") %>
                <%= Html.ValidationMessage("Name", "*") %>
            </p>
            <p>
                <label for="Description">Description:</label>
                <%= Html.TextBox("Description") %>
                <%= Html.ValidationMessage("Description", "*") %>
            </p>
            <p>
                <label for="Price">Price:</label>
                <%= Html.TextBox("Price") %>
                <%= Html.ValidationMessage("Price", "*") %>
            </p>
            <p>
                <label for="UnitsInStock">UnitsInStock:</label>
                <%= Html.TextBox("UnitsInStock") %>
                <%= Html.ValidationMessage("UnitsInStock", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

목록 2에서 Html.ValidationSummary() 도우미는 HTML 양식 바로 위에 호출됩니다. 이 도우미는 유효성 검사 오류 메시지 목록을 표시하는 데 사용됩니다. Html.ValidationSummary() 도우미는 글머리 기호 목록의 오류를 렌더링합니다.

Html.ValidationMessage() 도우미는 각 HTML 양식 필드 옆에 호출됩니다. 이 도우미는 양식 필드 바로 옆에 오류 메시지를 표시하는 데 사용됩니다. 목록 2의 경우 Html.ValidationMessage() 도우미는 오류가 있을 때 별표가 표시됩니다.

그림 3의 페이지는 양식이 누락된 필드와 잘못된 값으로 제출될 때 유효성 검사 도우미가 렌더링한 오류 메시지를 보여 줍니다.

그림 03: 문제가 있는 제출된 보기 만들기(전체 크기 이미지를 보려면 클릭)

유효성 검사 오류가 있을 때 HTML 입력 필드의 모양도 수정됩니다. Html.TextBox() 도우미가 렌더링한 속성과 관련된 유효성 검사 오류가 있는 경우 Html.TextBox() 도우미는 class="input-validation-error" 특성을 렌더링합니다.

유효성 검사 오류의 모양을 제어하는 데 사용되는 세 가지 연속 스타일시트 클래스가 있습니다.

input-validation-error - Html.TextBox() 도우미가 렌더링한 입력> 태그에 적용<됩니다.
field-validation-error - Html.ValidationMessage() 도우미가 렌더링한 범위> 태그에 적용<됩니다.
validation-summary-errors - Html.ValidationSummary() 도우미가 렌더링한 ul> 태그에 적용<됩니다.

이러한 계단식 스타일시트 클래스를 수정할 수 있으므로 Content 폴더에 있는 Site.css 파일을 수정하여 유효성 검사 오류의 모양을 수정할 수 있습니다.

참고

HtmlHelper 클래스에는 유효성 검사 관련 CSS 클래스의 이름을 검색하기 위한 읽기 전용 정적 속성이 포함되어 있습니다. 이러한 정적 속성의 이름은 ValidationInputCssClassName, ValidationFieldCssClassName 및 ValidationSummaryCssClassName입니다.

유효성 검사 미리 바인딩 및 게시 바인딩 유효성 검사

제품을 만들기 위한 HTML 양식을 제출하고 가격 필드에 잘못된 값을 입력하고 UnitsInStock 필드에 값을 입력하지 않으면 그림 4에 표시되는 유효성 검사 메시지가 표시됩니다. 이러한 유효성 검사 오류 메시지는 어디에서 발생합니까?

그림 04: 유효성 검사 오류 미리 바인딩(전체 크기 이미지를 보려면 클릭)

실제로 두 가지 유형의 유효성 검사 오류 메시지가 있습니다. HTML 양식 필드가 클래스에 바인딩되기 전에 생성된 메시지와 양식 필드가 클래스에 바인딩된 후에 생성된 메시지입니다. 즉, 유효성 검사 오류를 미리 바인딩하고 유효성 검사 후 바인딩 오류가 있습니다.

목록 1의 제품 컨트롤러에서 노출하는 Create() 작업은 Product 클래스의 instance 허용합니다. Create 메서드의 서명은 다음과 같습니다.

public ActionResult Create([Bind(Exclude="Id")] Product productToCreate)

Create 양식의 HTML 양식 필드 값은 모델 바인더라는 항목에 의해 productToCreate 클래스에 바인딩됩니다. 기본 모델 바인더는 양식 필드를 양식 속성에 바인딩할 수 없는 경우 자동으로 모델 상태에 오류 메시지를 추가합니다.

기본 모델 바인더는 문자열 "apple"을 Product 클래스의 Price 속성에 바인딩할 수 없습니다. 10진수 속성에 문자열을 할당할 수 없습니다. 따라서 모델 바인더는 모델 상태에 오류를 추가합니다.

또한 기본 모델 바인더는 null을 허용하지 않는 속성에 null 값을 할당할 수 없습니다. 특히 모델 바인더는 UnitsInStock 속성에 null 값을 할당할 수 없습니다. 다시 한 번 모델 바인더는 모델 상태를 포기하고 오류 메시지를 추가합니다.

이러한 미리 바인딩된 오류 메시지의 모양을 사용자 지정하려면 이러한 메시지에 대한 리소스 문자열을 만들어야 합니다.

요약

이 자습서의 목표는 ASP.NET MVC 프레임워크에서 유효성 검사의 기본 메커니즘을 설명하는 것이었습니다. 모델 상태 및 유효성 검사 HTML 도우미를 사용하는 방법을 알아보았습니다. 또한 프리바인딩과 포스트바인딩 유효성 검사의 차이점에 대해서도 설명했습니다. 다른 자습서에서는 컨트롤러에서 모델 클래스로 유효성 검사 코드를 이동하기 위한 다양한 전략에 대해 설명합니다.

이전 다음

다음을 통해 공유

간단한 유효성 검사 수행(C#)

모델 상태 이해

유효성 검사 도우미 사용

유효성 검사 미리 바인딩 및 게시 바인딩 유효성 검사

요약

피드백

피드백

추가 리소스