ASP.NET Core has introduced a new feature, by which developers can change and enhance the functionality of HTML mark-up using server-side code, such as C#. tag helpers are easy to use by both developers and web designers, allowing them to leverage the power of C# and HTML concurrently.
Read: C# Tools for Code Quality
ASP.NET Core ships with some built-in tag helpers, such as anchor, image, form, cache, environment, and so forth. Moreover, developers can also create custom tag helpers that they can use in a similar manner to how built-in tag helpers are used.
In this ASP.NET programming tutorial, we will discuss what tag helpers are, how they are used in Razor views, what the different built-in tag helpers are, and how to use them in your ASP.NET Core website projects.
Despite these built-in tag helpers, coders can create custom tag helpers in their ASP.NET projects. The topic of creating custom tag helpers is so wide that it cannot be covered completely in one programming tutorial. With that in mind, we will be describing the process of creating custom tag helpers right from the start in our tag helper development guide.
What are Tag Helpers in ASP.NET?
Tag helpers help .NET developers to create a presentation layer in their web applications. You can think of tag helpers as a tool for programmers to incorporate a presentation layer into their applications. Not only can they work on the presentation layer using traditional HTML tags, but they can also write business logic in programming languages such as C#, which are run on the server-side. Tag helpers enable developers to be able to replace Razor syntax with a more natural-looking (and reading) HTML code.
With the advent of tag helpers, developers can extend the functionality of existing HTML elements or create custom components that look and behave like an HTML element.
Using tag helpers, web developers can develop custom elements, and, just like any HTML element, have names and attributes associated with them. Further, programmers can also define the name, attribute, and parent name of those custom elements using C# code in their Razor files.
Note that tag helpers were not created or intended to replace HTML helpers; you can use any, or both of them, as per the requirements of your web applications.
How to Use Tag Helps in ASP.NET
Now, let’s talk about how you can use tag helpers in your ASP.NET website project. Tag helpers can be used in the following three manners.
Read: Productivity Tools for .NET Developers
Tag Helpers as an HTML Attribute
Developers can use a custom or built-in tag helper with an HTML element in the context of an attribute, as shown in this sample code:
<img src=”~/images/tulip.png” asp-append-version=”true”/>
Tag Helpers as an HTML Tag
Programmers can use a custom tag helper as a custom HTML tag with any HTML element. Here is the syntax for creating a custom HTML tag:
<my-custom-tag></my-custom-tag>
For example, you can use the environment tag helper, which is very useful in cases where you want to render HTML content that is based on the current environment:
<environment names=”Development”> <script scr=”~/lib/jquery/dist/jquery.js”></script> </environment>
Tag Helpers as Child Elements of HTML Elements
Lastly, you can also employ tag helpers as a child element of an existing HTML element.
What Are the Differences Between Tag Helpers and HTML Helpers?
You might be thinking: aren’t tag helpers the same as HTML helpers? Even experienced web developers, at some point in time, might get confused about the differences between tag helpers and HTML helpers and treat them the same. Yes, it is somewhat true that they are the same, because, in a sense, tag helpers were previously known as HTML helpers. However, there is a difference in their functionality.
Here are some ways that tag helpers differ from HTML helpers:
- Tag Helpers work with HTML elements in Razor views. This enables developers to write clean and concise code. For example, consider the following code that depicts Label as a tag helper:
The asp-for is attached to the Label HTML element and enhances its functionality.
- HTML helpers, meanwhile, can be called as a method. For example, consider the following code:
@Html.Label("City", "Full City:", new {@class="emp-city"})In this code, we are calling the Label method to generate a label.
- Tag helpers enable developers to write HTML-friendly code. Most of the tag helpers look like HTML elements. There is no need to know C# code while working with tag helpers – that is why HTML developers and designers can work on Razor views without even knowing C# code.
- HTML helpers do not provide an HTML-friendly code environment. Designers and developers need to be aware of C# and Razor syntax to be able to work with HTML helpers.
- Visual Studio provides good IntelliSense support for tag helpers.
- Visual Studio does not provide good IntelliSense support for HTML helpers.
Read: Project Management Software for .NET Developers
Built-in Tag Helpers in ASP.NET
For the convenience of developers, Microsoft has provided a list of several built-in tag helpers that you can use in your ASP.NET Core web applications. They are highlighted below.
Form Tag Helper
The form tag helper makes it easier for .NET developers to work with forms in an ASP.NET website. You can find it useful while working with forms in Razor views as well:
Below is the generated HTML code of the above code:
A form tag helper has the following characteristics:
- It can automatically set the action attribute (if you do not provide it explicitly) that matches with the MVC controller action or named route.
- Using the form tag helper in views is pretty useful for preventing cross-origin forgery attacks.
Image Tag Helper
The image tag helper enhances the functionality of the HTML img element with the feature of cache-busting. Cache busting is a technique that is used to append a unique version to the image file’s URL. Every time this unique version is changed, the browser retrieves the updated version of the image from the server while ignoring the currently cached version of that image. In this way, the image tag helper solves the browser caching problem. The image tag helper has a property called asp-append-version for supporting the cache busting feature in ASP.NET websites.
<img src="~/images/tulip.jpg" asp-append-version="true">
The above image tag helper will produce the following HTML code:
<img src="/images/tulip.jpg?v=M9_b7ioNVtnMdsM2MUg4qthUnWZm5T1fCEimBPWDNT6">
Anchor Tag Helper
The anchor tag helper extends the functionality of the HTML a tag by adding new attributes.
The attribute name starts with “asp-“, as per the standard convention. Examples of such attributes are: asp-controller, asp-action, asp-route, asp-area, asp-all-route-data, and so forth.
For instance, you can add attributes such as asp-controller to generate a URL that points to that specific controller or an asp-action attribute to form an association between a particular MVC action method and the a element, or to generate the URL for an a href attribute:
<a asp-controller=”Employee” asp-action=”Index” asp-route-id=”@Model.Id”> Employee ID: @Model.EmployeeId </a>
Cache Tag Helper
The cache tag helper lets developers cache the content of their websites with the ASP.NET Core cache provider. This helper tag object helps by improving the performance of a web application. The cache helper tag is used to cache data.
<cache enabled=”true”> Last Cache Time: @DateTime.Now </cache>
The cache tag helper has an attribute called enabled that is of the type Boolean and that determines whether the content enclosed within the tag helper is cached or not. By default, the value of this Boolean type is true; however, if you set its value to false then it will no longer cache the content.
Environment Tag Helper
The environment tag helper lets programmers render text-based HTML on the current environment variables set.
This tag helper is applied on the environment HTML tag and determines the current value of environment variables, and, thus, renders the content based on that environment. It is based on the different content cache:
Current application environment is Production
<environment names=”Production”> <p> Current application environment is Production </p> </environment>
You can also assign multiple comma-separated values to the names attribute as depicted in the following code example:
<environment names=”Production,Development”> ... </environment> </pre>
Conventionally, this tag helper supports three environment variables: development, staging, and production. However, you can provide any string value to it.
What are the Advantages of Tag Helpers?
Below are some of the advantages developers can leverage in their web development process using tag helpers:
- Tag Helpers use server-side binding without even making use of server-side code (i.e. C# code).
- If you are using Visual Studio for development purposes, it provides very good IntelliSense support for HTML and Razor mark-up.
- Designers, Front-end developers and HTML developers can find it easy to work with tag helpers on Razor view page without knowing anything about server-side code.
Final Thoughts on Tag Helpers in ASP.NET
In this web development tutorial, we have discussed tag helpers in ASP.NET Core. You can use tag helpers to extend the functionality of existing HTML elements. The main objective of using tag helpers is that they provide additional control over the content of HTML elements and attributes. In this post, we have also shown you some of the frequently used tag helpers.
Read more ASP.NET web development tutorials.
