Taghilfsprogramme in ASP.NET CoreTag Helpers in ASP.NET Core

Von Rick AndersonBy Rick Anderson

Informationen zu TaghilfsprogrammenWhat are Tag Helpers

Taghilfsprogramme ermöglichen serverseitigem Code das Mitwirken am Erstellen und Rendern von HTML-Elementen in Razor-Dateien.Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Beispielsweise kann der integrierte ImageTagHelper eine Versionsnummer an den Bildnamen anfügen.For example, the built-in ImageTagHelper can append a version number to the image name. Bei jeder Änderung des Bilds generiert der Server eine neue eindeutige Version des Bilds, sodass Clients immer das aktuelle Bild (anstelle eines veralteten zwischengespeicherten Bilds) erhalten.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). Für häufige Aufgaben wie das Erstellen von Formularen und Links sowie das Laden von Objekten gibt es zahlreiche integrierte Taghilfsprogramme. Weitere Taghilfsprogramme sind in öffentlichen GitHub-Repositorys und als NuGet-Pakete verfügbar.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. Taghilfsprogramme werden in C# erstellt und sind für HTML-Elemente basierend auf dem Elementnamen, dem Attributnamen oder dem übergeordneten Tag konzipiert.Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. Beispielsweise kann der integrierte LabelTagHelper für das HTML-<label>-Element verwendet werden, wenn die LabelTagHelper-Attribute angewendet werden.For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. Wenn Sie mit HTML-Hilfsprogrammen vertraut sind, verringern taghilfsprogramme die expliziten Übergänge zwischen HTML und c# in Razor Sichten.If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. Häufig stellen HTML-Hilfsprogramme eine Alternative zu einem bestimmten Taghilfsprogramm dar. Allerdings ersetzen Taghilfsprogramme HTML-Hilfsprogramme nicht, und es gibt nicht für jedes HTML-Hilfsprogramm ein Taghilfsprogramm.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. Im Abschnitt Taghilfsprogramme und HTML-Hilfsprogramme im Vergleich werden die Unterschiede detaillierter erläutert.Tag Helpers compared to HTML Helpers explains the differences in more detail.

Vorteile eines TaghilfsprogrammsWhat Tag Helpers provide

HTML-freundliche Entwicklungs Benutzerfreundlichkeit Zum größten Teil Razor sieht Markup mit taghilfsprogrammen wie Standard-HTML aus.An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. Front-End-Designer, die mit HTML/CSS/JavaScript vertraut sind, können Razor ohne Erlernen der c#- Razor Syntax bearbeiten.Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

Eine umfangreiche IntelliSense-Umgebung zum Erstellen von HTML-und Razor Markup- Funktionen ist ein starker Kontrast zu HTML-Hilfsprogrammen, der vorherige Ansatz für die serverseitige Erstellung von Markup in Razor Ansichten.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. Im Abschnitt Taghilfsprogramme und HTML-Hilfsprogramme im Vergleich werden die Unterschiede detaillierter erläutert.Tag Helpers compared to HTML Helpers explains the differences in more detail. Im Abschnitt IntelliSense-Unterstützung für Taghilfsprogramme wird die IntelliSense-Umgebung beschrieben.IntelliSense support for Tag Helpers explains the IntelliSense environment. Sogar Entwickler, Razor die die c#-Syntax kennen, sind mit taghilfsprogrammen produktiver als das Schreiben von c#- Razor Markup.Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

