ASP.NET Core のタグ ヘルパーの概要Introduction to Tag Helpers in ASP.NET Core

作成者: Rick AndersonBy Rick Anderson

タグ ヘルパーは?What are Tag Helpers?

タグ ヘルパーでは、サーバー側コードを作成して、Razor ファイルでの HTML 要素のレンダリングに参加を有効にします。Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. たとえば、組み込みImageTagHelperイメージ名にバージョン番号を追加することができます。For example, the built-in ImageTagHelper can append a version number to the image name. イメージが変更されるたびに、サーバーは、クライアント (古いキャッシュされた画像) ではなく現在のイメージを取得することが保証されますので、イメージの新しい一意のバージョンを生成します。Whenever the image changes, the server generates a new unique version for the image, so clients are guaranteed to get the current image (instead of a stale cached image). これは、フォーム、リンク、読み込みの資産および詳細 - およびさらに高いで利用できるパブリックの GitHub リポジトリとして NuGet パッケージの作成などの一般的なタスクの多くの組み込みタグ ヘルパー。There are many built-in Tag Helpers for common tasks - such as creating forms, links, loading assets and more - and even more available in public GitHub repositories and as NuGet packages. タグ ヘルパーは、C# の場合は、作成し、要素名、属性名、または親タグに基づく HTML 要素を対象にします。Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. たとえば、組み込みLabelTagHelperHTML を対象にできます<label>要素ときに、LabelTagHelper属性が適用されます。For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. 慣れている場合HTML ヘルパー、タグ ヘルパーは、Razor ビューでの HTML と c# の間で明示的な遷移を削減します。If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. 多くの場合、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 ヘルパーと比較して詳細の相違点について説明します。Tag Helpers compared to HTML Helpers explains the differences in more detail.

タグ ヘルパーの提供What Tag Helpers provide

HTML に適した開発エクスペリエンス大部分 Razor マークアップ タグ ヘルパーを使用して次のように標準 HTML。An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. HTML と CSS/JavaScript に精通フロント エンドのデザイナーは、C# の場合は、Razor 構文を習得しなくても、Razor を編集できます。Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

HTML および Razor マークアップを作成するための豊富な IntelliSense 環境これは、HTML ヘルパー、Razor ビューのマークアップのサーバー側で作成する前のアプローチをコントラストをシャープにします。A rich IntelliSense environment for creating HTML and Razor markup This is in sharp contrast to HTML Helpers, the previous approach to server-side creation of markup in Razor views. タグ ヘルパーの HTML ヘルパーと比較して詳細の相違点について説明します。Tag Helpers compared to HTML Helpers explains the differences in more detail. タグ ヘルパーの IntelliSense サポートIntelliSense 環境について説明します。IntelliSense support for Tag Helpers explains the IntelliSense environment. Razor の c# の構文の使用経験が偶数の開発者は、c# Razor マークアップを記述するよりもタグ ヘルパーを使用して生産性を向上します。Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

作成する方法をより生産的かつ生成できるより堅牢で信頼性が高く、およびサーバーでのみ利用可能な情報を使用してコードを保守しやすいたとえば、従来イメージを更新する方法の信念でしたを変更すると、イメージの名前を変更するにはイメージです。A way to make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server For example, historically the mantra on updating images was to change the name of the image when you change the image. パフォーマンス上の理由から、積極的にイメージをキャッシュする必要があり、クライアントの古いコピーを取得する危険性が画像の名前を変更すると、しない限り、します。Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. 従来、イメージが編集された後に名前が変更されましたし、web アプリのイメージへの参照の更新が必要です。Historically, after an image was edited, the name had to be changed and each reference to the image in the web app needed to be updated. これは、処理を要するもエラーになります (する可能性がありますの参照を誤って間違った文字列などを入力します。) が発生しやすいが非常に労力だけでなく組み込みImageTagHelperできますこの処理を自動的にします。Not only is this very labor intensive, it's also error prone (you could miss a reference, accidentally enter the wrong string, etc.) The built-in ImageTagHelper can do this for you automatically. ImageTagHelperバージョンに追加することができます、イメージが変更されるたびに、サーバーを自動的に生成イメージの一意の新しいバージョンようにをイメージ名番号。The ImageTagHelper can append a version number to the image name, so whenever the image changes, the server automatically generates a new unique version for the image. クライアントを現在のイメージを取得することが保証されます。Clients are guaranteed to get the current image. 使用してこの堅牢性と人件費の節約は本質的には無料、ImageTagHelperです。This robustness and labor savings comes essentially free by using the ImageTagHelper.

