Auxiliares de Marca no ASP.NET CoreTag Helpers in ASP.NET Core

Por Rick AndersonBy Rick Anderson

E que são Auxiliares de Marca?What are Tag Helpers?

Os Auxiliares de Marca permitem que o código do lado do servidor participe da criação e renderização de elementos HTML em arquivos do Razor.Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Por exemplo, o ImageTagHelper interno pode acrescentar um número de versão ao nome da imagem.For example, the built-in ImageTagHelper can append a version number to the image name. Sempre que a imagem é alterada, o servidor gera uma nova versão exclusiva para a imagem, de modo que os clientes tenham a garantia de obter a imagem atual (em vez de uma imagem obsoleta armazenada em 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). Há muitos Auxiliares de Marca internos para tarefas comuns – como criação de formulários, links, carregamento de ativos e muito mais – e ainda outros disponíveis em repositórios GitHub públicos e como 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. Os Auxiliares de Marca são criados no C# e são direcionados a elementos HTML de acordo com o nome do elemento, o nome do atributo ou a marca pai.Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. Por exemplo, o LabelTagHelper interno pode ser direcionado ao elemento <label> HTML quando os atributos LabelTagHelper são aplicados.For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. Se você está familiarizado com Auxiliares HTML, os Auxiliares de Marca reduzem as transições explícitas entre HTML e C# em exibições do Razor.If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. Em muitos casos, os Auxiliares HTML fornecem uma abordagem alternativa a um Auxiliar de Marca específico, mas é importante reconhecer que os Auxiliares de Marca não substituem os Auxiliares HTML e que não há um Auxiliar de Marca para cada Auxiliar 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. Comparação entre Auxiliares de Marca e Auxiliares HTML explica as diferenças mais detalhadamente.Tag Helpers compared to HTML Helpers explains the differences in more detail.

O que os Auxiliares de Marca fornecemWhat Tag Helpers provide

Uma experiência de desenvolvimento amigável a HTML Na maioria dos casos, a marcação do Razor com Auxiliares de Marca parece um HTML padrão.An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. Designers de front-end familiarizados com HTML/CSS/JavaScript podem editar o Razor sem aprender a sintaxe Razor do C#.Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

Um ambiente avançado do IntelliSense para criação do HTML e da marcação do Razor Isso é um nítido contraste com Auxiliares HTML, a abordagem anterior para a criação do lado do servidor de marcação nas exibições do 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. Comparação entre Auxiliares de Marca e Auxiliares HTML explica as diferenças mais detalhadamente.Tag Helpers compared to HTML Helpers explains the differences in more detail. Suporte do IntelliSense para Auxiliares de Marca explica o ambiente do IntelliSense.IntelliSense support for Tag Helpers explains the IntelliSense environment. Até mesmo desenvolvedores experientes com a sintaxe Razor do C# são mais produtivos usando Auxiliares de Marca do que escrevendo a marcação do Razor do C#.Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

Uma maneira de fazer com que você fique mais produtivo e possa produzir um código mais robusto, confiável e possível de ser mantido usando as informações apenas disponíveis no servidor Por exemplo, historicamente, o mantra da atualização de imagens era alterar o nome da imagem quando a imagem era alterada.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. As imagens devem ser armazenadas em cache de forma agressiva por motivos de desempenho e, a menos que você altere o nome de uma imagem, você corre o risco de os clientes obterem uma cópia obsoleta.Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. Historicamente, depois que uma imagem era editada, o nome precisava ser alterado e cada referência à imagem no aplicativo Web precisava ser atualizada.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. Não apenas isso exige muito trabalho, mas também é propenso a erros (você pode perder uma referência, inserir a cadeia de caracteres incorreta acidentalmente, etc.) O ImageTagHelper interno pode fazer isso para você automaticamente.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. O ImageTagHelper pode acrescentar um número de versão ao nome da imagem, de modo que sempre que a imagem é alterada, o servidor gera automaticamente uma nova versão exclusiva para a imagem.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. Os clientes têm a garantia de obter a imagem atual.Clients are guaranteed to get the current image. Basicamente, essa economia na robustez e no trabalho é obtida gratuitamente com o ImageTagHelper.This robustness and labor savings comes essentially free by using the ImageTagHelper.