Produktiveres Arbeiten und Erstellen von stabilerem, zuverlässigerem und verwaltbarem Code mithilfe von Informationen, die nur auf dem Server verfügbar sind Beispielsweise galt in der Vergangenheit für das Aktualisieren von Bildern, dass auch der Name des Bildes geändert werden muss, wenn das Bild geändert wurde.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. Bilder sollten zur Verbesserung der Leistung immer zwischengespeichert werden, denn wenn Sie nicht den Namen des Bildes ändern, kann es sein, dass Clients veraltete Kopien erhalten.Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. In der Vergangenheit musste der Name des Bildes immer geändert werden, wenn dieses bearbeitet wurde, und jeder Verweis auf das Bild in der Web-App musste aktualisiert werden.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. Dies ist nicht nur sehr arbeitsintensiv, sondern auch fehleranfällig (Sie könnten einen Verweis übersehen, versehentlich die falsche Zeichenfolge eingeben usw.) Das integrierte ImageTagHelper kann dies automatisch für Sie ausführen.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. Das ImageTagHelper-Taghilfsprogramm kann eine Versionsnummer an den Bildnamen anfügen. Das bedeutet, dass der Server bei jeder Änderung eine neue eindeutige Version für das Bild generiert.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 erhalten dann immer das aktuelle Bild.Clients are guaranteed to get the current image. Die Verwendung des ImageTagHelper ist grundsätzlich kostenlos, bietet mehr Stabilität, und Sie sparen Zeit.This robustness and labor savings comes essentially free by using the ImageTagHelper.

Die meisten integrierten Taghilfsprogramme sind für HTML-Standardelemente konzipiert und stellen serverseitige Attribute für die jeweiligen Elemente bereit.Most built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. Das <input>-Element, das in vielen Ansichten im Ordner Views/Accounts (Ansichten/Konten) verwendet wird, enthält beispielsweise das asp-for-Attribut.For example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. Dieses Attribut extrahiert den Namen der angegebenen Modelleigenschaft, und fügt diesen in die gerenderte HTML-Seite ein.This attribute extracts the name of the specified model property into the rendered HTML. Betrachten Sie eine Razor Ansicht mit dem folgenden Modell: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; }
}

Das folgende Razor Markup:The following Razor markup:

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

wird der folgende HTML-Code generiert:Generates the following HTML:

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

Das asp-for-Attribut wird von der For-Eigenschaft von LabelTagHelper zur Verfügung gestellt.The asp-for attribute is made available by the For property in the LabelTagHelper. Weitere Informationen finden Sie unter Erstellen von Taghilfsprogrammen.See Author Tag Helpers for more information.

Verwalten des TaghilfsprogrammbereichsManaging Tag Helper scope

Der Taghilfsprogrammbereich wird über eine Kombination aus @addTagHelper, @removeTagHelper und dem Deaktivierungszeichen „!“ gesteuert.Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

@addTagHelper stellt Taghilfsprogramme zur Verfügung.@addTagHelper makes Tag Helpers available

Wenn Sie eine neue ASP.NET Core-Web-App mit dem Namen AuthoringTagHelpers erstellen, wird die folgende Views/_ViewImports.cshtml-Datei Ihrem Projekt hinzugefügt: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

Über die @addTagHelper-Anweisung werden Taghilfsprogramme in der Ansicht zur Verfügung gestellt.The @addTagHelper directive makes Tag Helpers available to the view. In diesem Fall ist die Ansichts Datei pages/_ViewImports. cshtml, die standardmäßig von allen Dateien im Ordner " pages " und den Unterordnern geerbt wird. Bereitstellen von taghilfsprogrammenIn this case, the view file is Pages/_ViewImports.cshtml, which by default is inherited by all files in the Pages folder and subfolders; making Tag Helpers available. Im obigen Code wird die Platzhalter Syntax (" * ") verwendet, um anzugeben, dass alle taghilfsprogramme in der angegebenen Assembly (Microsoft. aspnetcore. MVC. taghilfsprogramme) für jede Ansichts Datei im Verzeichnis " views " oder Unterverzeichnis verfügbar sind.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 subdirectory. Über den ersten Parameter nach @addTagHelper wird das Taghilfsprogramm geladen („*“ wird für alle Taghilfsprogramme verwendet), und über den zweiten Parameter „Microsoft.AspNetCore.Mvc.TagHelpers“ wird die Assembly angegeben, die die Taghilfsprogramme enthält.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. Bei Microsoft.AspNetCore.Mvc.TagHelpers handelt es sich um die Assembly für die integrierten ASP.NET Core-Taghilfsprogramme.Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

