모델에 유효성 검사 추가 - 입력 유효성 검사를 사용하도록 설정하는 데 필요한 지원을 구현하는 방법

2023-07-13

이 자습서에서는 ASP.NET MVC의 기본 사항을 소개합니다. 데이터베이스에서 읽고 쓰는 간단한 웹 애플리케이션을 만듭니다. 다른 ASP.NET MVC 자습서 및 샘플을 찾으려면 ASP.NET MVC 학습 센터를 방문하세요.

이 섹션에서는 애플리케이션 내에서 입력 유효성 검사를 사용하도록 설정하는 데 필요한 지원을 구현합니다. 데이터베이스 콘텐츠가 항상 올바른지 확인하고 최종 사용자가 유효하지 않은 동영상 데이터를 입력하려고 할 때 유용한 오류 메시지를 제공합니다. 먼저 Movie 클래스에 약간의 유효성 검사 논리를 추가합니다.

Model 폴더를 마우스 오른쪽 단추로 클릭하고 클래스 추가를 선택합니다. 클래스 이름을 Movie로 지정합니다.

이전에 영화 엔터티 모델을 만들었을 때 IDE는 Movie 클래스를 만들었습니다. 실제로 Movie 클래스의 일부는 한 파일에 있고 다른 파일에 있을 수 있습니다. 이를 Partial 클래스라고 합니다. 다른 파일에서 Movie 클래스를 확장하겠습니다.

시스템에 유효성 검사 힌트를 제공하는 몇 가지 특성을 사용하여 "버디 클래스"를 가리키는 부분 영화 클래스를 만듭니다. 타이틀 및 가격을 필수로 표시하고 가격이 특정 범위 내에 있다고 주장합니다. Models 폴더를 마우스 오른쪽 단추로 클릭하고 클래스 추가를 선택합니다. 클래스 이름을 Movie로 지정하고 확인 단추를 클릭합니다. 부분 무비 클래스는 다음과 같습니다.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

애플리케이션을 Re-Run 100이 넘는 가격으로 영화를 입력해 보세요. 양식을 제출하면 오류가 발생합니다. 서버 쪽에서 오류가 발생하며 양식이 POSTed인 후에 발생합니다. MVC의 기본 제공 HTML 도우미 ASP.NET 오류 메시지를 표시하고 텍스트 상자 요소 내에서 값을 유지할 수 있을 만큼 스마트한 방법을 확인합니다.

이는 잘 작동하지만 서버가 개입되기 직전에 클라이언트 쪽에서 사용자에게 알릴 수 있다면 좋을 것입니다.

JavaScript를 사용하여 일부 클라이언트 쪽 유효성 검사를 사용하도록 설정해 보겠습니다.

클라이언트측 유효성 검사 추가

Movie 클래스에는 이미 몇 가지 유효성 검사 특성이 있으므로 Create.aspx View 템플릿에 몇 가지 JavaScript 파일을 추가하고 클라이언트 쪽 유효성 검사를 수행할 수 있도록 코드 줄을 추가하면 됩니다.

VWD 내에서 Views/Movie 폴더로 이동하여 Create.aspx를 엽니다.

솔루션 탐색기 Scripts 폴더를 열고 다음 세 개의 스크립트를 헤드> 태그 내로 <끕니다.

MicrosoftAjax.js
MicrosoftMvcValidation.js

이러한 스크립트 파일을 이 순서대로 표시하려고 합니다.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

또한 Html.BeginForm 위에 이 단일 줄을 추가합니다.

<% Html.EnableClientValidation(); %>

다음은 IDE 내에 표시된 코드입니다.

애플리케이션을 실행하고 /Movies/Create를 다시 방문하고 데이터를 입력하지 않고 만들기를 클릭합니다. 오류 메시지는 데이터를 서버로 다시 보내는 것과 관련된 페이지 플래시 없이 즉시 표시됩니다. 이는 ASP.NET MVC가 이제 클라이언트(JavaScript 사용)와 서버 모두에서 입력의 유효성을 검사하기 때문입니다.

이것은 좋은 찾고있다! 이제 데이터베이스에 열을 하나 더 추가해 보겠습니다.

이전 다음

다음을 통해 공유

모델에 유효성 검사 추가 - 입력 유효성 검사를 사용하도록 설정하는 데 필요한 지원을 구현하는 방법

클라이언트측 유효성 검사 추가

피드백

추가 리소스