A maioria dos auxiliares de marca internos é direcionada a elementos HTML padrão e fornece atributos do lado do servidor para o elemento.Most built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. Por exemplo, o elemento <input> usado em várias exibições na pasta Exibição/Conta contém o atributo asp-for.For example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. Esse atributo extrai o nome da propriedade do modelo especificado no HTML renderizado.This attribute extracts the name of the specified model property into the rendered HTML. Considere uma exibição Razor com o seguinte modelo: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; }
}

A seguinte marcação do Razor:The following Razor markup:

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

Gera o seguinte HTML:Generates the following HTML:

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

O atributo asp-for é disponibilizado pela propriedade For no LabelTagHelper.The asp-for attribute is made available by the For property in the LabelTagHelper. Confira Auxiliares de marca de autor para obter mais informações.See Author Tag Helpers for more information.

Gerenciando o escopo do Auxiliar de MarcaManaging Tag Helper scope

O escopo dos Auxiliares de Marca é controlado por uma combinação de @addTagHelper, @removeTagHelper e o caractere de recusa "!".Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

@addTagHelper disponibiliza os Auxiliares de Marca@addTagHelper makes Tag Helpers available

Se você criar um novo aplicativo Web ASP.NET Core chamado AuthoringTagHelpers, o seguinte arquivo Views/_ViewImports.cshtml será adicionado ao projeto: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

A diretiva @addTagHelper disponibiliza os Auxiliares de Marca para a exibição.The @addTagHelper directive makes Tag Helpers available to the view. Nesse caso, o arquivo de exibição é Pages/_ViewImports.cshtml, que é herdado por padrão por todos os arquivos na pasta Páginas e suas subpastas, disponibilizando os Auxiliares de Marca.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. O código acima usa a sintaxe de curinga ("*") para especificar que todos os Auxiliares de Marca no assembly especificado (Microsoft.AspNetCore.Mvc.TagHelpers) estarão disponíveis para todos os arquivos de exibição no diretório Views ou subdiretório.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. O primeiro parâmetro após @addTagHelper especifica os Auxiliares de Marca a serem carregados (estamos usando "*" para todos os Auxiliares de Marca) e o segundo parâmetro "Microsoft.AspNetCore.Mvc.TagHelpers" especifica o assembly que contém os Auxiliares de Marca.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 é o assembly para os Auxiliares de Marca internos do ASP.NET Core.Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

Para expor todos os Auxiliares de Marca neste projeto (que cria um assembly chamado AuthoringTagHelpers), você usará o seguinte: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 o projeto contém um EmailTagHelper com o namespace padrão (AuthoringTagHelpers.TagHelpers.EmailTagHelper), forneça o FQN ( nome totalmente qualificado) do Auxiliar de Marca: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

Para adicionar um Auxiliar de Marca a uma exibição usando um FQN, primeiro adicione o FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper) e, em seguida, o nome do 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). A maioria dos desenvolvedores prefere usar a sintaxe de curinga "*".Most developers prefer to use the "*" wildcard syntax. A sintaxe de curinga permite que você insira o caractere curinga "*" como o sufixo de um FQN.The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. Por exemplo, uma das seguintes diretivas exibirá o EmailTagHelper:For example, any of the following directives will bring in the EmailTagHelper:

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

Conforme mencionado anteriormente, a adição da diretiva @addTagHelper ao arquivo Views/_ViewImports.cshtml disponibiliza o Auxiliar de Marca para todos os arquivos de exibição no diretório Views e subdiretórios.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. Use a diretiva @addTagHelper nos arquivos de exibição específicos se você deseja aceitar a exposição do Auxiliar de Marca a apenas essas exibições.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 remove os Auxiliares de Marca@removeTagHelper removes Tag Helpers

O @removeTagHelper tem os mesmos dois parâmetros @addTagHelper e remove um Auxiliar de Marca adicionado anteriormente.The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. Por exemplo, @removeTagHelper aplicado a uma exibição específica remove o Auxiliar de Marca especificado da exibição.For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. O uso de @removeTagHelper em um arquivo Views/Folder/_ViewImports.cshtml remove o Auxiliar de Marca especificado de todas as exibições em Folder.Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder.

Controlando o escopo do Auxiliar de Marca com o arquivo _ViewImports.cshtmlControlling Tag Helper scope with the _ViewImports.cshtml file

