ASP.NET Core 형식의 태그 도우미Tag Helpers in forms in ASP.NET Core

작성자 Rick Anderson, Dave PaquetteJerrie PelserBy Rick Anderson, Dave Paquette, and Jerrie Pelser

이 문서에서는 형식 및 형식에서 일반적으로 사용되는 HTML 요소 작업을 보여줍니다.This document demonstrates working with Forms and the HTML elements commonly used on a Form. HTML 형식 요소는 서버에 데이터를 다시 게시하는 기본 메커니즘 웹앱을 사용하도록 제공합니다.The HTML Form element provides the primary mechanism web apps use to post back data to the server. 이 문서에서는 대부분 태그 도우미 및 강력한 HTML 형식을 생산적으로 만들 수 있는 방법을 설명합니다.Most of this document describes Tag Helpers and how they can help you productively create robust HTML forms. 이 문서를 읽기 전에 태그 도우미 소개를 참조하세요.We recommend you read Introduction to Tag Helpers before you read this document.

많은 경우 HTML 도우미는 특정 태그 도우미에 대한 대체 방법을 제공하지만, 태그 도우미는 HTML 도우미를 대체하지 않으며 각 HTML 도우미에 대한 태그 도우미가 없다는 사실을 인지하는 것이 중요합니다.In many cases, HTML Helpers provide an alternative approach to a specific Tag Helper, but it's important to recognize that Tag Helpers don't replace HTML Helpers and there's not a Tag Helper for each HTML Helper. HTML 도우미 대안이 있다면 그 내용도 다룹니다.When an HTML Helper alternative exists, it's mentioned.

형식 태그 도우미The Form Tag Helper

형식 태그 도우미:The Form Tag Helper:

  • MVC 컨트롤러 동작 또는 명명된 경로에 대한 HTML <FORM> action 특성 값을 생성합니다.Generates the HTML <FORM> action attribute value for a MVC controller action or named route

  • 사이트 간 요청 위조를 방지하기 위해 숨겨진 요청 확인 토큰을 만듭니다(HTTP Post 작업 메서드에서 [ValidateAntiForgeryToken] 특성과 함께 사용할 경우).Generates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method)

  • asp-route-<Parameter Name> 특성을 제공합니다. 여기서 <Parameter Name>을 경로 값에 추가합니다.Provides the asp-route-<Parameter Name> attribute, where <Parameter Name> is added to the route values. Html.BeginFormHtml.BeginRouteForm에 대한 routeValues 매개 변수는 유사한 기능을 제공합니다.The routeValues parameters to Html.BeginForm and Html.BeginRouteForm provide similar functionality.

  • HTML 도우미 대안 Html.BeginFormHtml.BeginRouteForm가 있습니다.Has an HTML Helper alternative Html.BeginForm and Html.BeginRouteForm

예제:Sample:

<form asp-controller="Demo" asp-action="Register" method="post">
    <!-- Input and Submit elements -->
</form>

위의 형식 태그 도우미에서는 다음 HTML을 생성합니다.The Form Tag Helper above generates the following HTML:

<form method="post" action="/Demo/Register">
    <!-- Input and Submit elements -->
    <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
</form>

MVC 런타임은 형식 태그 도우미 특성 asp-controllerasp-action에서 action 특성 값을 만듭니다.The MVC runtime generates the action attribute value from the Form Tag Helper attributes asp-controller and asp-action. 형식 태그 도우미도 사이트 간 요청 위조를 방지하기 위해 숨겨진 요청 확인 토큰을 만듭니다(HTTP Post 작업 메서드에서 [ValidateAntiForgeryToken] 특성과 함께 사용할 경우).The Form Tag Helper also generates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method). 사이트 간 요청 위조로부터 순수한 HTML 형식을 보호하기는 어렵습니다. 형식 태그 도우미는 이러한 서비스를 제공합니다.Protecting a pure HTML Form from cross-site request forgery is difficult, the Form Tag Helper provides this service for you.

명명된 경로 사용Using a named route

asp-route 태그 도우미 특성은 HTML action 특성에 대한 태그를 만들 수도 있습니다.The asp-route Tag Helper attribute can also generate markup for the HTML action attribute. register라는 경로를 사용하는 앱은 등록 페이지에 다음 태그를 사용할 수 있습니다.An app with a route named register could use the following markup for the registration page:

<form asp-route="register" method="post">
    <!-- Input and Submit elements -->
</form>

보기/계정 폴더의 보기 중 다수(개별 사용자 계정을 사용하여 새로운 웹앱을 만들 때 생성됨)에는 asp-route-returnurl 특성이 포함됩니다.Many of the views in the Views/Account folder (generated when you create a new web app with Individual User Accounts) contain the asp-route-returnurl attribute:

<form asp-controller="Account" asp-action="Login"
     asp-route-returnurl="@ViewData["ReturnUrl"]"
     method="post" class="form-horizontal" role="form">

참고

