Helper tag in ASP.NET CoreTag Helpers in ASP.NET Core

Di Rick AndersonBy Rick Anderson

Descrizione di helper tagWhat are Tag Helpers

Gli helper tag consentono al codice sul lato server di partecipare alla creazione e al rendering di elementi HTML nei file Razor.Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Ad esempio, l'elemento predefinito ImageTagHelper può aggiungere un numero di versione al nome dell'immagine.For example, the built-in ImageTagHelper can append a version number to the image name. Quando l'immagine viene modificata, il server genera una nuova versione univoca per l'immagine, in modo da garantire che i client ricevano sempre l'immagine corrente (anziché un'immagine non aggiornata memorizzata nella cache).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). Esistono molti helper tag predefiniti per le attività comuni, ad esempio la creazione di moduli e collegamenti, il caricamento di asset e così via, e altri ancora sono disponibili nei repository GitHub pubblici e come pacchetti 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. Gli helper tag vengono creati in C# e hanno come destinazione gli elementi HTML in base al nome di elemento, nome di attributo o tag padre.Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. Ad esempio, l'elemento predefinito LabelTagHelper può avere come destinazione l'elemento HTML <label> quando vengono applicati gli attributi di LabelTagHelper.For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. Se si ha familiarità con gli helper HTML, gli helper tag riducono le transizioni esplicite tra HTML e C# nelle visualizzazioni Razor.If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. In molti casi, gli helper HTML offrono un approccio alternativo a un helper tag specifico, ma è importante tenere presente che gli helper tag non sostituiscono gli helper HTML e che non esiste un helper tag per ogni helper 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. Nella sezione Helper tag e helper HTML a confronto vengono illustrate le differenze in modo più dettagliato.Tag Helpers compared to HTML Helpers explains the differences in more detail.

Vantaggi degli helper tagWhat Tag Helpers provide

Esperienza di sviluppo HTML semplificata: nella maggior parte dei casi, il markup Razor in cui vengono usati gli helper tag ha l'aspetto del markup HTML standard.An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. I progettisti all'avanguardia esperti di HTML/CSS/JavaScript possono modificare Razor senza conoscere la sintassi Razor per C#.Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

Ambiente IntelliSense avanzato per la creazione di markup HTML e Razor: in netto contrasto con gli helper HTML, il precedente approccio alla creazione sul lato server del markup nelle visualizzazioni 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. Nella sezione Helper tag e helper HTML a confronto vengono illustrate le differenze in modo più dettagliato.Tag Helpers compared to HTML Helpers explains the differences in more detail. Nella sezione Supporto IntelliSense per gli helper tag viene illustrato l'ambiente IntelliSense.IntelliSense support for Tag Helpers explains the IntelliSense environment. Anche gli sviluppatori esperti della sintassi C# per Razor aumentano la produttività usando gli helper tag invece di scrivere il markup Razor per C#.Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

Possibilità di aumentare la produttività e la capacità di produrre codice più solido, affidabile e gestibile usando le informazioni disponibili solo nel server: storicamente il mantra a proposito dell'aggiornamento delle immagini, ad esempio, era quello di cambiare il nome dell'immagine quando l'immagine veniva modificata.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. Per motivi di prestazioni, le immagini devono essere memorizzate nella cache e, a meno che il nome dell'immagine non venga cambiato, si rischia che i client ricevano una copia non aggiornata.Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. Dopo che un'immagine era stata modificata, il nome doveva essere sempre cambiato e ogni riferimento all'immagine nell'app Web doveva essere aggiornato.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. Questa operazione non solo richiede un impegno notevole, ma è anche soggetta a errori (si può tralasciare un riferimento, immettere accidentalmente la stringa errata e così via). L'elemento predefinito ImageTagHelper esegue automaticamente questa operazione.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 è in grado di aggiungere un numero di versione al nome dell'immagine in modo che quando l'immagine viene modificata il server generi automaticamente una nuova versione univoca dell'immagine.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. I client riceveranno sicuramente l'immagine corrente.Clients are guaranteed to get the current image. Grazie all'uso di ImageTagHelper, efficienza e risparmio di energie sono essenzialmente gratuiti.This robustness and labor savings comes essentially free by using the ImageTagHelper.