Adicione um _ViewImports.cshtml a qualquer pasta de exibição e o mecanismo de exibição aplicará as diretivas desse arquivo e do arquivo 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. Se você adicionou um arquivo Views/Home/_ViewImports.cshtml vazio às exibições Home, não haverá nenhuma alteração porque o arquivo _ViewImports.cshtml é aditivo.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. As diretivas @addTagHelper que você adicionar ao arquivo Views/Home/_ViewImports.cshtml (que não estão no arquivo Views/_ViewImports.cshtml padrão) exporão os Auxiliares de Marca às exibições somente na pasta 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.

Recusando elementos individuaisOpting out of individual elements

Desabilite um Auxiliar de Marca no nível do elemento com o caractere de recusa do Auxiliar de Marca ("!").You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). Por exemplo, a validação Email está desabilitada no <span> com o caractere de recusa do Auxiliar de Marca: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>

É necessário aplicar o caractere de recusa do Auxiliar de Marca à marca de abertura e fechamento.You must apply the Tag Helper opt-out character to the opening and closing tag. (O editor do Visual Studio adiciona automaticamente o caractere de recusa à marca de fechamento quando um é adicionado à marca de abertura).(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). Depois de adicionar o caractere de recusa, o elemento e os atributos do Auxiliar de Marca deixam de ser exibidos em uma fonte diferenciada.After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

Usando @tagHelperPrefix para tornar explícito o uso do Auxiliar de MarcaUsing @tagHelperPrefix to make Tag Helper usage explicit

A diretiva @tagHelperPrefix permite que você especifique uma cadeia de caracteres de prefixo de marca para habilitar o suporte do Auxiliar de Marca e tornar explícito o uso do Auxiliar de Marca.The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. Por exemplo, você pode adicionar a seguinte marcação ao arquivo Views/_ViewImports.cshtml:For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

Na imagem do código abaixo, o prefixo do Auxiliar de Marca é definido como th:; portanto, somente esses elementos que usam o prefixo th: dão suporte a Auxiliares de Marca (elementos habilitados para Auxiliar de Marca têm uma fonte diferenciada).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). Os elementos <label> e <input> têm o prefixo do Auxiliar de Marca e são habilitados para Auxiliar de Marca, ao contrário do elemento <span>.The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element doesn't.

imagem

As mesmas regras de hierarquia que se aplicam a @addTagHelper também se aplicam a @tagHelperPrefix.The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

Auxiliares de Marca com autofechamentoSelf-closing Tag Helpers

Muitos Auxiliares de Marca não podem ser usados como marcações com autofechamento.Many Tag Helpers can't be used as self-closing tags. Alguns Auxiliares de Marca são projetados para serem marcações com autofechamento.Some Tag Helpers are designed to be self-closing tags. Usar um Auxiliar de Marca que não foi projetado para ser de autofechamento suprime a saída renderizada.Using a Tag Helper that was not designed to be self-closing suppresses the rendered output. Um Auxiliar de Marca com autofechamento resulta em uma marca com autofechamento na saída renderizada.Self-closing a Tag Helper results in a self-closing tag in the rendered output. Para obter mais informações, confira esta observação em Criando Auxiliares de Marca.For more information, see this note in Authoring Tag Helpers.

Suporte do IntelliSense para Auxiliares de MarcaIntelliSense support for Tag Helpers

Quando você cria um novo aplicativo Web ASP.NET Core no Visual Studio, ele adiciona o pacote 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". Esse é o pacote que adiciona ferramentas do Auxiliar de Marca.This is the package that adds Tag Helper tooling.

Considere a escrita de um elemento <label> HTML.Consider writing an HTML <label> element. Assim que você insere <l no editor do Visual Studio, o IntelliSense exibe elementos correspondentes:As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

imagem

Não só você obtém a ajuda do HTML, mas também o ícone (o "@" symbol with "<>" abaixo dele).Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).

imagem

identifica o elemento como direcionado a Auxiliares de Marca.identifies the element as targeted by Tag Helpers. Elementos HTML puros (como o fieldset) exibem o ícone "<>".Pure HTML elements (such as the fieldset) display the "<>" icon.