기본 제공된 템플릿을 사용하면 권한이 부여된 리소스에 액세스하려고 하지만 인증되거나 권한이 없는 경우에만 returnUrl이 자동으로 채워집니다.With the built in templates, returnUrl is only populated automatically when you try to access an authorized resource but are not authenticated or authorized. 권한이 없는 액세스를 시도하는 경우 보안 미들웨어는 사용자를 returnUrl 설정이 포함된 로그인 페이지에 리디렉션합니다.When you attempt an unauthorized access, the security middleware redirects you to the login page with the returnUrl set.

입력 태그 도우미The Input Tag Helper

입력 태그 도우미는 HTML <input> 요소를 Razor 보기의 모델 식에 바인딩합니다.The Input Tag Helper binds an HTML <input> element to a model expression in your razor view.

구문:Syntax:

<input asp-for="<Expression Name>" />

입력 태그 도우미:The Input Tag Helper:

  • asp-for 특성에 지정된 식 이름에 대해 idname HTML 특성을 만듭니다.Generates the id and name HTML attributes for the expression name specified in the asp-for attribute. asp-for="Property1.Property2"m => m.Property1.Property2와 같습니다.asp-for="Property1.Property2" is equivalent to m => m.Property1.Property2. 식의 이름은 asp-for 특성 값에 사용됩니다.The name of the expression is what is used for the asp-for attribute value. 추가 정보는 식 이름 섹션을 참조하세요.See the Expression names section for additional information.

  • 모델 속성에 적용된 모델 형식 및 데이터 주석 특성에 따라 HTML type 특성 값을 설정합니다.Sets the HTML type attribute value based on the model type and data annotation attributes applied to the model property

  • HTML type 특성 값이 지정 된 경우 덮어쓰지 않습니다.Won't overwrite the HTML type attribute value when one is specified

  • 모델 속성에 적용되는 데이터 주석 특성에서 HTML5 유효성 검사 특성을 만듭니다.Generates HTML5 validation attributes from data annotation attributes applied to model properties

  • Html.TextBoxForHtml.EditorFor와 HTML 도우미 기능이 겹칩니다.Has an HTML Helper feature overlap with Html.TextBoxFor and Html.EditorFor. 자세한 내용은 입력 태그 도우미에 대한 HTML 도우미 대안 섹션을 참조하세요.See the HTML Helper alternatives to Input Tag Helper section for details.

  • 강력한 형식 지정을 제공합니다.Provides strong typing. 속성의 이름이 변경되고 태그 도우미를 업데이트하지 않은 경우 다음과 비슷한 오류가 표시됩니다.If the name of the property changes and you don't update the Tag Helper you'll get an error similar to the following:

An error occurred during the compilation of a resource required to process
this request. Please review the following specific error details and modify
your source code appropriately.

Type expected
 'RegisterViewModel' does not contain a definition for 'Email' and no
 extension method 'Email' accepting a first argument of type 'RegisterViewModel'
 could be found (are you missing a using directive or an assembly reference?)

Input 태그 도우미는 .NET 형식을 기반으로 HTML type 특성을 설정합니다.The Input Tag Helper sets the HTML type attribute based on the .NET type. 다음 표에서는 몇 가지 일반적인 .NET 형식 및 생성된 HTML 형식을 나열합니다(.NET 형식의 일부만 나열됨).The following table lists some common .NET types and generated HTML type (not every .NET type is listed).

.NET 형식.NET type 입력 형식Input Type
BoolBool type=”checkbox”type=”checkbox”
문자열String type=”text”type=”text”
DateTimeDateTime type=”datetime”type=”datetime”
ByteByte type=”number”type=”number”
IntInt type=”number”type=”number”
Single, DoubleSingle, Double type=”number”type=”number”

다음 표에서는 입력 태그 도우미가 특정 입력 형식에 매핑되는 몇 가지 일반적인 데이터 주석 특성을 보여줍니다(유효성 검사 특성의 일부만 나열됨).The following table shows some common data annotations attributes that the input tag helper will map to specific input types (not every validation attribute is listed):

특성Attribute 입력 형식Input Type
[EmailAddress][EmailAddress] type=”email”type=”email”
[Url][Url] type=”url”type=”url”
[HiddenInput][HiddenInput] type=”hidden”type=”hidden”
[Phone][Phone] type=”tel”type=”tel”
[DataType(DataType.Password)][DataType(DataType.Password)] type=”password”type=”password”
[DataType(DataType.Date)][DataType(DataType.Date)] type=”date”type=”date”
[DataType(DataType.Time)][DataType(DataType.Time)] type=”time”type=”time”

예제:Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterInput" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Register</button>
</form>

위의 코드는 다음과 같은 HTML을 생성합니다.The code above generates the following HTML:

  <form method="post" action="/Demo/RegisterInput">
       Email:
       <input type="email" data-val="true"
              data-val-email="The Email Address field is not a valid email address."
              data-val-required="The Email Address field is required."
              id="Email" name="Email" value="" /> <br>
       Password:
       <input type="password" data-val="true"
              data-val-required="The Password field is required."
              id="Password" name="Password" /><br>
       <button type="submit">Register</button>
     <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
   </form>