Verwenden Sie folgenden Code, wenn Sie alle Taghilfsprogramme in diesem Projekt zur Verfügung stellen wollen. Dadurch wird eine Assembly mit dem Namen AuthoringTagHelpers erstellt: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

Wenn Ihr Projekt ein EmailTagHelper-Taghilfsprogramm mit einem Standardnamespace (AuthoringTagHelpers.TagHelpers.EmailTagHelper) verwendet, können Sie den vollqualifizierten Namen Ihres Taghilfsprogramms zur Verfügung stellen: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

Wenn Sie einer Ansicht über einen vollqualifizierten Namen ein Taghilfsprogramm hinzufügen möchten, müssen Sie zunächst diesen Namen (AuthoringTagHelpers.TagHelpers.EmailTagHelper) und dann den Assemblynamen (AuthoringTagHelpers) hinzufügen.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). Die meisten Entwickler verwenden am liebsten die Platzhaltersyntax („*“).Most developers prefer to use the "*" wildcard syntax. Mithilfe der Platzhaltersyntax können Sie das Platzhalterzeichen „*“ als Suffix in einem vollqualifizierten Namen einfügen.The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. Beispielsweise können Sie über die folgenden Anweisungen das EmailTagHelper-Hilfsprogramm integrieren:For example, any of the following directives will bring in the EmailTagHelper:

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

Wie bereits erwähnt @addTagHelper _ViewImports , ist das taghilfsprogramm für alle Ansichts Dateien im Verzeichnis " views " und in den Unterverzeichnissen verfügbar.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 subdirectories. Sie können die @addTagHelper-Anweisung in bestimmten Ansichtsdateien verwenden, wenn Sie festlegen möchten, dass das Taghilfsprogramm nur für diese Ansichten verfügbar ist.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.

Entfernen von Taghilfsprogrammen über @removeTagHelper@removeTagHelper removes Tag Helpers

Das @removeTagHelper-Taghilfsprogramm enthält dieselben beiden Parameter wie @addTagHelper und entfernt ein bereits zuvor hinzugefügtes Taghilfsprogramm.The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. Wenn z.B. der @removeTagHelper auf eine bestimmte Ansicht angewendet wird, wird das angegebene Taghilfsprogramm aus der Ansicht entfernt.For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. Wenn Sie das @removeTagHelper-Taghilfsprogramm in einem Views/Folder/_ViewImports.cshtml-Ordner verwenden, wird das festgelegte Taghilfsprogramm aus allen Ansichten im Ordner entfernt.Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder.

Steuern des Taghilfsprogrammbereichs mit der _ViewImports.cshtml-DateiControlling Tag Helper scope with the _ViewImports.cshtml file

Sie können jedem Ordner eine _ViewImports.cshtml-Datei hinzufügen, und die Ansichtsengine wendet die Anweisungen aus dieser Datei und der Views/_ViewImports.cshtml-Datei an.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. Wenn Sie für die Startseiten-Ansicht eine leere Views/Home/_ViewImports.cshtml-Ansicht hinzufügen, ändert sich nichts, da die _ViewImports.cshtml-Datei nur einen Zusatz darstellt.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. Alle @addTagHelper-Anweisungen, die Sie der Views/Home/_ViewImports.cshtml-Datei hinzufügen (die nicht in der Standarddatei Views/_ViewImports.cshtml enthalten sind) machen diese Taghilfsprogramme nur für Ansichten im Basis-Ordner verfügbar.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.

Deaktivieren individueller ElementeOpting out of individual elements

Sie können Taghilfsprogramme auf Elementebene über das Deaktivierungszeichen „!“ für Taghilfsprogramme deaktivieren.You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). Beispielsweise wird die Email-Validierung in <span> über dieses Zeichen deaktiviert: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>