Uma marca <label> HTML pura exibe a marca HTML (com o tema de cores padrão do Visual Studio) em uma fonte marrom, os atributos em vermelho e os valores de atributo em azul.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.

imagem

Depois de inserir <label, o IntelliSense lista os atributos HTML/CSS disponíveis e os atributos direcionados ao Auxiliar de Marca:After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

imagem

O preenchimento de declaração do IntelliSense permite que você pressione a tecla TAB para preencher a declaração com o valor selecionado:IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:

imagem

Assim que um atributo do Auxiliar de Marca é inserido, as fontes da marca e do atributo são alteradas.As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. Usando o tema de cores padrão "Azul" ou "Claro" do Visual Studio, a fonte é roxo em negrito.Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. Se estiver usando o tema "Escuro", a fonte será azul-petróleo em negrito.If you're using the "Dark" theme the font is bold teal. As imagens deste documento foram obtidas usando o tema padrão.The images in this document were taken using the default theme.

imagem

Insira o atalho CompleteWord do Visual Studio – Ctrl + barra de espaços é o padrão dentro das aspas duplas ("") e você está agora no C#, exatamente como estaria em uma classe do 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. O IntelliSense exibe todos os métodos e propriedades no modelo de página.IntelliSense displays all the methods and properties on the page model. Os métodos e as propriedades estão disponíveis porque o tipo de propriedade é ModelExpression.The methods and properties are available because the property type is ModelExpression. Na imagem abaixo, estou editando a exibição Register e, portanto, o RegisterViewModel está disponível.In the image below, I'm editing the Register view, so the RegisterViewModel is available.

imagem

O IntelliSense lista as propriedades e os métodos disponíveis para o modelo na página.IntelliSense lists the properties and methods available to the model on the page. O ambiente avançado de IntelliSense ajuda você a selecionar a classe CSS:The rich IntelliSense environment helps you select the CSS class:

imagem

imagem

Comparação entre Auxiliares de Marca e Auxiliares HTMLTag Helpers compared to HTML Helpers

Os Auxiliares de Marca são anexados a elementos HTML em exibições do Razor, enquanto os Auxiliares HTML são invocados como métodos intercalados com HTML nas exibições do Razor.Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. Considere a seguinte marcação do Razor, que cria um rótulo HTML com a 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"})

O símbolo de arroba (@) informa o Razor de que este é o início do código.The at (@) symbol tells Razor this is the start of code. Os dois próximos parâmetros ("FirstName" e "First Name:") são cadeias de caracteres; portanto, o IntelliSense não pode ajudar.The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. O último argumento:The last argument:

new {@class="caption"}

É um objeto anônimo usado para representar atributos.Is an anonymous object used to represent attributes. Como a classe é uma palavra-chave reservada no C#, use o símbolo @ para forçar o C# a interpretar "@class=" como um símbolo (nome da propriedade).Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret "@class=" as a symbol (property name). Para um designer de front-end (alguém familiarizado com HTML/CSS/JavaScript e outras tecnologias de cliente, mas não familiarizado com o C# e Razor), a maior parte da linha é estranha.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. Toda a linha precisa ser criada sem nenhuma ajuda do IntelliSense.The entire line must be authored with no help from IntelliSense.

Usando o LabelTagHelper, a mesma marcação pode ser escrita como:Using the LabelTagHelper, the same markup can be written as:

imagem

Com a versão do Auxiliar de Marca, assim que você insere <l no editor do Visual Studio, o IntelliSense exibe elementos correspondentes:With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

imagem

O IntelliSense ajuda você a escrever a linha inteira.IntelliSense helps you write the entire line. O LabelTagHelper também usa como padrão a definição do conteúdo do valor de atributo asp-for ("FirstName") como "First Name"; ele converte propriedades concatenadas em uma frase composta do nome da propriedade com um espaço em que ocorre cada nova letra maiúscula.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. Na seguinte marcação:In the following markup:

imagem

gera:generates:

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

O conteúdo concatenado para maiúsculas e minúsculas não é usado se você adiciona o conteúdo ao <label>.The camel-cased to sentence-cased content isn't used if you add content to the <label>. Por exemplo:For example:

imagem

gera:generates:

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

A imagem de código a seguir mostra a parte do Formulário da exibição do Razor Views/Account/Register.cshtml gerada com base no modelo herdado do ASP.NET 4.5 MVC incluído com o Visual Studio 2015.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.