EmailPassword 속성에 적용할 데이터 주석은 모델에서 메타데이터를 생성합니다.The data annotations applied to the Email and Password properties generate metadata on the model. 입력 태그 도우미는 모델 메타데이터를 사용하고 HTML5 data-val-* 특성을 생성합니다(모델 유효성 검사 참조).The Input Tag Helper consumes the model metadata and produces HTML5 data-val-* attributes (see Model Validation). 이러한 특성에서는 입력 필드에 연결할 유효성 검사기를 설명합니다.These attributes describe the validators to attach to the input fields. 이 기능은 비간섭 HTML5 및 jQuery 유효성 검사를 제공합니다.This provides unobtrusive HTML5 and jQuery validation. 비간섭 특성은 data-val-rule="Error Message" 형식을 사용합니다. 여기서 규칙은 유효성 검사 규칙의 이름(예: data-val-required, data-val-email, data-val-maxlength 등)입니다. 오류 메시지가 특성에서 제공되는 경우 data-val-rule 특성에 대한 값으로 표시됩니다.The unobtrusive attributes have the format data-val-rule="Error Message", where rule is the name of the validation rule (such as data-val-required, data-val-email, data-val-maxlength, etc.) If an error message is provided in the attribute, it's displayed as the value for the data-val-rule attribute. 또한 규칙에 대한 추가 세부 정보를 제공하는 data-val-ruleName-argumentName="argumentValue" 형식의 특성이 있습니다(예: data-val-maxlength-max="1024").There are also attributes of the form data-val-ruleName-argumentName="argumentValue" that provide additional details about the rule, for example, data-val-maxlength-max="1024" .

입력 태그 도우미에 대한 HTML 도우미 대안HTML Helper alternatives to Input Tag Helper

Html.TextBox, Html.TextBoxFor, Html.EditorHtml.EditorFor에는 입력 태그 도우미와 겹치는 기능이 있습니다.Html.TextBox, Html.TextBoxFor, Html.Editor and Html.EditorFor have overlapping features with the Input Tag Helper. 입력 태그 도우미는 type 특성을 자동으로 설정하는 반면 Html.TextBoxHtml.TextBoxFor는 설정하지 않습니다.The Input Tag Helper will automatically set the type attribute; Html.TextBox and Html.TextBoxFor won't. Html.EditorHtml.EditorFor는 컬렉션, 복잡한 개체 및 템플릿을 처리하는 반면 입력 태그 도우미는 처리하지 않습니다.Html.Editor and Html.EditorFor handle collections, complex objects and templates; the Input Tag Helper doesn't. 입력 태그 도우미인 Html.EditorForHtml.TextBoxFor은 강력한 형식이 지정(람다 식 사용)되는 반면 Html.TextBoxHtml.Editor는 지정되지 않습니다(식 이름 사용).The Input Tag Helper, Html.EditorFor and Html.TextBoxFor are strongly typed (they use lambda expressions); Html.TextBox and Html.Editor are not (they use expression names).

HtmlAttributesHtmlAttributes

@Html.Editor()@Html.EditorFor()는 해당 기본 템플릿을 실행할 때 htmlAttributes라는 특수한 ViewDataDictionary 항목을 사용합니다.@Html.Editor() and @Html.EditorFor() use a special ViewDataDictionary entry named htmlAttributes when executing their default templates. 이 동작은 필요에 따라 additionalViewData 매개 변수를 사용하여 확대됩니다.This behavior is optionally augmented using additionalViewData parameters. "htmlAttributes" 키는 대/소문자를 구분합니다.The key "htmlAttributes" is case-insensitive. "htmlAttributes" 키는 @Html.TextBox()와 같은 입력 도우미에 전달된 htmlAttributes 개체와 유사하게 처리됩니다.The key "htmlAttributes" is handled similarly to the htmlAttributes object passed to input helpers like @Html.TextBox().

@Html.EditorFor(model => model.YourProperty, 
  new { htmlAttributes = new { @class="myCssClass", style="Width:100px" } })

식 이름Expression names

asp-for 특성 값은 ModelExpression이며 람다 식의 오른쪽입니다.The asp-for attribute value is a ModelExpression and the right hand side of a lambda expression. 따라서 asp-for="Property1"은 생성된 코드에서 m => m.Property1이 됩니다. 따라서 Model과 함께 접두사로 사용할 필요가 없습니다.Therefore, asp-for="Property1" becomes m => m.Property1 in the generated code which is why you don't need to prefix with Model. "@" 문자를 사용하여 인라인 식을 시작하고 `m.` 앞으로 이동할 수 있습니다.</span><span class="sxs-lookup">You can use the "@" character to start an inline expression and move before the m.:

@{
       var joe = "Joe";
   }
   <input asp-for="@joe" />

다음 항목을 생성합니다.Generates the following:

<input type="text" id="joe" name="joe" value="Joe" />

컬렉션 속성을 가진 asp-for="CollectionProperty[23].Member"i23 값이 포함될 경우 asp-for="CollectionProperty[i].Member"와 동일한 이름을 생성합니다.With collection properties, asp-for="CollectionProperty[23].Member" generates the same name as asp-for="CollectionProperty[i].Member" when i has the value 23.

