Tag Helpers in ASP.NET 5

If you’re an ASP.NET developer, you’re probably looking forward to the release of ASP.NET 5 early next year with a mix of unbridled excitement and dread: Excitement because Microsoft is finally letting go of the past, discarding the junk of the past as it rewrites things from the ground up. Dread because of all the existing code that you’re going to have to go through. The process of deciding whether to rewrite things from scratch or limp forward with the old stuff is no picnic.

Frankly, for me the excitement is so far overwhelming the dread. There is just too much that is good about ASP.NET 5 that is far more closely aligned with how the Web works today. And there are plenty of tools and enhancements that will make development fun again, as well as far more productive. Frankly, the last remaining Web Forms applications we maintain are well beyond needing to be rebuilt, so the release of ASP.NET 5 will provide a fine excuse to finally pull the trigger on those projects. Good riddance to Web Forms!

(But it’s important to note that they will live on in the .NET Framework 4.6 and later for years to come, although Microsoft isn’t going to spend any more time enhancing them. So no need to rush to migrate Web Forms projects to MVC in ASP.NET 5.)

One of the very sweet new features coming with ASP.NET 5 is tag helpers. Tag helpers usually don’t get much more than a bullet point and passing mention in discussions about what’s new in ASP.NET 5, but this one feature is going to make the code for your views cleaner and simpler, as well as easier for Web designers to implement.

Tag helpers replace HTML helpers from earlier versions of ASP.NET MVC. Tag helpers let you use HTML helpers in a view by simply extending the semantics of tags in your markup rather than through ugly Razor method calls that disrupt the flow of HTML markup with embedded .NET code. (Classic ASP has lived on far too long through HTML helpers and other embedded code in MVC views!) So you can implement some very powerful HTML generation techniques using element attributes instead of method calls. The result is much cleaner HTML code in your views.

The purpose of tag and HTML helpers are the same: to simplify the work required to dynamically modify a view’s HTML output based on the data fed to it by the controller. The difference between the two varieties of helpers is that tag helpers achieve this end through HTML element attributes instead of method calls. But in general, the HTML output from tag helpers should in most cases be identical to that from HTML helpers, other than some stylistic differences.

At this point in ASP.NET 5’s development, MVC provides several built-in tag helpers:

And you can, of course, build your own tag helpers.

You do have to opt into using tag helpers, using the @addTagHelper directive like this:

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

In a default ASP.NET Web Application project using the ASP.NET 5 Web Application preview template, you’ll find this directive in the _ViewImports.cshtml file.

A great way to see the different syntax for tag and HTML helpers is to create a new project in Visual Studio 2015 using the Web Application template, and a second project using the ASP.NET 4.5.2 MVC project template. The Account controller has several views you can compare. For example, Register.cshtml for the pre-ASP.NET 5 project has this code near the top of the form to let a user register on the site:

@Html.ValidationSummary("", new { @class = "text-danger" })

   @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

       @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

The ASP.NET 5 version of the view has the following code that uses tag helpers:

That’s all it takes to use tag helpers: just include variants of an asp-for attribute and you’re done. As you can see, the resulting HTML is much cleaner and simpler to implement.

Tag helpers are just one of many reasons to eagerly anticipate ASP.NET 5. We have to wait until November for a go-live license when release candidate 1 is scheduled for release, before using the new stuff in production applications. But all indications are that the wait is going to be well worth it.