25. Using Tag Helpers Flashcards
What are Tag Helpers?
Tag helpers are classes that manipulate HTML elements, either to change them in some way, to supplement them with additional content, or to replace them entirely with new content.
Tag helpers are C# classes that transform HTML elements in a view or page. Common uses for tag helpers include generating URLs for forms using the application’s routing configuration, ensuring that elements of a specific type are styled consistently, and replacing custom shorthand elements with commonly used fragments of content.
Why are Tag Helpers useful?
Tag helpers allow view content to be generated or transformed using C# logic, ensuring that the HTML sent to the client reflects the state of the application.
How are Tag Helpers used?
The HTML elements to which tag helpers are applied are selected based on the name of the class or with the HTMLTargetElement attribute. When a view is rendered, elements are transformed by tag helpers and included in the HTML sent to the client.
Are there any pitfalls or limitations to Tag Helpers?
It can be easy to get carried away and generate complex sections of HTML content using tag helpers, which is something that is more readily achieved using view components, described in Chapter 24.
Are there any alternatives to Tag Helpers?
You don’t have to use tag helpers, but they make it easy to generate complex HTML in ASP.NET Core applications.
What happens when you use a tag helper to transform an element?
By default, tag helpers apply to all elements of a specific type, which means that all the tr elements in the view have been transformed using the default values defined in the tag helper class, since no attributes were defined.
In fact, the problem is more serious because the @addTagHelper directives in the view import files mean that the example tag helper is applied to all tr elements used in any view rendered by controllers and Razor Pages. Use a browser to request http://localhost:5000/cities, for example, and you will see the tr elements in the response from Cities Razor Page have also been transformed
How is the range of elements that are transformed by a tag helper can be controlled
Using the HtmlTargetElement element on the tag helper class.
The HtmlTargetElement attribute describes the elements to which the tag helper applies. The first argument specifies the element type and supports the additional named properties:
Attributes
This property is used to specify that a tag helper should be applied only to elements that have a given set of attributes, supplied as a comma-separated list. An attribute name that ends with an asterisk will be treated as a prefix so that bg-* will match bg-color, bg-size, and so on.
ParentTag
This property is used to specify that a tag helper should be applied only to elements that are contained within an element of a given type.
TagStructure
This property is used to specify that a tag helper should be applied only to elements whose tag structure corresponds to the given value from the TagStructure enumeration, which defines Unspecified, NormalOrSelfClosing, and WithoutEndTag.
[HtmlTargetElement(“tr”, Attributes = “bg-color,text-color”, ParentTag =”thead”)]
How do you widen the scope of a tag helper?
The HtmlTargetElement attribute can also be used to widen the scope of a tag helper so that it matches a broader range of elements. This is done by setting the attribute’s first argument to an asterisk (the * character), which matches any element.
Care must be taken when using the asterisk because it is easy to match too widely and select elements that should not be transformed. A safer middle ground is to apply the HtmlTargetElement attribute for each type of element.
Example:
[HtmlTargetElement(“*”, Attributes = “bg-color,text-color”)]
changes the attribute applied to the example tag helper so that it matches any element that has bg-color and text-color attributes.
Second example:
[HtmlTargetElement(“tr”, Attributes = “bg-color,text-color”)]
[HtmlTargetElement(“td”, Attributes = “bg-color”)]
Is it possible to create Elements Programmatically?
Yes, using the TagBuilder class.
this:
TagBuilder header = new TagBuilder(“th”);
header.Attributes[“colspan”] = “2”;
header.InnerHtml.Append(content);
TagBuilder row = new TagBuilder("tr");
row.InnerHtml.AppendHtml(header);
output.Content.SetHtmlContent(row);
Instead of this:
output.Content
.SetHtmlContent($”{content}”);
How to Insert Content Around the Output Element?
Using PreElement and PostElement, which are used to insert elements into the view before and after the output element.
Ho to Insert Content Inside the Output Element?
The PreContent and PostContent properties are used to insert content inside the output element, surrounding the original content.
Getting View Context Data
A common use for tag helpers is to transform elements so they contain details of the current request or the view model/ page model, which requires access to context data.
The tag helper transforms div elements that have a route-data attribute whose value is true and populates the output element with a list of the segment variables obtained by the routing system.
To get the route data, I added a property called Context and decorated it with two attributes, like this:
…
[ViewContext]
[HtmlAttributeNotBound]
public ViewContext Context { get; set; }
…
The ViewContext attribute denotes that the value of this property should be assigned a ViewContext object when a new instance of the tag helper class is created, which provides details of the view that is being rendered, including the routing data, as described in Chapter 13. The HtmlAttributeNotBound attribute prevents a value from being assigned to this property if there is a matching attribute defined on the div element. This is good practice, especially if you are writing tag helpers for other developers to use.
What are tage helper components?
Tag helper components provide an alternative approach to applying tag helpers as services. This feature can be useful when you need to set up tag helpers to support another service or middleware component, which is typically the case for diagnostic tools or functionality that has both a client-side component and a server-side component, such as Blazor
How to create a Tag Helper Component?
Tag helper components are derived from the TagHelperComponent class.
Tag helper components do not specify the elements they transform, and the Process method is invoked for every element for which the tag helper component feature has been configured. By default, tag helper components are applied to transform head and body elements. This means that tag helper component classes must check the TagName property of the output element to ensure they perform only their intended transformations.