ASP.NET Core MVC가 ModelExpression의 값을 계산하는 경우 ModelState를 비롯한 여러 원본을 검사합니다.When ASP.NET Core MVC calculates the value of ModelExpression, it inspects several sources, including ModelState. <input type="text" asp-for="@Name" />을 고려합니다.Consider <input type="text" asp-for="@Name" />. 계산된 value 특성은 첫 번째 null이 아닌 값입니다.The calculated value attribute is the first non-null value from:

  • "Name" 키를 가진 ModelState 항목입니다.ModelState entry with key "Name".
  • Model.Name의 결과입니다.Result of the expression Model.Name.

보기 모델의 속성 경로를 사용하여 자식 속성을 탐색할 수 있습니다.You can also navigate to child properties using the property path of the view model. 자식 Address 속성을 포함하는 보다 복잡한 모델 클래스를 사용해보세요.Consider a more complex model class that contains a child Address property.

public class AddressViewModel
{
    public string AddressLine1 { get; set; }
}
public class RegisterAddressViewModel
{
    public string Email { get; set; }

    [DataType(DataType.Password)]
    public string Password { get; set; }

    public AddressViewModel Address { get; set; }
}

보기에서 Address.AddressLine1에 바인딩합니다.In the view, we bind to Address.AddressLine1:

@model RegisterAddressViewModel

<form asp-controller="Demo" asp-action="RegisterAddress" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    Address: <input asp-for="Address.AddressLine1" /><br />
    <button type="submit">Register</button>
</form>

다음 HTML이 Address.AddressLine1에 생성됩니다.The following HTML is generated for Address.AddressLine1:

<input type="text" id="Address_AddressLine1" name="Address.AddressLine1" value="" />

식 이름 및 컬렉션Expression names and Collections

샘플, Colors의 배열을 포함하는 모델은 다음과 같습니다.Sample, a model containing an array of Colors:

public class Person
{
    public List<string> Colors { get; set; }

    public int Age { get; set; }
}

작업 방법:The action method:

public IActionResult Edit(int id, int colorIndex)
   {
       ViewData["Index"] = colorIndex;
       return View(GetPerson(id));
   }

다음 Razor에서는 특정 Color 요소에 액세스하는 방법을 보여줍니다.The following Razor shows how you access a specific Color element:

@model Person
@{
    var index = (int)ViewData["index"];
}

<form asp-controller="ToDo" asp-action="Edit" method="post">
    @Html.EditorFor(m => m.Colors[index])
    <label asp-for="Age"></label>
    <input asp-for="Age" /><br />
    <button type="submit">Post</button>
</form>

Views/Shared/EditorTemplates/String.cshtml 템플릿:The Views/Shared/EditorTemplates/String.cshtml template:

@model string

<label asp-for="@Model"></label>
<input asp-for="@Model" /> <br />

List<T>를 사용하는 샘플:Sample using List<T>:

public class ToDoItem
{
    public string Name { get; set; }

    public bool IsDone { get; set; }
}

다음 Razor에서는 컬렉션을 반복하는 방법을 보여줍니다.The following Razor shows how to iterate over a collection:

@model List<ToDoItem>

<form asp-controller="ToDo" asp-action="Edit" method="post">
    <table>
        <tr> <th>Name</th> <th>Is Done</th> </tr>

        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                @Html.EditorFor(model => model[i])
            </tr>
        }

    </table>
    <button type="submit">Save</button>
</form>

Views/Shared/EditorTemplates/ToDoItem.cshtml 템플릿:The Views/Shared/EditorTemplates/ToDoItem.cshtml template:

@model ToDoItem

<td>
    <label asp-for="@Model.Name"></label>
    @Html.DisplayFor(model => model.Name)
</td>
<td>
    <input asp-for="@Model.IsDone" />
</td>

@*
    This template replaces the following Razor which evaluates the indexer three times.
    <td>
         <label asp-for="@Model[i].Name"></label>
         @Html.DisplayFor(model => model[i].Name)
     </td>
     <td>
         <input asp-for="@Model[i].IsDone" />
     </td>
*@

참고

for(foreach 아님)를 항상 사용하여 목록을 반복합니다.Always use for (and not foreach) to iterate over a list. LINQ 식에서 인덱서를 평가하는 작업은 비용이 많이 들기 때문에 최소화해야 합니다.Evaluating an indexer in a LINQ expression can be expensive and should be minimized.

 

참고

위의 주석 처리된 코드 샘플은 람다 식을 @ 연산자와 바꿔서 목록에 있는 각 ToDoItem에 액세스하는 방법을 보여줍니다.The commented sample code above shows how you would replace the lambda expression with the @ operator to access each ToDoItem in the list.

텍스트 영역 태그 도우미The Textarea Tag Helper

