ASP.NET Core のフォームのタグ ヘルパーTag Helpers in forms in ASP.NET Core

作成者: Rick AndersonN. Taylor MullenDave PaquetteJerrie PelserBy Rick Anderson, N. Taylor Mullen, Dave Paquette, and Jerrie Pelser

このドキュメントでは、フォームとフォームでよく使用される HTML 要素の使用方法について説明します。This document demonstrates working with Forms and the HTML elements commonly used on a Form. HTML の Form 要素には、Web アプリケーションからサーバーにデータをポスト バックするために使用する主要なメカニズムがあります。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:

  • <FORM> action MVC コントローラーアクションまたは名前付きルートの HTML 属性値を生成します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.BeginForm および Html.BeginRouteFormrouteValues パラメーターを指定すると、同様の機能が提供されます。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>

Views/Account フォルダー (個々のユーザー アカウントを使用して新しい Web アプリケーションを作成するときに生成されるフォルダー) のビューの多くには、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 Form Action Tag Helper

フォーム アクション タグ ヘルパーにより、生成された<button ...> または <input type="image" ...> タグ上に formaction 属性が生成されます。The Form Action Tag Helper generates the formaction attribute on the generated <button ...> or <input type="image" ...> tag. formaction 属性では、フォームがそのデータを送信する場所を制御します。The formaction attribute controls where a form submits its data. <input>型および要素の要素にバインドさ image <button> れます。It binds to <input> elements of type image and <button> elements. フォーム アクション タグ ヘルパーにより、AnchorTagHelper の asp- 属性を複数使うことが可能になり、対応する要素に向けて何の formaction リンクが生成されるかを制御できます。The Form Action Tag Helper enables the usage of several AnchorTagHelper asp- attributes to control what formaction link is generated for the corresponding element.

formaction の値を制御するためにサポートされている AnchorTagHelper 属性:Supported AnchorTagHelper attributes to control the value of formaction:

属性Attribute [説明]Description
asp-controllerasp-controller コントローラーの名前。The name of the controller.
asp-actionasp-action アクション メソッドの名前です。The name of the action method.
asp-areaasp-area 領域の名前です。The name of the area.
asp-pageasp-page ページの名前 Razor 。The name of the Razor page.
asp-page-handlerasp-page-handler ページハンドラーの名前 Razor 。The name of the Razor page handler.
asp-routeasp-route ルートの名前です。The name of the route.
asp-route-{value}asp-route-{value} 単一の URL ルート値です。A single URL route value. たとえば、asp-route-id="1234" のようにします。For example, asp-route-id="1234".
asp-all-route-dataasp-all-route-data すべてのルート値です。All route values.
asp-fragmentasp-fragment URL フラグメントです。The URL fragment.

コントローラーに送信する例Submit to controller example

次のマークアップでは、入力またはボタンが選択されたときに、HomeControllerIndex アクションにフォームを送信します。The following markup submits the form to the Index action of HomeController when the input or button are selected:

<form method="post">
    <button asp-controller="Home" asp-action="Index">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-controller="Home" 
                                asp-action="Index">
</form>

以前のマークアップでは次の HTML が生成されます。The previous markup generates following HTML:

<form method="post">
    <button formaction="/Home">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home">
</form>

ページに送信する例Submit to page example

次のマークアップは、フォームをページに送信し About Razor ます。The following markup submits the form to the About Razor Page:

<form method="post">
    <button asp-page="About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-page="About">
</form>

以前のマークアップでは次の HTML が生成されます。The previous markup generates following HTML:

<form method="post">
    <button formaction="/About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/About">
</form>

ルートに送信する例Submit to route example

/Home/Test エンドポイントを検討します。Consider the /Home/Test endpoint:

public class HomeController : Controller
{
    [Route("/Home/Test", Name = "Custom")]
    public string Test()
    {
        return "This is the test page";
    }
}

