태그 도우미를 사용 하 여 폼에 ASP.NET Core 소개Introduction to using tag helpers in forms in ASP.NET Core

Rick Anderson, Dave Paquette, 및 Jerrie 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 do not replace HTML Helpers and there is not a Tag Helper for each HTML Helper. 존재 하는 HTML 도우미 대신 경우 다룹니다.When an HTML Helper alternative exists, it is mentioned.

<a name=my-asp-route-param-ref-label>

Form 태그 도우미The Form Tag Helper

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

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

  • 에서는 오류가 발생 하는 숨겨진 요청 확인 토큰 교차 사이트 요청 위조를 방지 하기 위해 (함께 사용할 경우의 [ValidateAntiForgeryToken] HTTP Post 작업 메서드에 특성)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. routeValues 매개 변수를 Html.BeginFormHtml.BeginRouteForm 유사한 기능을 제공 합니다.The routeValues parameters to Html.BeginForm and Html.BeginRouteForm provide similar functionality.

  • 에 HTML 도우미 대신 Html.BeginFormHtml.BeginRouteFormHas an HTML Helper alternative Html.BeginForm and Html.BeginRouteForm

예제:Sample:

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

위의 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 런타임에서 생성 된 action Form 태그 도우미 특성에서 특성 값 asp-controllerasp-action합니다.The MVC runtime generates the action attribute value from the Form Tag Helper attributes asp-controller and asp-action. Form 태그 도우미도 숨겨진 생성 요청 확인 토큰 교차 사이트 요청 위조를 방지 하기 위해 (함께 사용할 경우의 [ValidateAntiForgeryToken] HTTP Post 작업 메서드에 특성).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 폼 교차 사이트 요청 위조 로부터 보호 하는 것은 어려운, Form 태그 도우미를이 서비스를 제공 합니다.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-경로-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 <입력 > 요소 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:

  • 생성 된 idname HTML 특성에 지정 된 식 이름에 대 한는 asp-for 특성입니다.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 특성 값이 지정 된 경우Will not overwrite the HTML type attribute value when one is specified

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

  • 에 HTML 도우미 기능이와 겹칠 Html.TextBoxForHtml.EditorFor합니다.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 설정 하는 HTML 태그 도우미 type 특성의.NET 유형을 기반으로 합니다.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 형식이 "checkbox" =type=”checkbox”
문자열String 형식 = "text"type=”text”
DateTimeDateTime 형식 = "datetime"type=”datetime”
ByteByte 형식 = "number"type=”number”
IntInt 형식 = "number"type=”number”
Single, DoubleSingle, Double 형식 = "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] 형식 = "email"type=”email”
[Url][Url] 형식 = "url"type=”url”
[HiddenInput][HiddenInput] 형식 = "hidden"type=”hidden”
[Phone][Phone] 형식 = "전화"type=”tel”
[DataType(DataType.Password)][DataType(DataType.Password)] 형식 = "password"type=”password”
[DataType(DataType.Date)][DataType(DataType.Date)] 형식 = "date"type=”date”
[DataType(DataType.Time)][DataType(DataType.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 e-mail 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 is 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 will not. Html.EditorHtml.EditorFor 컬렉션, 복잡 한 개체 및 템플릿; 처리 된 입력 태그 도우미는 그렇지 않습니다.Html.Editor and Html.EditorFor handle collections, complex objects and templates; the Input Tag Helper does not. 입력 태그 도우미 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() 특수 ViewDataDictionary 라는 항목 htmlAttributes 자신의 기본 서식 파일을 실행 합니다.@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" 유사 하 게 처리 되는 htmlAttributes 같은 도우미 입력에 전달 된 개체 @Html.TextBox()합니다.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" 동일한 이름으로 생성 asp-for="CollectionProperty[i].Member"i23합니다.With collection properties, asp-for="CollectionProperty[23].Member" generates the same name as asp-for="CollectionProperty[i].Member" when i has the value 23.

뷰 모델의 속성 경로 사용 하 여 자식 속성을 탐색할 수 있습니다.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.

Textarea 태그 도우미The Textarea Tag Helper

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

  • 생성 된 idname 특성 및에 대 한 모델에서 데이터 유효성 검사 특성은 <textarea > 요소입니다.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.LabelFor합니다.HTML Helper alternative: Html.LabelFor.

Label Tag Helper 순수 HTML label 요소를 통해 다음과 같은 이점을 제공 합니다.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 와 연결 된 id는 "Email"의 특성 값의 <input> 요소입니다.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 와 함께 사용 되는 asp-validation-for 특성에는 HTML 걸쳐 요소입니다.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>

일반적으로 사용 된 Validation Message Tag Helper 후는 Input 동일한 속성에 대 한 태그 도우미입니다.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

  • 대상 <div> 사용 하 여 요소는 asp-validation-summary 특성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 유효성 검사 요약asp-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 e-mail 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>

Select 태그 도우미The Select Tag Helper

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

  • 에 HTML 도우미 대신 Html.DropDownListForHtml.ListBoxForHas 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>

("CA" 선택)로 다음 HTML을 생성 합니다.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 do not 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 특성 값은 특별 한 경우 있으며 필요 하지 않습니다는 Model 접두사, 다른 태그 도우미 특성 안 함 (예: asp-items)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 바인딩Enum binding

사용 하기 어려운 방식은 <select>enum 속성을 생성 하 고는 SelectListItem 에서 요소를는 enum 값.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

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

CountryViewModelGroup 그룹은 SelectListItem "North America" 및 "Europe" 그룹으로 요소: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:

옵션 그룹 예제

생성 된 HTML: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합니다.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 <옵션 > 요소에 국한 되지 않음는 선택 영역이 없는 대/소문자입니다.Adding HTML <option> elements is not 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>

올바른 <option> 요소가 선택 됩니다 (포함 된 selected="selected" 특성) 현재에 따라 Country 값입니다.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