組み込みタグ ヘルパーのほとんどは、既存の HTML 要素をターゲットし、要素のサーバー側の属性を指定します。Most of the built-in Tag Helpers target existing HTML elements and provide server-side attributes for the element. たとえば、<input>要素内のビューの多くで使用されて、ビュー/アカウントフォルダーが含まれています、asp-for属性は、レンダリングされる HTML に指定されたモデルのプロパティの名前を抽出します。For example, the <input> element used in many of the views in the Views/Account folder contains the asp-for attribute, which extracts the name of the specified model property into the rendered HTML. 次の Razor マークアップ。The following Razor markup:

<label asp-for="Email"></label>

次の HTML を生成します。Generates the following HTML:

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

asp-for属性を使用可能で、Forプロパティに、LabelTagHelperです。The asp-for attribute is made available by the For property in the LabelTagHelper. 参照してくださいタグ ヘルパーのオーサリング詳細についてはします。See Authoring Tag Helpers for more information.

タグ ヘルパーのスコープを管理します。Managing Tag Helper scope

タグ ヘルパーのスコープがの組み合わせによって制御される@addTagHelper@removeTagHelper、および"!"オプトアウト文字です。Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

@addTagHelperタグ ヘルパーを使用可能します。@addTagHelper makes Tag Helpers available

という名前の新しい ASP.NET Core web アプリを作成するかどうかはAuthoringTagHelpers (認証なしで)、次Views/_ViewImports.cshtmlファイルは、プロジェクトに追加されます。If you create a new ASP.NET Core web app named AuthoringTagHelpers (with no authentication), the following Views/_ViewImports.cshtml file will be added to your project:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

@addTagHelperディレクティブにより、タグ ヘルパーのビューに表示します。The @addTagHelper directive makes Tag Helpers available to the view. ここでは、ファイルの表示はViews/_ViewImports.cshtml、内のすべてのビュー ファイルによって継承される既定で、ビューフォルダーとサブディレクトリ; タグ ヘルパーを使用できるようにします。In this case, the view file is Views/_ViewImports.cshtml, which by default is inherited by all view files in the Views folder and sub-directories; making Tag Helpers available. 上記のコードでは、ワイルドカードの構文を使用して ("*") ことを指定する、指定したアセンブリ内のすべてのタグ ヘルパー (Microsoft.AspNetCore.Mvc.TagHelpers) できるように、すべてのファイルの表示になります、ビューディレクトリまたはサブディレクトリ。The code above uses the wildcard syntax ("*") to specify that all Tag Helpers in the specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to every view file in the Views directory or sub-directory. 最初のパラメーターの後に@addTagHelperを読み込むタグ ヘルパーを指定します (を使用して"*"すべてのタグ ヘルパーの)、し"Microsoft.AspNetCore.Mvc.TagHelpers"の 2 番目のパラメーターは、タグ ヘルパーを含むアセンブリを指定します。The first parameter after @addTagHelper specifies the Tag Helpers to load (we are using "*" for all Tag Helpers), and the second parameter "Microsoft.AspNetCore.Mvc.TagHelpers" specifies the assembly containing the Tag Helpers. Microsoft.AspNetCore.Mvc.TagHelpers組み込みの ASP.NET Core タグ ヘルパーのアセンブリです。Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

このプロジェクトでタグ ヘルパーのすべてを公開するために (という名前のアセンブリを作成するAuthoringTagHelpers)、以下を使用するとします。To expose all of the Tag Helpers in this project (which creates an assembly named AuthoringTagHelpers), you would use the following:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