Sie müssen dieses Zeichen auf das Start- und das Endtag anwenden.You must apply the Tag Helper opt-out character to the opening and closing tag. (Der Visual Studio-Editor fügt das Zeichen automatisch dem Endtag hinzu, wenn Sie es im Starttag verwendet haben.)(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). Sobald Sie das Deaktivierungszeichen hinzugefügt haben, werden das Element und die Taghilfsprogrammattribute nicht mehr in unterschiedlichen Schriftarten angezeigt.After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

Verwenden von @tagHelperPrefix, um die Verwendung von Taghilfsprogrammen erforderlich zu machenUsing @tagHelperPrefix to make Tag Helper usage explicit

Mithilfe der @tagHelperPrefix-Anweisung können Sie ein Tagpräfix angeben, um Unterstützung für Taghilfsprogramme zu aktivieren und ihre Verwendung explizit erforderlich zu machen.The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. Beispielsweise können Sie das folgende Markup zu der Views/_ViewImports.cshtml-Datei hinzufügen:For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

Im nachfolgend Codebild ist das Präfix des Taghilfsprogramms auf th: festgelegt, sodass nur die Elemente, die das Präfix th: verwenden, Taghilfsprogramme unterstützen (Elemente, für die Taghilfsprogramme aktiviert sind, werden in einer anderen Schriftart dargestellt).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). Die Elemente <label> und <input> enthalten das Präfix des Taghilfsprogramms. Für sie sind Taghilfsprogramme aktiviert, für das Element <span> hingegen nicht.The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element doesn't.

image

Für @addTagHelper gelten dieselben Hierarchieregeln wie für @tagHelperPrefix.The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

Taghilfsprogramme als selbstschließende TagsSelf-closing Tag Helpers

Viele Taghilfsprogramme können nicht als selbstschließende Tags verwendet werden.Many Tag Helpers can't be used as self-closing tags. Einige Taghilfsprogramme sind als selbstschließende Tags konzipiert.Some Tag Helpers are designed to be self-closing tags. Wenn Sie ein Taghilfsprogramm verwenden, das nicht als selbstschließendes Tag konzipiert ist, wird die gerenderte Ausgabe unterdrückt.Using a Tag Helper that was not designed to be self-closing suppresses the rendered output. Wenn Sie ein als selbstschließendes Tag konzipiertes Taghilfsprogramm verwenden, werden selbstschließende Tags in der gerenderten Ausgabe verwendet.Self-closing a Tag Helper results in a self-closing tag in the rendered output. Weitere Informationen finden Sie unter Erstellen von Taghilfsprogrammen in ASP.NET Core in diesem Hinweis.For more information, see this note in Authoring Tag Helpers.

C# in Attributen/der Deklaration von TaghilfsprogrammenC# in Tag Helpers attribute/declaration

Taghilfsprogramme lassen C# im Attribut des Elements oder im Tagdeklarationsbereich nicht zu.Tag Helpers do not allow C# in the element's attribute or tag declaration area. Beispielsweise ist der folgende Code ungültig:For example, the following code is not valid:

<input asp-for="LastName"  
       @(Model?.LicenseId == null ? "disabled" : string.Empty) />

Der vorangehende Code kann wie folgt geschrieben werden:The preceding code can be written as:

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

IntelliSense-Unterstützung für TaghilfsprogrammeIntelliSense support for Tag Helpers

Wenn Sie eine neue ASP.net Core-Web-App in Visual Studio erstellen, wird das nuget-Paket "Microsoft. aspnetcore. Razor .. Tools ".When you create a new ASP.NET Core web app in Visual Studio, it adds the NuGet package "Microsoft.AspNetCore.Razor.Tools". Dabei handelt es sich um das Paket, das Taghilfsprogramme hinzufügt.This is the package that adds Tag Helper tooling.

Sie sollten ein HTML-<label>-Element schreiben.Consider writing an HTML <label> element. Wenn Sie <l im Visual Studio-Editor eingeben, zeigt IntelliSense passende Elemente an:As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

image

