ASP.NET Core のタグ ヘルパー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. たとえば、LabelTagHelper 属性が適用されている場合、組み込みの LabelTagHelper では HTML <label> 要素をターゲットとすることができます。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 don't replace HTML Helpers and there's not a Tag Helper for each HTML Helper. 2 つの違いの詳細については、「タグ ヘルパーと 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. 2 つの違いの詳細については、「タグ ヘルパーと 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 built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. たとえば、Views/Account フォルダーの多くのビューで使用される <input> 要素には、asp-for 属性が含まれてFor example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. この属性は、指定されたモデル プロパティの名前をレンダリングされる HTML に抽出しますThis attribute extracts the name of the specified model property into the rendered HTML. 次のようなモデルの Razor ビューを考慮します。Consider a Razor view with the following model:

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

次の Razor マークアップでは、The following Razor markup:

<label asp-for="Movie.Title"></label>

次の HTML が生成されます。Generates the following HTML:

<label for="Movie_Title">Title</label>

asp-for 属性は、LabelTagHelperFor プロパティで使用できます。The asp-for attribute is made available by the For property in the LabelTagHelper. 詳しくは、タグ ヘルパーの作成に関するページをご覧ください。See Author 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

AuthoringTagHelpers という名前の新しい ASP.NET Core Web アプリを作成する場合、以下の Views/_ViewImports.cshtml ファイルがプロジェクトに追加されます。If you create a new ASP.NET Core web app named AuthoringTagHelpers, 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. この場合、ビュー ファイルは Pages/_ViewImports.cshtml であり、既定では Pages フォルダーとサブフォルダーのすべてのファイルによって継承され、タグ ヘルパーが使用可能になります。In this case, the view file is Pages/_ViewImports.cshtml, which by default is inherited by all files in the Pages folder and sub-folders; making Tag Helpers available. 上記のコードではワイルドカード構文 ("*") を使用して、指定されたアセンブリ (Microsoft.AspNetCore.Mvc.TagHelpers) 内のすべてのタグ ヘルパーが、Views ディレクトリまたはサブディレクトリ内のすべてのビュー ファイルで使用可能になるように指定します。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 の後の最初のパラメーターでは読み込むタグ ヘルパーを指定し (すべてのタグ ヘルパーに対して "*" を使用)、2 番目のパラメーター "Microsoft.AspNetCore.Mvc.TagHelpers" ではタグ ヘルパーを含むアセンブリを指定します。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 ファイルに追加すると、タグ ヘルパーを Views ディレクトリとサブディレクトリ内のすべてのビュー ファイルで使用できるようになります。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 には @addTagHelper と同じ 2 つのパラメーターがあり、以前に追加されたタグ ヘルパーを削除します。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. Views/Folder/_ViewImports.cshtml ファイルで @removeTagHelper を使用すると、Folder 内のすべてのビューから指定されたタグ ヘルパーが削除されます。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. Home ビューに対して空の 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. Views/Home/_ViewImports.cshtml ファイルに追加する @addTagHelper ディレクティブ (既定の Views/_ViewImports.cshtml ファイルにはない) では、これらのタグ ヘルパーが Home フォルダー内のビューにのみ公開されます。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 doesn't.

イメージ

@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. Visual Studio エディターで <l を入力するとすぐに、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> タグの場合、HTML タグ (既定の Visual Studio の配色テーマ) が茶色のフォントで、属性が赤で、属性値が青で表示されます。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.

イメージ

<label を入力した後、IntelliSense では次のように使用可能な HTML/CSS 属性とタグ ヘルパーのターゲットとなる属性がリストされます。After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

イメージ

IntelliSense ステートメント入力候補では、Tab キーを入力して、選択した値を使用してステートメントを完了することができます。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 の "青" または "ライト" の配色テーマを使用すると、フォントが太字の紫になります。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. たとえば、CSS クラス "caption" を指定して HTML ラベルを作成する、次のような Razor マークアップがあるとします。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" と "First Name:") は文字列であるため、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. class は 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/CSS/JavaScript とその他のクライアント テクノロジには慣れているものの、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:

イメージ

タグ ヘルパー バージョンを使用して Visual Studio エディターで <l を入力するとすぐに、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") が "First Name" に設定されます。キャメル ケースのプロパティは、新しい大文字がそれぞれ示されるスペースがあるプロパティ名で構成された文に変換されます。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>

<label> にコンテンツを追加する場合、キャメル ケースからセンテンス ケースのコンテンツは使用されません。The camel-cased to sentence-cased content isn't used if you add content to the <label>. 例:For example:

イメージ

この場合、次のように生成されます。generates:

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

次のコード イメージは、Visual Studio 2015 に含まれているレガシ ASP.NET 4.5.x MVC テンプレートから生成される Views/Account/Register.cshtml Razor ビューの Form 部分を示しています。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. Register ビューのマークアップのほとんどは 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.

たとえば、以下の Email グループについて考えてみます。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" isn't a string. このコンテキストでは、"Email" は RegisterViewModel の C# モデル式のプロパティとなります。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. Visual Studio エディターでのタグ ヘルパーの操作の詳細については、「IntelliSense でのタグ ヘルパーのサポート」を参照してください。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 基底クラスでは ProcessProcessAsync の 2 つのメソッドのみを公開します。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