La maggior parte degli helper tag predefiniti usano come destinazione elementi HTML standard e specificano attributi sul lato server per l'elemento.Most built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. Ad esempio, l'elemento <input> usato in molte visualizzazioni nella cartella Views/Account (Visualizzazioni/Account) contiene l'attributo asp-for.For example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. Questo attributo consente di estrarre il nome della proprietà del modello specificato nel codice HTML visualizzabile.This attribute extracts the name of the specified model property into the rendered HTML. Si consideri una visualizzazione Razor con il modello seguente: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; }
}

Il markup Razor seguente:The following Razor markup:

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

Viene generato il codice HTML seguente:Generates the following HTML:

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

L'attributo asp-for viene reso disponibile dalla proprietà For in LabelTagHelper.The asp-for attribute is made available by the For property in the LabelTagHelper. Per altre informazioni, vedere Creare helper tag.See Author Tag Helpers for more information.

Gestione dell'ambito dell'helper tagManaging Tag Helper scope

L'ambito degli helper tag è controllato da una combinazione di @addTagHelper, @removeTagHelper e del carattere di esclusione "!".Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

@addTagHelper rende disponibili gli helper tag@addTagHelper makes Tag Helpers available

Se si crea una nuova app Web ASP.NET Core denominata AuthoringTagHelpers, al progetto verrà aggiunto il file Views/_ViewImports.cshtml seguente: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

La direttiva @addTagHelper rende gli helper tag disponibili per la visualizzazione.The @addTagHelper directive makes Tag Helpers available to the view. In questo caso, il file della visualizzazione è Pages/_ViewImports.cshtml che per impostazione predefinita viene ereditato da tutti i file nella cartella Pages e nelle sottocartelle, rendendo disponibili gli helper tag.In 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. Il codice riportato sopra usa la sintassi con caratteri jolly ("*") per specificare che tutti gli helper tag nell'assembly specificato (Microsoft.AspNetCore.Mvc.TagHelpers) saranno disponibili per tutti i file di visualizzazione nella directory Views o nelle sottodirectory.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. Il primo parametro dopo @addTagHelper specifica gli helper tag da caricare (viene usato "*" per tutti gli helper tag) e il secondo parametro "Microsoft.AspNetCore.Mvc.TagHelpers" specifica l'assembly contenente gli helper tag.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 è l'assembly per gli helper tag predefiniti di ASP.NET Core.Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

Per esporre tutti gli helper tag di questo progetto, che crea un assembly denominato AuthoringTagHelpers, usare il codice seguente: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

Se il progetto contiene un EmailTagHelper con lo spazio dei nomi predefinito (AuthoringTagHelpers.TagHelpers.EmailTagHelper), è possibile fornire il nome completo dell'helper tag: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

Per aggiungere un helper tag a una visualizzazione usando un nome completo, aggiungere prima il nome completo (AuthoringTagHelpers.TagHelpers.EmailTagHelper) e quindi il nome dell'assembly (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). La maggior parte degli sviluppatori preferisce usare la sintassi con caratteri jolly "*".Most developers prefer to use the "*" wildcard syntax. La sintassi con caratteri jolly consente di inserire il carattere jolly "*" come suffisso di un nome completo.The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. Le direttive seguenti, ad esempio, aggiungeranno EmailTagHelper:For example, any of the following directives will bring in the EmailTagHelper:

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

Come indicato in precedenza, l'aggiunta della direttiva @addTagHelper al file Views/_ViewImports.cshtml rende l'helper tag disponibile per tutti i file di visualizzazione nella directory Views e nelle sottodirectory.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. È possibile usare la direttiva @addTagHelper in file di visualizzazione specifici se si vuole acconsentire esplicitamente a esporre l'helper tag solo a queste visualizzazioni.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 rimuove gli helper tag@removeTagHelper removes Tag Helpers

@removeTagHelper contiene gli stessi due parametri di @addTagHelper e rimuove un helper tag che era stato precedentemente aggiunto.The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. Se ad esempio si applica @removeTagHelper a una visualizzazione specifica, l'helper tag specificato viene rimosso dalla visualizzazione.For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. L'uso di @removeTagHelper in un file Views/Folder/_ViewImports.cshtml comporta la rimozione dell'helper tag specificato da tutte le visualizzazioni in Folder.Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder.

Controllo dell'ambito dell'helper tag con il file _ViewImports.cshtmlControlling Tag Helper scope with the _ViewImports.cshtml file