Sie erhalten nicht nur Hilfe für HTML, sondern es wird auch das Symbol „@" symbol with "“ mit <> darunter angezeigt.Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).

image

Erkennt das Element als für Taghilfsprogramme konzipiert an.identifies the element as targeted by Tag Helpers. Für reine HTML-Elemente wie fieldset wird das Symbol „<>“ angezeigt.Pure HTML elements (such as the fieldset) display the "<>" icon.

Ein reines HTML-<label>-Tag zeigt das HTML-Tag (im Standardfarbdesign von Visual Studio) in braun, die Attribute in rot und die Attributwerte in blau an.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.

image

Wenn Sie <label eingeben, listet IntelliSense die verfügbaren HTML/CSS-Attribute und die für Taghilfsprogramme konzipierten Attribute auf:After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

image

Aufgrund der Anweisungsvervollständigung von IntelliSense können Sie die TAB-Taste drücken, um die Anweisung mit dem ausgewählten Wert zu vervollständigen:IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:

image

Wenn ein Taghilfsprogrammattribut eingegeben wird, ändern sich die Schriftarten des Tags und des Attributs.As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. Wenn Sie das Standardfarbdesign von Visual Studio verwenden („Blau“ oder „Hell“), wird die Schrift in dunkellila angezeigt.Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. Wenn Sie das Design „Dunkel“ verwenden, wird die Schrift in einem dunklen blaugrün angezeigt.If you're using the "Dark" theme the font is bold teal. Für die in diesem Artikel dargestellten Bilder wurde das Standarddesign verwendet.The images in this document were taken using the default theme.

image