プロジェクトが含まれている場合、EmailTagHelper既定の名前空間 (AuthoringTagHelpers.TagHelpers.EmailTagHelper)、タグ ヘルパーの完全修飾名 (FQN) を指定することができます。If your project contains an EmailTagHelper with the default namespace (AuthoringTagHelpers.TagHelpers.EmailTagHelper), you can provide the fully qualified name (FQN) of the Tag Helper:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

タグ ヘルパーに追加する、FQN を使用するビューを最初に追加する、FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper)、およびアセンブリ名では、(AuthoringTagHelpers)。To add a Tag Helper to a view using an FQN, you first add the FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), and then the assembly name (AuthoringTagHelpers). ほとんどの開発者が使用を好む、"*"ワイルドカードの構文。Most developers prefer to use the "*" wildcard syntax. ワイルドカードの構文では、ワイルドカード文字を挿入することができます"*"、FQN のサフィックスとして。The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. 表示されます、次のディレクティブのいずれかなど、 EmailTagHelper:For example, any of the following directives will bring in the EmailTagHelper:

@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers

前述のように、追加、@addTagHelperディレクティブをViews/_ViewImports.cshtmlファイル タグ ヘルパーに使用可能ですべてのファイルの表示、ビューディレクトリとサブディレクトリです。As mentioned previously, adding the @addTagHelper directive to the Views/_ViewImports.cshtml file makes the Tag Helper available to all view files in the Views directory and sub-directories. 使用することができます、@addTagHelperディレクティブでこれらのビューにタグ ヘルパーの公開にオプトインする場合に特定のビューはファイルです。You can use the @addTagHelper directive in specific view files if you want to opt-in to exposing the Tag Helper to only those views.

@removeTagHelperタグ ヘルパーを削除します。@removeTagHelper removes Tag Helpers

@removeTagHelper 、同じ 2 つのパラメーターとして@addTagHelper、既に追加されているタグ ヘルパーを削除します。The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. たとえば、@removeTagHelperビューから特定のビューを削除指定されたタグ ヘルパーに適用します。For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. 使用して@removeTagHelperで、 Views/Folder/_ViewImports.cshtmlファイルからすべてのビューの指定されたタグ ヘルパーの削除フォルダーです。Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder.

タグ ヘルパーのスコープを制御する、 _ViewImports.cshtmlファイルControlling Tag Helper scope with the _ViewImports.cshtml file

追加することができます、 _ViewImports.cshtmlエンジンがその両方のファイルのディレクティブを適用するビューの任意のフォルダーおよびビューとViews/_ViewImports.cshtmlファイル。You can add a _ViewImports.cshtml to any view folder, and the view engine applies the directives from both that file and the Views/_ViewImports.cshtml file. 場合は、空の追加Views/Home/_ViewImports.cshtmlファイルで、ホームビュー、あるは変更されないため、 _ViewImports.cshtmlファイルが加法です。If you added an empty Views/Home/_ViewImports.cshtml file for the Home views, there would be no change because the _ViewImports.cshtml file is additive. 任意@addTagHelperディレクティブを追加する、 Views/Home/_ViewImports.cshtmlファイル (既定値に含まれていないViews/_ViewImports.cshtmlファイル) が公開されますをビューには、そのタグ ヘルパーでのみ、ホームフォルダーです。Any @addTagHelper directives you add to the Views/Home/_ViewImports.cshtml file (that are not in the default Views/_ViewImports.cshtml file) would expose those Tag Helpers to views only in the Home folder.

個々 の要素を除外Opting out of individual elements

タグ ヘルパーのオプトアウト文字で、要素レベルでタグ ヘルパーを無効にすることができます ("!") です。You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). たとえば、Emailで検証が無効になっている、<span>タグ ヘルパーのオプトアウト文字。For example, Email validation is disabled in the <span> with the Tag Helper opt-out character:

<!span asp-validation-for="Email" class="text-danger"></!span>