次のマークアップでは、/Home/Test エンドポイントにフォームを送信します。The following markup submits the form to the /Home/Test endpoint.

<form method="post">
    <button asp-route="Custom">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-route="Custom">
</form>

以前のマークアップでは次の HTML が生成されます。The previous markup generates following HTML:

<form method="post">
    <button formaction="/Home/Test">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home/Test">
</form>

入力タグ ヘルパーThe Input Tag Helper

入力タグヘルパーは、 <input> razor ビューのモデル式に HTML 要素をバインドします。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 属性で指定された式の名前の id および name 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.TextBoxFor および Html.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"
StringString type="text"type="text"
DateTimeDateTime type="datetime-local"type="datetime-local"
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>

Email および Password プロパティに適用されたデータ注釈によって、モデルに関するメタデータが生成されます。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" 。ここで、rule は検証規則の名前 (、、など 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-maxlength-max="1024" など、ルールに関する追加の詳細情報を提供するフォームの属性 data-val-ruleName-argumentName="argumentValue" もあります。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.TextBoxHtml.TextBoxForHtml.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" は、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. の前に移動できます。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">

i の値が 23 の場合、asp-for="CollectionProperty[23].Member" はコレクションのプロパティを使用して、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>

Address.AddressLine1 に対して次の HTML が生成されます。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>
*@

値を asp-for または Html.DisplayFor と同じコンテキストで使用する場合は、可能であれば foreach を使用する必要があります。foreach should be used if possible when the value is going to be used in an asp-for or Html.DisplayFor equivalent context. 一般に、反復子を割り当てる必要がないため、(使用可能なシナリオでは) for の方が foreach よりも優れています。ただし、LINQ 式内でのインデクサーの評価はコストが高くなる可能性があるため、最小限に抑える必要があります。In general, for is better than foreach (if the scenario allows it) because it doesn't need to allocate an enumerator; however, 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.

  • id name 要素の属性と属性、およびモデルからのデータ検証属性を生成し <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 <label> 式名の要素にラベルのキャプションと属性を生成しますGenerates the label caption and for attribute on a <label> element for an expression name

  • HTML ヘルパーの代替: Html.LabelForHTML 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>

<label> 要素に対して次の HTML が生成されます。The following HTML is generated for the <label> element:

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

ラベル タグ ヘルパーから "Email" の属性値 for が生成されました。これは、<input> に関連付けられた ID です。The Label Tag Helper generated the for attribute value of "Email", which is the ID associated with the <input> element. タグ ヘルパーでは一貫性のある id および for 要素が生成されるので、正しく関連付けられます。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

2 つの検証タグ ヘルパーがあります。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 のクライアント側検証属性を input 要素に追加します。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" 属性を span 要素に追加します。これによって、指定されたモデル プロパティの入力フィールドに検証エラー メッセージがアタッチされます。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 の span 要素で 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 has 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

  • モデルのプロパティについて、select 要素と、関連する option 要素を生成します。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-forselect 要素のモデル プロパティ名を指定し、asp-itemsoption 要素を指定します。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 Index()
{
    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 バインディングEnum binding

<select>enum プロパティと組み合わせて使用し、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>

より高機能な UI にするために、列挙子リストを Display 属性でマークできます。You can mark 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> 要素は、ビューモデルに1つ以上のオブジェクトが含まれている場合に生成され SelectListGroup ます。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; }

この 2 つのグループを次に示します。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 の場合、選択タグ ヘルパーは 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 IndexNone()
{
    var model = new CountryViewModel();
    model.Insert(0, new SelectListItem("<none>", ""));
    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 値に応じて、(selected="selected" 属性を含む) 正しい <option> 要素が選択されます。The correct <option> element will be selected ( contain the selected="selected" attribute) depending on the current Country value.

public IActionResult IndexOption(int id)
{
    var model = new CountryViewModel();
    model.Country = "CA";
    return View(model);
}
 <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