Textarea Tag Helper 태그 도우미는 입력 태그 도우미와 비슷합니다.The Textarea Tag Helper tag helper is similar to the Input Tag Helper.

  • <textarea> 요소의 모델에서 idname 특성과 데이터 유효성 검사 특성을 생성합니다.Generates the id and name attributes, and the data validation attributes from the model for a <textarea> element.

  • 강력한 형식 지정을 제공합니다.Provides strong typing.

  • HTML 도우미 대안: Html.TextAreaForHTML Helper alternative: Html.TextAreaFor

예제:Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class DescriptionViewModel
    {
        [MinLength(5)]
        [MaxLength(1024)]
        public string Description { get; set; }
    }
}
@model DescriptionViewModel

<form asp-controller="Demo" asp-action="RegisterTextArea" method="post">
    <textarea asp-for="Description"></textarea>
    <button type="submit">Test</button>
</form>

다음 HTML이 생성됩니다.The following HTML is generated:

<form method="post" action="/Demo/RegisterTextArea">
  <textarea data-val="true"
   data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;1024&#x27;."
   data-val-maxlength-max="1024"
   data-val-minlength="The field Description must be a string or array type with a minimum length of &#x27;5&#x27;."
   data-val-minlength-min="5"
   id="Description" name="Description">
  </textarea>
  <button type="submit">Test</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
</form>

레이블 태그 도우미The Label Tag Helper

  • 식 이름의 요소에서 레이블 캡션 및 for 특성을 생성합니다.Generates the label caption and for attribute on a element for an expression name

  • HTML 도우미 대안: Html.LabelForHTML Helper alternative: Html.LabelFor.

Label Tag Helper는 HTML 레이블 요소를 통해 다음과 같은 이점을 제공합니다.The Label Tag Helper provides the following benefits over a pure HTML label element:

  • Display 특성에서 설명 레이블을 값을 자동으로 가져옵니다.You automatically get the descriptive label value from the Display attribute. 의도한 표시 이름은 시간에 따라 변경될 수 있고, Display 특성 및 레이블 태그 도우미의 조합은 사용되는 모든 곳에서 Display을 적용합니다.The intended display name might change over time, and the combination of Display attribute and Label Tag Helper will apply the Display everywhere it's used.

  • 소스 코드의 간단한 태그Less markup in source code

  • 모델 속성을 사용하는 강력한 형식화입니다.Strong typing with the model property.

예제:Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class SimpleViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }
    }
}

@model SimpleViewModel

<form asp-controller="Demo" asp-action="RegisterLabel" method="post">
    <label asp-for="Email"></label>
    <input asp-for="Email" /> <br />
</form>

다음 HTML이 <label> 요소에 생성됩니다.The following HTML is generated for the <label> element:

<label for="Email">Email Address</label>

레이블 태그 도우미는 "이메일"의 for 특성 값을 생성했습니다. 이 값은 <input> 요소와 연결된 ID입니다.The Label Tag Helper generated the for attribute value of "Email", which is the ID associated with the <input> element. 태그 도우미는 일관된 idfor 요소를 제대로 연결할 수 있도록 생성합니다.The Tag Helpers generate consistent id and for elements so they can be correctly associated. 이 샘플의 캡션은 Display 특성에서 제공됩니다.The caption in this sample comes from the Display attribute. 모델에 Display 특성이 포함되지 않는 경우 캡션은 식의 속성 이름입니다.If the model didn't contain a Display attribute, the caption would be the property name of the expression.

유효성 검사 태그 도우미The Validation Tag Helpers

두 개의 유효성 검사 태그 도우미가 있습니다.There are two Validation Tag Helpers. Validation Message Tag Helper(모델의 단일 속성에 대한 유효성 검사 메시지 표시) 및 Validation Summary Tag Helper(유효성 검사 오류의 요약 표시)입니다.The Validation Message Tag Helper (which displays a validation message for a single property on your model), and the Validation Summary Tag Helper (which displays a summary of validation errors). Input Tag Helper는 모델 클래스의 데이터 주석 특성에 따라 입력 요소에 HTML5 클라이언트 쪽 유효성 검사 특성을 추가합니다.The Input Tag Helper adds HTML5 client side validation attributes to input elements based on data annotation attributes on your model classes. 유효성 검사도 서버에서 수행됩니다.Validation is also performed on the server. 유효성 검사 태그 도우미는 유효성 검사 오류가 발생하는 경우 이러한 오류 메시지를 표시합니다.The Validation Tag Helper displays these error messages when a validation error occurs.

유효성 검사 메시지 태그 도우미The Validation Message Tag Helper

  • HTML5 data-valmsg-for="property" 특성을 범위 요소에 추가합니다. 그러면 지정된 모델 속성의 입력 필드에서 유효성 검사 오류 메시지를 표시합니다.Adds the HTML5 data-valmsg-for="property" attribute to the span element, which attaches the validation error messages on the input field of the specified model property. 클라이언트 쪽 유효성 검사 오류가 발생할 때 jQuery<span> 요소에서 오류 메시지를 표시합니다.When a client side validation error occurs, jQuery displays the error message in the <span> element.

  • 유효성 검사도 서버에서 수행됩니다.Validation also takes place on the server. 클라이언트는 JavaScript를 사용하지 않도록 설정할 수 있고 일부 유효성 검사는 서버 쪽에서만 수행될 수 있습니다.Clients may have JavaScript disabled and some validation can only be done on the server side.

  • HTML 도우미 대안: Html.ValidationMessageForHTML Helper alternative: Html.ValidationMessageFor