È possibile aggiungere un file _ViewImports.cshtml a una cartella di visualizzazione qualsiasi e il motore di visualizzazione applicherà le direttive di questo file e del file 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. L'aggiunta di un file Views/Home/_ViewImports.cshtml vuoto per le visualizzazioni Home non comporta modifiche perché il file _ViewImports.cshtml è additivo.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. Le direttive @addTagHelper aggiunte al file Views/Home/_ViewImports.cshtml (non presenti nel file Views/_ViewImports.cshtml predefinito) espongono questi helper tag alle visualizzazioni solo nella cartella 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.

Esclusione di singoli elementiOpting out of individual elements

È possibile disabilitare un helper tag a livello di elemento con il carattere di esclusione ("!") dell'helper tag.You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). La convalida Email viene ad esempio disabilitata in <span> con il carattere di esclusione dell'helper tag: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>

È necessario applicare il carattere di esclusione dell'helper tag ai tag di apertura e chiusura.You must apply the Tag Helper opt-out character to the opening and closing tag. L'editor di Visual Studio aggiunge automaticamente il carattere di esclusione al tag di chiusura se ne è stato aggiunto uno al tag di apertura.(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). Dopo che il carattere di esclusione è stato aggiunto, l'elemento e gli attributi dell'helper tag non verranno più visualizzati in un tipo di carattere distintivo.After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

Uso di @tagHelperPrefix per rendere esplicito l'uso dell'helper tagUsing @tagHelperPrefix to make Tag Helper usage explicit

La direttiva @tagHelperPrefix consente di specificare una stringa di prefisso del tag per abilitare il supporto dell'helper tag e renderne esplicito l'uso.The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. È possibile, ad esempio, aggiungere il markup seguente al file Views/_ViewImports.cshtml:For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

Nell'immagine di codice seguente, il prefisso dell'helper tag è impostato su th:. Pertanto, solo gli elementi che usano il prefisso th: supportano gli helper tag. Gli elementi abilitati per gli helper tag hanno un tipo di carattere distintivo.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). Gli elementi <label> e <input> includono il prefisso dell'helper tag e sono abilitati per gli helper tag, mentre l'elemento <span> non lo è.The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element doesn't.

immagine

Le stesse regole di gerarchia che si applicano a @addTagHelper sono valide anche per @tagHelperPrefix.The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

Helper tag di chiusura automaticoSelf-closing Tag Helpers

Molti helper tag non possono essere usati come tag di chiusura automatici.Many Tag Helpers can't be used as self-closing tags. Alcuni helper tag sono progettati per essere tag di chiusura automatici.Some Tag Helpers are designed to be self-closing tags. Se si usa un helper tag non progettato per la chiusura automatica, l'output sottoposto a rendering viene eliminato.Using a Tag Helper that was not designed to be self-closing suppresses the rendered output. La chiusura automatica di un helper tag genera un tag di chiusura automatico nell'output sottoposto a rendering.Self-closing a Tag Helper results in a self-closing tag in the rendered output. Per altre informazioni, vedere questa nota in Creare helper tag in ASP.NET Core.For more information, see this note in Authoring Tag Helpers.

Supporto IntelliSense per gli helper tagIntelliSense support for Tag Helpers

Quando si crea una nuova app Web ASP.NET Core in Visual Studio, viene aggiunto il pacchetto NuGet "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". ovvero il pacchetto che aggiunge gli strumenti dell'helper tag.This is the package that adds Tag Helper tooling.

Si supponga di scrivere un elemento <label> HTML.Consider writing an HTML <label> element. Non appena si inizia a digitare <l nell'editor di Visual Studio, IntelliSense visualizza gli elementi corrispondenti:As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

immagine

Oltre alla guida HTML verrà visualizzata anche l'icona (il "@" symbol with "<>" sotto di essa).Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).

immagine

che identifica l'elemento come destinazione degli helper tag.identifies the element as targeted by Tag Helpers. Gli elementi HTML puri (ad esempio, fieldset) visualizzano l'icona "<>".Pure HTML elements (such as the fieldset) display the "<>" icon.

Un tag <label> HTML puro visualizza il tag HTML (con il tema colori di Visual Studio predefinito) con un tipo di carattere marrone, gli attributi in rosso e i valori degli attributi in blu.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.

immagine

Dopo avere immesso <label, IntelliSense elenca gli attributi HTML/CSS disponibili e gli attributi di destinazione dell'helper tag:After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

immagine