開始タグと終了タグにタグ ヘルパーのオプトアウト文字を適用する必要があります。You must apply the Tag Helper opt-out character to the opening and closing tag. (Visual Studio エディターに自動的にオプトアウトに文字を追加、終了タグ開始タグに追加する場合)。(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). オプトアウト文字を追加した後、要素とタグ ヘルパー属性は印象的なフォントで表示されません。After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

使用して@tagHelperPrefixタグ ヘルパーの使用状況を明示するにはUsing @tagHelperPrefix to make Tag Helper usage explicit

@tagHelperPrefixディレクティブでは、タグ ヘルパーのサポートを有効にして、タグ ヘルパーの使用法を明確にするタグ プレフィックス文字列を指定することができます。The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. たとえば、次に示すマークアップを追加、 Views/_ViewImports.cshtmlファイル。For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

設定されているタグ ヘルパーのプレフィックス コード次の図、 th:、プレフィックスを使用して要素のみth:タグ ヘルパー (タグ ヘルパーが有効な要素がある印象的なフォント) をサポートします。In the code image below, the Tag Helper prefix is set to th:, so only those elements using the prefix th: support Tag Helpers (Tag Helper-enabled elements have a distinctive font). <label><input>要素タグ ヘルパーのプレフィックス、タグ ヘルパーに対応している、ときに、<span>要素はありません。The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element does not.

イメージ

適用される、同じ規則が階層@addTagHelperにも適用@tagHelperPrefixです。The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

タグ ヘルパーの IntelliSense のサポートIntelliSense support for Tag Helpers

Visual Studio で新しい ASP.NET web アプリを作成するときに、NuGet パッケージ"Microsoft.AspNetCore.Razor.Tools"を追加します。When you create a new ASP.NET web app in Visual Studio, it adds the NuGet package "Microsoft.AspNetCore.Razor.Tools". これは、タグ ヘルパー ツールを追加するパッケージです。This is the package that adds Tag Helper tooling.

HTML の作成を検討<label>要素。Consider writing an HTML <label> element. 入力するとすぐに<lVisual Studio エディターで IntelliSense が一致する要素を表示します。As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

イメージ

アイコンは、HTML ヘルプを表示するだけでなく (、"@" symbol with "<>"その下にある)。Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).

イメージ

タグ ヘルパーの対象となるように、要素を識別します。identifies the element as targeted by Tag Helpers. 純粋な HTML 要素 (など、 fieldset)"<>"アイコンを表示します。Pure HTML elements (such as the fieldset) display the "<>" icon.

純粋な HTML<label>タグが、茶色のフォントが赤で属性に (既定の Visual Studio の色のテーマ) の HTML タグを表示し、属性は青色で示される値します。A pure HTML <label> tag displays the HTML tag (with the default Visual Studio color theme) in a brown font, the attributes in red, and the attribute values in blue.

イメージ

入力した後<labelIntelliSense には、使用可能な HTML と CSS とタグ ヘルパーの対象となる属性が一覧表示されます。After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

イメージ

IntelliSense 入力候補では、キーを入力します タブを選択した値を指定してステートメントを完了することができます。IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:

イメージ

タグ ヘルパー属性を入力するとすぐ、タグおよび属性のフォントを変更します。As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. 既定の Visual Studio"Blue"または"Light"色のテーマを使用して、フォントは、太字紫です。Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. [ダーク] テーマを使用している場合、フォントは太字青緑がします。If you're using the "Dark" theme the font is bold teal. このドキュメント内のイメージは、既定のテーマを使用して取得されました。The images in this document were taken using the default theme.

イメージ

