Tag Helpers in ASP.NET MVC 6

ASP.NET MVC 6, which is a part of ASP.NET 5, introduces Tag Helpers. Tag Helpers generate HTML from elements and attributes in your Razor View Files. They are processed server-side and very similar to HTML Helpers. ASP.NET MVC 6 comes with a number of Tag Helpers, but you can also create your own custom Tag Helpers.

Importing Tag Helpers into ASP.NET MVC 6

In an ASP.NET MVC 6 Web Applications you can create a _ViewImports.cshtml file that provides the necessary syntax for importing Tag Helpers into your views.

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

This declaration imports all the Tag Helpers from the Microsoft.AspNet.Mvc.TagHelpers namespace, and you can of course limit the scope as well as choose additional namespaces that have Tag Helpers. It is also possible to import these Tag Helpers on a more view-by-view basis as opposed to importing them globally via the _ViewImports.cshtml file.

Using Tag Helpers in ASP.NET MVC 6 Razor View Files

Tag Helpers in ASP.NET MVC 6 generate HTML based on elements and attributes in your Razor View Files. The markup is very web designer-friendly since they appear as elements and attributes. A simple example of a Tag Helper is the Link Tag Helper, which will generate the proper URL for a link based upon the values provided by the asp-controller and asp-action attributes.

<a asp-controller="Home" asp-action="Index">Home</a>

When processed server-side the final HTML for this link could be rendered as such:

<a href="/">Home</a>

Obviously the final URL depends you on the routing configuration of your ASP.NET MVC 6 Web Application, but you get the idea. Razor generates the proper URL with help from the Tag Helpers.

You can use these same attributes when declaring Forms in your Razor Views and the Form Tag Helpers will generate the proper action ( URL ) for the form.

<form asp-controller="Account" asp-action="Login" ... >
<form action="/Account/Login" ... >

There are, of course, other Tag Helpers, but this gives you a quick overview of how to import and use Tag Helpers in your ASP.NET MVC 6 Web Applications. If you're familiar with HTML Helpers, the concept is very similar and easy to grasp.

Conclusion

I'll be writing more tutorials on ASP.NET 5 and ASP.NET MVC 6 in the future. If you are interested in hiring me to develop your next website, please contact me.