Sie können die Visual Studio-Verknüpfung CompleteWord verwenden (standardmäßig STRG+LEERTASTE in doppelten Anführungszeichen (""), und jetzt befinden Sie sich genauso wie in einer C#-Klasse in 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 zeigt alle Methoden und Eigenschaften auf dem Seitenmodell an.IntelliSense displays all the methods and properties on the page model. Die Methoden und Eigenschaften sind verfügbar, weil der Eigenschaftentyp ModelExpression ist.The methods and properties are available because the property type is ModelExpression. Im nachfolgenden Beispiel wird die Register-Ansicht bearbeitet, damit das RegisterViewModel verfügbar ist.In the image below, I'm editing the Register view, so the RegisterViewModel is available.

image

IntelliSense listet die Eigenschaften und Methoden auf, die für das Modell auf der Seite verfügbar sind.IntelliSense lists the properties and methods available to the model on the page. Mithilfe der umfassenden IntelliSense-Umgebung können Sie die CSS-Klasse auswählen:The rich IntelliSense environment helps you select the CSS class:

image

image

Taghilfsprogramme und HTML-Hilfsprogramme im VergleichTag Helpers compared to HTML Helpers

Taghilfsprogramme werden an HTML-Elemente in Razor Sichten angehängt, während HTML -Hilfsprogramme als Methoden aufgerufen werden, die mit HTML in Sichten kombinierten sind Razor .Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. Beachten Sie das folgende Razor Markup, das eine HTML-Bezeichnung mit der CSS-Klasse "Caption" erstellt:Consider the following Razor markup, which creates an HTML label with the CSS class "caption":

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

Das at ( @ )-Symbol weist darauf hin, dass Razor es sich um den Anfang des Codes handeltThe at (@) symbol tells Razor this is the start of code. Bei den nächsten beiden Parametern („FirstName“ und „First Name:“) handelt es sich um Zeichenfolgen. Daher kann IntelliSense nicht helfen.The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. Das letzte Argument:The last argument:

new {@class="caption"}

Dabei handelt es sich um ein anonymes Objekt, das verwendet wird, um Attribute darzustellen.Is an anonymous object used to represent attributes. Da es sich bei class um ein reserviertes Schlüsselwort in C# handelt, sollten Sie das @-Symbol verwenden, um C# zu zwingen, @class= als Symbol (Eigenschaftenname) zu interpretieren.Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret @class= as a symbol (property name). An einen Front-End-Designer (jemand, der mit HTML/CSS/JavaScript und anderen Client Technologien vertraut ist, aber nicht mit c# und vertraut Razor ist), ist der größte Teil der Zeile fremd.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. Die gesamte Zeile muss ohne Hilfe von IntelliSense erstellt werden.The entire line must be authored with no help from IntelliSense.

Wenn Sie das LabelTagHelper-Taghilfsprogramm verwenden, kann dasselbe Markup wie folgt geschrieben sein:Using the LabelTagHelper, the same markup can be written as:

<label class="caption" asp-for="FirstName"></label>

Wenn Sie die Taghilfsprogrammversion verwenden und <l im Visual Studio-Editor eingeben, zeigt IntelliSense passende Elemente an:With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

image

Mithilfe von IntelliSense können Sie die gesamte Zeile schreiben.IntelliSense helps you write the entire line.

Die folgende Codeabbildung zeigt den Formular Teil der Ansicht views/Account/Register. cshtml , der Razor aus der in Visual Studio enthaltenen ASP.NET 4.5. x-MVC-Vorlage generiert wurde.The following code image shows the Form portion of the Views/Account/Register.cshtml Razor view generated from the ASP.NET 4.5.x MVC template included with Visual Studio.

image

Der Visual Studio-Editor zeigt C#-Code vor grauem Hintergrund an.The Visual Studio editor displays C# code with a grey background. Z.B. wird das AntiForgeryToken-HTML-HilfsprogrammFor example, the AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

vor grauem Hintergrund angezeigt.is displayed with a grey background. Ein Großteil des Markups in der Registeransicht ist in C# geschrieben.Most of the markup in the Register view is C#. Zum Vergleich wird in der folgenden Abbildung der entsprechende Ansatz unter Verwendung von Taghilfsprogrammen dargestellt:Compare that to the equivalent approach using Tag Helpers:

image

Das Markup ist viel deutlicher und kann einfacher gelesen, bearbeitet und verwaltet werden als im Ansatz über das HTML-Hilfsprogramm.The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. Der C#-Code ist auf die mindestens erforderlichen Informationen begrenzt, die der Server benötigt.The C# code is reduced to the minimum that the server needs to know about. Der Visual Studio-Editor zeigt Markup an, das von einem Taghilfsprogramm in einer anderen Schriftart angezeigt wird.The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

Sehen Sie sich die Email-Gruppe an: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>

Alle asp-Attribute enthalten den Wert „Email“. „Email“ ist allerdings keine Zeichenfolge.Each of the "asp-" attributes has a value of "Email", but "Email" isn't a string. In diesem Kontext ist „Email“ die C#-Modellausdruckseigenschaft für das RegisterViewModel.In this context, "Email" is the C# model expression property for the RegisterViewModel.

Mithilfe des Visual Studio-Editors können Sie das gesamte Markup im Taghilfsprogrammansatz des Registerformulars schreiben. Visual Studio stellt hingegen für einen Großteil des Codes im HTML-Hilfsprogrammansatz keine Hilfe zur Verfügung.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. Im Abschnitt IntelliSense-Unterstützung für Tag-Hilfsprogramme finden Sie mehr Details zum Arbeiten mit Taghilfsprogrammen im Visual Studio-Editor.IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

Taghilfsprogramm zu Webserversteuerelementen im VergleichTag Helpers compared to Web Server Controls

  • Taghilfsprogramme besitzen das Element nicht, dem sie zugeordnet sind. Stattdessen sind sie nur Teil des Rendervorgangs des Elements und des Inhalts.Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. Webserversteuerelemente für ASP.NET werden auf einer Seite deklariert und aufgerufen.ASP.NET Web Server controls are declared and invoked on a page.

  • Webserversteuerelemente haben einen nicht trivialen Lebenszyklus, aufgrund dessen sich das Entwickeln und Debuggen als schwierig gestalten kann.Web Server controls have a non-trivial lifecycle that can make developing and debugging difficult.

  • Mithilfe von Webserversteuerelementen können Sie Funktionen zu den Dokumentobjektmodellelementen des Clients über Clientsteuerelemente hinzufügen.Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. Taghilfsprogramme verfügen nicht über Dokumentobjektmodelle.Tag Helpers have no DOM.

  • Webserversteuerelemente umfassen die Browsererkennung nicht.Web Server controls include automatic browser detection. Taghilfsprogramme haben keine Kenntnisse über den Browser.Tag Helpers have no knowledge of the browser.

  • Mehrere Taghilfsprogramme können gleichzeitig auf dasselbe Element wirken (weitere Informationen finden Sie unter Avoiding Tag Helper conflicts (Vermeiden von Konflikten mit Taghilfsprogrammen)). Sie können hingegen in der Regel keine Webserversteuerelemente erstellen.Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • Taghilfsprogramme können das Tag und den Inhalt von HTML-Elementen verändern, dem sie zugeordnet sind. Ansonsten nehmen Sie keine Änderungen an der Seite vor.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. Der Funktionsbereich von Webserversteuerelementen ist weniger spezifisch. Sie können Aktionen ausführen, die andere Teile Ihrer Seite beeinflussen, wodurch Nebenwirkungen entstehen, die nicht vorgesehen sind.Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • Webserversteuerelemente verwenden Typkonverter, um Zeichenfolgen in Objekte zu konvertieren.Web Server controls use type converters to convert strings into objects. Mit Taghilfsprogrammen arbeiten Sie auf native Weise in C#, weshalb Sie keine Typkonvertierung durchführen müssen.With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • Webserversteuerelemente verwenden System.ComponentModel, um das Verhalten von Komponenten und Steuerelementen zur Laufzeit und Entwurfszeit zu implementieren.Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel enthält die Basisklassen und Schnittstellen zum Implementieren von Attributen und Typkonvertern, die Datenquellen binden und Komponenten lizenzieren.System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. Im Gegensatz dazu stehen Taghilfsprogramme, die in der Regel von TagHelper abgeleitet sind. Die TagHelper-Basisklasse stellt nur zwei Methoden zur Verfügung: Process und ProcessAsync.Contrast that to Tag Helpers, which typically derive from TagHelper, and the TagHelper base class exposes only two methods, Process and ProcessAsync.

Anpassen der Elementschriftart des TaghilfsprogrammsCustomizing the Tag Helper element font

Sie können die Schriftart und die Farbgebung unter Extras > Optionen > Umgebung > Schriftarten und Farbenanpassen:You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors:

image

ASP.NET Core: Integrierte TaghilfsprogrammeBuilt-in ASP.NET Core Tag Helpers

Anchor-TaghilfsprogrammAnchor Tag Helper

Cache-TaghilfsprogrammCache Tag Helper

Taghilfsprogramm für KomponentenComponent Tag Helper

Taghilfsprogramm für verteilten CacheDistributed Cache Tag Helper

Environment-TaghilfsprogrammEnvironment Tag Helper

Hilfsprogramm für FormulartagsForm Tag Helper

Hilfsprogramm für FormularaktionenForm Action Tag Helper

Image-TaghilfsprogrammImage Tag Helper

Hilfsprogramm für EingabetagsInput Tag Helper

Hilfsprogramm für BezeichnungstagsLabel Tag Helper

Hilfsprogramm für LinktagsLink Tag Helper

Hilfsprogramm für TeiltagsPartial Tag Helper

Hilfsprogramm für SkripttagsScript Tag Helper

Hilfsprogramm für AuswahltagsSelect Tag Helper

Hilfsprogramm für TextbereichtagsTextarea Tag Helper

Hilfsprogramm für ÜberprüfungsmeldungstagsValidation Message Tag Helper

Hilfsprogramm für ÜberprüfungszusammenfassungstagsValidation Summary Tag Helper

Zusätzliche RessourcenAdditional resources