Il completamento istruzioni di IntelliSense consente di usare il tasto TAB per completare l'istruzione con il valore selezionato:IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:

immagine

Non appena un attributo dell'helper tag viene immesso, i tipi di carattere del tag e dell'attributo cambiano.As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. Con il tema colori predefinito "Blu" o "Chiaro" di Visual Studio, il tipo di carattere è in grassetto viola.Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. Se si usa il tema colori "Scuro", il tipo di carattere è in grassetto verde acqua.If you're using the "Dark" theme the font is bold teal. Nelle immagini acquisite per questo documento è stato usato il tema predefinito.The images in this document were taken using the default theme.

immagine

È possibile usare il tasto di scelta rapida Completa parola di Visual Studio (CTRL+BARRA SPAZIATRICE è la combinazione predefinita all'interno delle virgolette doppie ("") per passare a C#, proprio come se ci si trovasse in una classe 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 visualizza tutti i metodi e le proprietà nel modello di pagina.IntelliSense displays all the methods and properties on the page model. I metodi e le proprietà sono disponibili perché il tipo di proprietà è ModelExpression.The methods and properties are available because the property type is ModelExpression. Nell'immagine seguente viene modificata la visualizzazione Register, quindi è disponibile il modello RegisterViewModel.In the image below, I'm editing the Register view, so the RegisterViewModel is available.

immagine

IntelliSense elenca le proprietà e i metodi disponibili per il modello nella pagina.IntelliSense lists the properties and methods available to the model on the page. L'ambiente avanzato di IntelliSense consente di selezionare la classe CSS:The rich IntelliSense environment helps you select the CSS class:

immagine

immagine

Helper tag e helper HTML a confrontoTag Helpers compared to HTML Helpers

Gli helper tag sono associati agli elementi HTML nelle visualizzazioni Razor, mentre gli helper HTML vengono richiamati come metodi frammisti a codice HTML nelle visualizzazioni Razor.Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. Si osservi il markup Razor seguente che crea un'etichetta HTML con la classe CSS "caption":Consider the following Razor markup, which creates an HTML label with the CSS class "caption":

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

Il simbolo @ indica a Razor l'inizio del codice.The at (@) symbol tells Razor this is the start of code. I due parametri successivi ("FirstName" e "First Name:") sono stringhe, quindi IntelliSense non risulta utile.The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. L'ultimo argomento:The last argument:

new {@class="caption"}

è un oggetto anonimo usato per rappresentare gli attributi.Is an anonymous object used to represent attributes. Poiché class è una parola chiave riservata in C#, usare il simbolo @ per imporre a C# di interpretare @class= come un simbolo (nome di proprietà).Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret @class= as a symbol (property name). Per un progettista all'avanguardia che abbia familiarità con HTML/CSS/JavaScript e altre tecnologie client, ma non con C# e Razor, la maggior parte della riga è sconosciuta.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. L'intera riga deve essere creata senza alcun aiuto da parte di IntelliSense.The entire line must be authored with no help from IntelliSense.

Usando LabelTagHelper, è possibile scrivere lo stesso markup nel modo seguente:Using the LabelTagHelper, the same markup can be written as:

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

Con la versione helper tag, non appena si digita <l nell'editor di Visual Studio, IntelliSense visualizza gli elementi corrispondenti:With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

immagine

IntelliSense aiuta a scrivere l'intera riga.IntelliSense helps you write the entire line.

L'immagine di codice seguente illustra la porzione Form della visualizzazione Razor Views/Account/Register.cshtml generata dal modello MVC di ASP.NET 4.5.x incluso in Visual Studio.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.

immagine

Nell'editor di Visual Studio il codice C# viene visualizzato con uno sfondo grigio.The Visual Studio editor displays C# code with a grey background. Ad esempio, l'helper HTML AntiForgeryToken:For example, the AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

viene visualizzato con uno sfondo grigio.is displayed with a grey background. La maggior parte del markup nella visualizzazione Register è C#.Most of the markup in the Register view is C#. Confrontarlo con l'approccio equivalente usando gli helper tag:Compare that to the equivalent approach using Tag Helpers:

immagine

Rispetto all'approccio con gli helper HTML, il markup è molto più chiaro e facile da leggere, modificare e gestire.The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. Il codice C# è ridotto al numero minimo di elementi che il server deve conoscere.The C# code is reduced to the minimum that the server needs to know about. Nell'editor di Visual Studio il markup di destinazione di un helper tag viene visualizzato in un tipo di carattere distintivo.The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

Si osservi il gruppo 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>

Ogni attributo "asp-" ha il valore "Email", ma "Email" non è una stringa.Each of the "asp-" attributes has a value of "Email", but "Email" isn't a string. In questo contesto "Email" è la proprietà di espressione del modello C# per RegisterViewModel.In this context, "Email" is the C# model expression property for the RegisterViewModel.

L'editor di Visual Studio agevola la scrittura di tutto il markup nell'approccio con l'helper tag del modulo di registrazione, mentre Visual Studio non offre alcun aiuto per la maggior parte del codice nell'approccio con gli helper 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. Nella sezione Supporto IntelliSense per gli helper tag viene illustrato in modo dettagliato l'uso degli helper tag nell'editor di Visual Studio.IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

Helper tag e controlli server Web a confrontoTag Helpers compared to Web Server Controls

  • Gli helper tag non sono i proprietari dell'elemento a cui sono associati, ma partecipano semplicemente al rendering dell'elemento e del contenuto.Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. I controlli server Web di ASP.NET vengono dichiarati e richiamati in una pagina.ASP.NET Web Server controls are declared and invoked on a page.

  • I controlli server Web hanno un ciclo di vita non semplice che può rendere difficili le attività di sviluppo e debug.Web Server controls have a non-trivial lifecycle that can make developing and debugging difficult.

  • I controlli server Web consentono di aggiungere funzionalità agli elementi DOM (Document Object Model) del client tramite un controllo client.Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. Gli helper tag non includono DOM.Tag Helpers have no DOM.

  • I controlli server Web includono il rilevamento automatico del browser.Web Server controls include automatic browser detection. Gli helper tag non hanno conoscenza del browser.Tag Helpers have no knowledge of the browser.

  • Più helper tag possono agire sullo stesso elemento, vedere Avoiding Tag Helper conflicts (Evitare i conflitti degli helper tag), mentre non è possibile in genere comporre i controlli server Web.Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • Gli helper tag possono modificare il tag e il contenuto degli elementi HTML che rientrano nel proprio ambito, ma non modificano altro in modo diretto in una pagina.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. I controlli server Web hanno un ambito meno specifico e possono eseguire azioni che influiscono su altre parti della pagina, provocando effetti collaterali imprevisti.Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • I controlli server Web usano i convertitori di tipi per convertire le stringhe in oggetti.Web Server controls use type converters to convert strings into objects. Gli helper tag consentono di lavorare in modo nativo in C#, quindi la conversione dei tipi non è necessaria.With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • I controlli server Web usano System.ComponentModel per implementare il comportamento di componenti e controlli in fase di esecuzione e in fase di progettazione.Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel include le classi e le interfacce di base per l'implementazione di attributi e convertitori, l'associazione a origini dati e le licenze per i componenti.System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. Gli helper tag invece derivano in genere da TagHelper e la classe di base TagHelper espone solo due metodi, Process e ProcessAsync.Contrast that to Tag Helpers, which typically derive from TagHelper, and the TagHelper base class exposes only two methods, Process and ProcessAsync.

Personalizzazione del tipo di carattere dell'elemento helper tagCustomizing the Tag Helper element font

È possibile personalizzare il tipo di carattere e la colorazione in Strumenti > Opzioni > Ambiente > Tipi di carattere e colori:You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors:

immagine

Helper per tag incorporati di ASP.NET CoreBuilt-in ASP.NET Core Tag Helpers

Helper per tag di ancoraggioAnchor Tag Helper

Helper per tag di cacheCache Tag Helper

Helper per tag di cache distribuitaDistributed Cache Tag Helper

Helper per tag di ambienteEnvironment Tag Helper

FormActionTagHelperFormActionTagHelper

Helper per tag di moduloForm Tag Helper

Helper per tag di azione moduloForm Action Tag Helper

Helper per tag di immagineImage Tag Helper

Helper per tag di inputInput Tag Helper

Helper per tag di etichettaLabel Tag Helper

Helper per tag parzialePartial Tag Helper

Helper per tag di selezioneSelect Tag Helper

Helper per tag area di testoTextarea Tag Helper

Helper per tag messaggio di convalidaValidation Message Tag Helper

Helper per tag riepilogo di convalidaValidation Summary Tag Helper

Risorse aggiuntiveAdditional resources