imagem

O editor do Visual Studio exibe o código C# com uma tela de fundo cinza.The Visual Studio editor displays C# code with a grey background. Por exemplo, o Auxiliar HTML AntiForgeryToken:For example, the AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

é exibido com uma tela de fundo cinza.is displayed with a grey background. A maior parte da marcação na exibição Register é C#.Most of the markup in the Register view is C#. Compare isso com a abordagem equivalente ao uso de Auxiliares de Marca:Compare that to the equivalent approach using Tag Helpers:

imagem

A marcação é muito mias limpa e fácil de ler, editar e manter que a abordagem dos Auxiliares HTML.The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. O código C# é reduzido ao mínimo que o servidor precisa conhecer.The C# code is reduced to the minimum that the server needs to know about. O editor do Visual Studio exibe a marcação direcionada por um Auxiliar de Marca em uma fonte diferenciada.The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

Considere o grupo 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>

Cada um dos atributos "asp-" tem um valor "Email", mas "Email" não é uma cadeia de caracteres.Each of the "asp-" attributes has a value of "Email", but "Email" isn't a string. Nesse contexto, "Email" é a propriedade da expressão do modelo C# para o RegisterViewModel.In this context, "Email" is the C# model expression property for the RegisterViewModel.

O editor do Visual Studio ajuda você a escrever toda a marcação na abordagem do Auxiliar de Marca de formulário de registro, enquanto o Visual Studio não fornece nenhuma ajuda para a maioria do código na abordagem de Auxiliares 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. Suporte do IntelliSense para Auxiliares de Marca apresenta detalhes sobre como trabalhar com Auxiliares de Marca no editor do Visual Studio.IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

Comparação entre Auxiliares de Marca e Controles de Servidor WebTag Helpers compared to Web Server Controls

  • Os Auxiliares de Marca não têm o elemento ao qual estão associados; simplesmente participam da renderização do elemento e do conteúdo.Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. Os controles de Servidor Web do ASP.NET são declarados e invocados em uma página.ASP.NET Web Server controls are declared and invoked on a page.

  • Os controles de Servidor Web têm um ciclo de vida não trivial que pode dificultar o desenvolvimento e a depuração.Web Server controls have a non-trivial lifecycle that can make developing and debugging difficult.

  • Os controles de Servidor Web permitem que você adicione a funcionalidade aos elementos DOM (Modelo de Objeto do Documento) do cliente usando um controle de cliente.Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. Os Auxiliares de Marca não tem nenhum DOM.Tag Helpers have no DOM.

  • Os controles de Servidor Web incluem a detecção automática do navegador.Web Server controls include automatic browser detection. Os Auxiliares de Marca não têm nenhum conhecimento sobre o navegador.Tag Helpers have no knowledge of the browser.

  • Vários Auxiliares de Marca podem atuar no mesmo elemento (consulte Evitando conflitos do Auxiliar de Marca), embora normalmente não seja possível compor controles de Servidor Web.Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • Os Auxiliares de Marca podem modificar a marca e o conteúdo de elementos HTML no escopo com o qual foram definidos, mas não modificam diretamente todo o resto em uma página.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. Os controles de Servidor Web têm um escopo menos específico e podem executar ações que afetam outras partes da página, permitindo efeitos colaterais não intencionais.Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • Os controles de Servidor Web usam conversores de tipo para converter cadeias de caracteres em objetos.Web Server controls use type converters to convert strings into objects. Com os Auxiliares de Marca, você trabalha nativamente no C# e, portanto, não precisa fazer a conversão de tipo.With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • Os controles de Servidor Web usam System.ComponentModel para implementar o comportamento de componentes e controles em tempo de execução e em tempo de design.Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel inclui as interfaces e as classes base para implementar atributos e conversores de tipo, associar a fontes de dados e licenciar componentes.System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. Compare isso com os Auxiliares de Marca, que normalmente são derivados de TagHelper, e a classe base TagHelper expõe apenas dois métodos, 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.

Personalizando a fonte de elemento do Auxiliar de MarcaCustomizing the Tag Helper element font

Personalize a fonte e a colorização em Ferramentas > Opções > Ambiente > Fontes e Cores:You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors:

imagem

Recursos adicionaisAdditional resources