Visual Studio を入力することができますCompleteWordショートカット (ctrl キーを押しながら space キーは、既定二重引用符の内側 ("")、実行され、今すぐ、C# の場合は、c# のクラスにする場合と同じようにします。You can enter the Visual Studio CompleteWord shortcut (Ctrl +spacebar is the default inside the double quotes (""), and you are now in C#, just like you would be in a C# class. IntelliSense は、ページのモデルのすべてのメソッドとプロパティを表示します。IntelliSense displays all the methods and properties on the page model. メソッドとプロパティが使用可能なプロパティの型があるためModelExpressionです。The methods and properties are available because the property type is ModelExpression. 次の図では編集して、Registerビュー、ため、RegisterViewModelは使用できます。In the image below, I'm editing the Register view, so the RegisterViewModel is available.

イメージ

IntelliSense は、プロパティと、ページ上のモデルが使用できる方法を示します。IntelliSense lists the properties and methods available to the model on the page. 豊富な IntelliSense 環境では、CSS クラスを選択できます。The rich IntelliSense environment helps you select the CSS class:

イメージ

イメージ

HTML ヘルパーと比較してタグ ヘルパーTag Helpers compared to HTML Helpers

Razor ビューでの HTML 要素にタグ ヘルパーのアタッチ中にHTML ヘルパー Razor ビューの HTML が混在してメソッドが呼び出されます。Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. 次の Razor のマークアップは、HTML ラベルを「キャプション」の CSS クラスの作成を検討してください。Consider the following Razor markup, which creates an HTML label with the CSS class "caption":

@Html.Label("FirstName", "First Name:", new {@class="caption"})

で (@) 記号は、これは、コードの先頭を Razor に指示します。The at (@) symbol tells Razor this is the start of code. 次の 2 つのパラメーター ("FirstName"と"名:")、文字列のためはIntelliSenseヘルプことはできません。The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. 最後の引数。The last argument:

new {@class="caption"}

属性を表すために使用する匿名オブジェクト。Is an anonymous object used to represent attributes. クラスを予約済みキーワードを使用する (C#)、 @ c# の解釈を強制する記号"@class="(プロパティ名) のシンボルとして。Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret "@class=" as a symbol (property name). フロント エンドのデザイナーを (他のユーザー/Html/javascript CSS およびその他のクライアント テクノロジに慣れているが、c# と Razor に精通していない)、行のほとんどが外部です。To a front-end designer (someone familiar with HTML/CSS/JavaScript and other client technologies but not familiar with C# and Razor), most of the line is foreign. ヘルプは、intellisense では、行全体を作成する必要があります。The entire line must be authored with no help from IntelliSense.

使用して、 LabelTagHelper、として同じマークアップを記述できます。Using the LabelTagHelper, the same markup can be written as:

イメージ

入力するとすぐには、タグ ヘルパーのバージョンで<lVisual Studio エディターで IntelliSense が一致する要素を表示します。With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

イメージ

IntelliSense では、行全体を記述するのに役立ちます。IntelliSense helps you write the entire line. LabelTagHelperものコンテンツの設定に既定値は、 asp-for 「姓」を属性値 ("FirstName")Camel 形式のプロパティを各新しい大文字が発生する領域を持つプロパティ名から成る文に変換します。The LabelTagHelper also defaults to setting the content of the asp-for attribute value ("FirstName") to "First Name"; It converts camel-cased properties to a sentence composed of the property name with a space where each new upper-case letter occurs. 次のマークアップ。In the following markup:

イメージ

生成されます。generates:

<label class="caption" for="FirstName">First Name</label>

Camel 形式の大文字小文字の文のコンテンツには使用されませんにコンテンツを追加する場合、<label>です。The camel-cased to sentence-cased content is not used if you add content to the <label>. 例:For example:

イメージ

生成されます。generates:

<label class="caption" for="FirstName">Name First</label>

次のコードの画像、フォームの部分を示します、 Views/Account/Register.cshtml Visual Studio 2015 に含まれているレガシ ASP.NET 4.5.x MVC テンプレートから生成された Razor ビュー。The following code image shows the Form portion of the Views/Account/Register.cshtml Razor view generated from the legacy ASP.NET 4.5.x MVC template included with Visual Studio 2015.

イメージ

Visual Studio エディターでは、背景が灰色の c# コードを表示します。The Visual Studio editor displays C# code with a grey background. たとえば、 AntiForgeryToken HTML ヘルパー。For example, the AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

グレーの背景が表示されます。is displayed with a grey background. レジスタ ビュー内のマークアップのほとんどは c# です。Most of the markup in the Register view is C#. タグ ヘルパーの使用と同じアプローチを比較します。Compare that to the equivalent approach using Tag Helpers:

イメージ

マークアップ方がクリーナー簡単に読み取り、編集、および HTML ヘルパー アプローチよりも管理します。The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. C# コードは、について知っておく必要があるサーバーに最低限に短縮されます。The C# code is reduced to the minimum that the server needs to know about. Visual Studio エディターでは、印象的なフォントでタグ ヘルパーの対象とするマークアップを表示します。The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

検討してください、電子メールグループ。Consider the Email group:

<div class="form-group">
    <label asp-for="Email" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
</div>

各「asp-」属性には"Email"の値が"Email"は文字列ではありません。Each of the "asp-" attributes has a value of "Email", but "Email" is not a string. ここでは、"Email"は、c# 式のモデル プロパティ、RegisterViewModelです。In this context, "Email" is the C# model expression property for the RegisterViewModel.

Visual Studio エディターでは、作成できます。すべての Visual Studio で HTML ヘルパーの方法でコードのほとんどのヘルプはありません、登録フォームのタグ ヘルパーの方法でマークアップ。The Visual Studio editor helps you write all of the markup in the Tag Helper approach of the register form, while Visual Studio provides no help for most of the code in the HTML Helpers approach. タグ ヘルパーの IntelliSense サポートVisual Studio エディターでタグ ヘルパーの使用方法の詳細を見ていきます。IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

Web サーバー コントロールと比較してタグ ヘルパーTag Helpers compared to Web Server Controls

  • 関連付けられている要素を所有していないタグ ヘルパーそれらの要素およびコンテンツのレンダリングに単に参加します。Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. ASP.NET Web サーバー コントロールの宣言し、ページに呼び出されます。ASP.NET Web Server controls are declared and invoked on a page.

  • Web サーバー コントロールが困難に開発およびデバッグする重要なライフ サイクルがあります。Web Server controls have a non-trivial lifecycle that can make developing and debugging difficult.

  • Web サーバー コントロールを使用すると、クライアントのコントロールを使用して、クライアントのドキュメント オブジェクト モデル (DOM) 要素に機能を追加できます。Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. タグ ヘルパーが DOM. をあるなしTag Helpers have no DOM.

  • Web サーバー コントロールには、ブラウザーの自動検出が含まれます。Web Server controls include automatic browser detection. タグ ヘルパーは、ブラウザーの知識を持っていません。Tag Helpers have no knowledge of the browser.

  • 複数のタグ ヘルパーが同じ要素を処理できる (を参照してくださいタグ ヘルパーを回避する競合) 中に、通常 Web サーバー コントロールを構成できません。Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • タグ ヘルパーは、タグおよびこれらを対象としている HTML 要素の内容を変更できますが、ページ上の他のものを直接変更しないで。Tag Helpers can modify the tag and content of HTML elements that they're scoped to, but don't directly modify anything else on a page. Web サーバー コントロールより限定スコープが存在し、ページの他の部分に影響を与えるアクションを実行できます。意図しない副作用を有効にします。Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • Web サーバー コントロールでは、型コンバーターを使用して、文字列をオブジェクトに変換します。Web Server controls use type converters to convert strings into objects. タグ ヘルパーで作業するネイティブ C# の場合、入力は、変換する必要はありません。With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • Web サーバー コントロールを使用してSystem.ComponentModelコンポーネントやコントロールの実行時およびデザイン時の動作を実装します。Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel基本クラスとインターフェイス、属性と型コンバーターの実装、ソース、データへのバインド、およびコンポーネントのライセンスが含まれます。System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. タグ ヘルパーは、通常から派生するコントラストをTagHelper、およびTagHelper基底クラスのみに 2 つのメソッドを公開するProcessProcessAsyncです。Contrast that to Tag Helpers, which typically derive from TagHelper, and the TagHelper base class exposes only two methods, Process and ProcessAsync.

タグ ヘルパー要素のフォントのカスタマイズCustomizing the Tag Helper element font

色付けとフォントをカスタマイズすることができますツール > オプション > 環境 > フォントおよび色:You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors:

イメージ

その他のリソースAdditional Resources