Validation Message Tag Helper는 HTML 범위 요소에서 asp-validation-for 특성과 함께 사용됩니다.The Validation Message Tag Helper is used with the asp-validation-for attribute on a HTML span element.

<span asp-validation-for="Email"></span>

유효성 검사 메시지 태그 도우미는 다음 HTML을 생성합니다.The Validation Message Tag Helper will generate the following HTML:

<span class="field-validation-valid"
  data-valmsg-for="Email"
  data-valmsg-replace="true"></span>

일반적으로 동일한 속성에서 Input 태그 도우미 이후에 Validation Message Tag Helper를 사용합니다.You generally use the Validation Message Tag Helper after an Input Tag Helper for the same property. 이렇게 하면 오류가 발생하는 입력 주변에서 유효성 검사 오류 메시지가 표시됩니다.Doing so displays any validation error messages near the input that caused the error.

참고

클라이언트 쪽 유효성 검사 대신 올바른 JavaScript 및 jQuery 스크립트 참조를 사용하는 보기가 있어야 합니다.You must have a view with the correct JavaScript and jQuery script references in place for client side validation. 자세한 내용은 모델 유효성 검사를 참조하세요.See Model Validation for more information.

서버 쪽 유효성 검사 오류가 발생하는 경우(예: 사용자 지정 서버 쪽 유효성 검사 또는 클라이언트 쪽 유효성 검사를 사용하지 않는 경우) MVC는 해당 오류 메시지를 <span> 요소의 본문으로 배치합니다.When a server side validation error occurs (for example when you have custom server side validation or client-side validation is disabled), MVC places that error message as the body of the <span> element.

<span class="field-validation-error" data-valmsg-for="Email"
            data-valmsg-replace="true">
   The Email Address field is required.
</span>

유효성 검사 요약 태그 도우미The Validation Summary Tag Helper

  • asp-validation-summary 특성이 있는 <div> 요소를 대상으로 지정합니다.Targets <div> elements with the asp-validation-summary attribute

  • HTML 도우미 대안: @Html.ValidationSummaryHTML Helper alternative: @Html.ValidationSummary

Validation Summary Tag Helper는 유효성 검사 메시지의 요약 정보를 표시하는 데 사용됩니다.The Validation Summary Tag Helper is used to display a summary of validation messages. asp-validation-summary 특성 값은 다음 중 하나일 수 있습니다.The asp-validation-summary attribute value can be any of the following:

asp-validation-summaryasp-validation-summary 표시되는 유효성 검사 메시지Validation messages displayed
ValidationSummary.AllValidationSummary.All 속성 및 모델 수준Property and model level
ValidationSummary.ModelOnlyValidationSummary.ModelOnly 모델Model
ValidationSummary.NoneValidationSummary.None 없음None

샘플Sample

다음 예제에서 데이터 모델은 DataAnnotation 특성으로 데코레이팅됩니다. 그러면 <input> 요소에 대한 유효성 검사 오류 메시지를 생성합니다.In the following example, the data model is decorated with DataAnnotation attributes, which generates validation error messages on the <input> element. 유효성 검사 오류가 발생하는 경우 유효성 검사 태그 도우미는 다음 오류 메시지를 표시합니다.When a validation error occurs, the Validation Tag Helper displays the error message:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterValidation" method="post">
    <div asp-validation-summary="ModelOnly"></div>
    Email:  <input asp-for="Email" /> <br />
    <span asp-validation-for="Email"></span><br />
    Password: <input asp-for="Password" /><br />
    <span asp-validation-for="Password"></span><br />
    <button type="submit">Register</button>
</form>

생성된 HTML(모델은 유효한 경우):The generated HTML (when the model is valid):

<form action="/DemoReg/Register" method="post">
  <div class="validation-summary-valid" data-valmsg-summary="true">
  <ul><li style="display:none"></li></ul></div>
  Email:  <input name="Email" id="Email" type="email" value=""
   data-val-required="The Email field is required."
   data-val-email="The Email field is not a valid email address."
   data-val="true"> <br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Email"></span><br>
  Password: <input name="Password" id="Password" type="password"
   data-val-required="The Password field is required." data-val="true"><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Password"></span><br>
  <button type="submit">Register</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
</form>

선택 태그 도우미The Select Tag Helper

  • 모델의 속성에 대한 선택 및 관련된 옵션 요소를 생성합니다.Generates select and associated option elements for properties of your model.

  • HTML 도우미 대안 Html.DropDownListForHtml.ListBoxFor가 있습니다.Has an HTML Helper alternative Html.DropDownListFor and Html.ListBoxFor

Select Tag Helper asp-for선택 요소에 대한 모델 속성 이름을 지정하고 asp-items옵션 요소를 지정합니다.The Select Tag Helper asp-for specifies the model property name for the select element and asp-items specifies the option elements. 예:For example:

<select asp-for="Country" asp-items="Model.Countries"></select> 

예제:Sample:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace FormsTagHelper.ViewModels
{
    public class CountryViewModel
    {
        public string Country { get; set; }

        public List<SelectListItem> Countries { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "MX", Text = "Mexico" },
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "US", Text = "USA"  },
        };
    }
}

Index 메서드는 CountryViewModel를 초기화하고, 선택한 국가를 설정하고, Index 보기에 전달합니다.The Index method initializes the CountryViewModel, sets the selected country and passes it to the Index view.

public IActionResult IndexOption(int id)
{
    var model = new CountryViewModel();
    model.Country = "CA";
    return View(model);
}

HTTP POST Index 메서드는 선택 항목을 표시합니다.The HTTP POST Index method displays the selection:

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(CountryViewModel model)
{
    if (ModelState.IsValid)
    {
        var msg = model.Country +  " selected";
        return RedirectToAction("IndexSuccess", new { message = msg});
    }

    // If we got this far, something failed; redisplay form.
    return View(model);
}

Index 보기:The Index view:

@model CountryViewModel

<form asp-controller="Home" asp-action="Index" method="post">
    <select asp-for="Country" asp-items="Model.Countries"></select> 
    <br /><button type="submit">Register</button>
</form>

다음 HTML을 생성합니다("CA"를 선택함).Which generates the following HTML (with "CA" selected):

<form method="post" action="/">
     <select id="Country" name="Country">
       <option value="MX">Mexico</option>
       <option selected="selected" value="CA">Canada</option>
       <option value="US">USA</option>
     </select>
       <br /><button type="submit">Register</button>
     <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
   </form>

참고

선택 태그 도우미와 함께 ViewBag 또는 ViewData를 사용하는 것이 좋습니다.We don't recommend using ViewBag or ViewData with the Select Tag Helper. 보기 모델은 일반적으로 더 강력하고 문제가 적은 방식으로 MVC 메타데이터를 제공합니다.A view model is more robust at providing MVC metadata and generally less problematic.

asp-for 특성 값은 특별한 경우이며 다른 태그 도우미 특성(예: asp-items)과 달리 Model 접두사를 필요로 하지 않습니다.The asp-for attribute value is a special case and doesn't require a Model prefix, the other Tag Helper attributes do (such as asp-items)

<select asp-for="Country" asp-items="Model.Countries"></select> 

열거형 바인딩Enum binding

enum 속성과 함께 <select>를 사용하고 enum 값에서 SelectListItem 요소를 생성하는 것이 편리합니다.It's often convenient to use <select> with an enum property and generate the SelectListItem elements from the enum values.

예제:Sample:

    public class CountryEnumViewModel
    {
        public CountryEnum EnumCountry { get; set; }
    }
}
using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public enum CountryEnum
    {
        [Display(Name = "United Mexican States")]
        Mexico,
        [Display(Name = "United States of America")]
        USA,
        Canada,
        France,
        Germany,
        Spain
    }
}

GetEnumSelectList 메서드는 열거형에 대해 SelectList 개체를 생성합니다.The GetEnumSelectList method generates a SelectList object for an enum.

@model CountryEnumViewModel

<form asp-controller="Home" asp-action="IndexEnum" method="post">
    <select asp-for="EnumCountry" 
            asp-items="Html.GetEnumSelectList<CountryEnum>()"> >
    </select> 
    <br /><button type="submit">Register</button>
</form>

Display 특성으로 열거자 목록을 데코레이트하여 보다 풍부한 UI를 사용할 수 있습니다.You can decorate your enumerator list with the Display attribute to get a richer UI:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public enum CountryEnum
    {
        [Display(Name = "United Mexican States")]
        Mexico,
        [Display(Name = "United States of America")]
        USA,
        Canada,
        France,
        Germany,
        Spain
    }
}

다음 HTML이 생성됩니다.The following HTML is generated:

  <form method="post" action="/Home/IndexEnum">
         <select data-val="true" data-val-required="The EnumCountry field is required."
                 id="EnumCountry" name="EnumCountry">
             <option value="0">United Mexican States</option>
             <option value="1">United States of America</option>
             <option value="2">Canada</option>
             <option value="3">France</option>
             <option value="4">Germany</option>
             <option selected="selected" value="5">Spain</option>
         </select>
         <br /><button type="submit">Register</button>
         <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
    </form>

옵션 그룹Option Group

보기 모델에 하나 이상의 SelectListGroup 개체가 포함되는 경우 HTML <optgroup> 요소가 생성됩니다.The HTML <optgroup> element is generated when the view model contains one or more SelectListGroup objects.

CountryViewModelGroupSelectListItem 요소를 "북아메리카" 및 "유럽" 그룹으로 그룹화합니다.The CountryViewModelGroup groups the SelectListItem elements into the "North America" and "Europe" groups:

public class CountryViewModelGroup
{
    public CountryViewModelGroup()
    {
        var NorthAmericaGroup = new SelectListGroup { Name = "North America" };
        var EuropeGroup = new SelectListGroup { Name = "Europe" };

        Countries = new List<SelectListItem>
        {
            new SelectListItem
            {
                Value = "MEX",
                Text = "Mexico",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "CAN",
                Text = "Canada",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "US",
                Text = "USA",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "FR",
                Text = "France",
                Group = EuropeGroup
            },
            new SelectListItem
            {
                Value = "ES",
                Text = "Spain",
                Group = EuropeGroup
            },
            new SelectListItem
            {
                Value = "DE",
                Text = "Germany",
                Group = EuropeGroup
            }
      };
    }

    public string Country { get; set; }

    public List<SelectListItem> Countries { get; }

두 개의 그룹은 다음과 같습니다.The two groups are shown below:

옵션 그룹 예제

생성된 코드:The generated HTML:

 <form method="post" action="/Home/IndexGroup">
      <select id="Country" name="Country">
          <optgroup label="North America">
              <option value="MEX">Mexico</option>
              <option value="CAN">Canada</option>
              <option value="US">USA</option>
          </optgroup>
          <optgroup label="Europe">
              <option value="FR">France</option>
              <option value="ES">Spain</option>
              <option value="DE">Germany</option>
          </optgroup>
      </select>
      <br /><button type="submit">Register</button>
      <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
 </form>

다중 선택Multiple select

asp-for 특성에 지정된 속성이 IEnumerable인 경우 태그 선택 도우미는 multiple = "multiple" 특성을 자동으로 생성합니다.The Select Tag Helper will automatically generate the multiple = "multiple" attribute if the property specified in the asp-for attribute is an IEnumerable. 예를 들어, 다음과 같은 모델을 가정합니다.For example, given the following model:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace FormsTagHelper.ViewModels
{
    public class CountryViewModelIEnumerable
    {
        public IEnumerable<string> CountryCodes { get; set; }

        public List<SelectListItem> Countries { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "MX", Text = "Mexico" },
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "US", Text = "USA"    },
            new SelectListItem { Value = "FR", Text = "France" },
            new SelectListItem { Value = "ES", Text = "Spain"  },
            new SelectListItem { Value = "DE", Text = "Germany"}
         };
    }
}

다음 보기에서:With the following view:

@model CountryViewModelIEnumerable

<form asp-controller="Home" asp-action="IndexMultiSelect" method="post">
    <select asp-for="CountryCodes" asp-items="Model.Countries"></select> 
    <br /><button type="submit">Register</button>
</form>

다음과 같은 HTML을 생성합니다.Generates the following HTML:

<form method="post" action="/Home/IndexMultiSelect">
    <select id="CountryCodes"
    multiple="multiple"
    name="CountryCodes"><option value="MX">Mexico</option>
<option value="CA">Canada</option>
<option value="US">USA</option>
<option value="FR">France</option>
<option value="ES">Spain</option>
<option value="DE">Germany</option>
</select>
    <br /><button type="submit">Register</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
</form>

선택 영역 없음No selection

여러 페이지에서 "지정 안 됨" 옵션을 사용하는 경우 HTML의 반복을 제거하는 템플릿을 만들 수 있습니다.If you find yourself using the "not specified" option in multiple pages, you can create a template to eliminate repeating the HTML:

@model CountryViewModel

<form asp-controller="Home" asp-action="IndexEmpty" method="post">
    @Html.EditorForModel()
    <br /><button type="submit">Register</button>
</form>

Views/Shared/EditorTemplates/CountryViewModel.cshtml 템플릿:The Views/Shared/EditorTemplates/CountryViewModel.cshtml template:

@model CountryViewModel

<select asp-for="Country" asp-items="Model.Countries">
    <option value="">--none--</option>
</select>

HTML <option> 요소를 추가하는 작업은 선택 영역 없음 사례로 제한되지 않습니다.Adding HTML <option> elements isn't limited to the No selection case. 예를 들어 다음과 같은 보기 및 작업 메서드는 위의 코드와 유사한 HTML을 생성합니다.For example, the following view and action method will generate HTML similar to the code above:

public IActionResult IndexOption(int id)
{
    var model = new CountryViewModel();
    model.Country = "CA";
    return View(model);
}
@model CountryViewModel

<form asp-controller="Home" asp-action="IndexEmpty" method="post">
    <select asp-for="Country">
        <option value="">&lt;none&gt;</option>
        <option value="MX">Mexico</option>
        <option value="CA">Canada</option>
        <option value="US">USA</option>
    </select> 
    <br /><button type="submit">Register</button>
</form>

현재 Country 값에 따라 올바른 <option> 요소가 선택됩니다(selected="selected" 특성 포함).The correct <option> element will be selected ( contain the selected="selected" attribute) depending on the current Country value.

 <form method="post" action="/Home/IndexEmpty">
      <select id="Country" name="Country">
          <option value="">&lt;none&gt;</option>
          <option value="MX">Mexico</option>
          <option value="CA" selected="selected">Canada</option>
          <option value="US">USA</option>
      </select>
      <br /><button type="submit">Register</button>
   <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
 </form>

추가 자료Additional resources