As ASP.NET 5 gets closer and closer to an official release date (in beta 7 at the time this post was written), the ASP.NET community is getting more curious (skeptical maybe?) about what is next. While this is not a “Why ASP.NET 5?” post, it is in the spirit of providing evidence toward that objective – one way or another. I find getting to know a specific feature that is new to a framework usually exposes underlying improvements to the overall story. With that said, this is the first post in a series that will dive into tag helpers in ASP.NET 5.
First, I want to define what a tag helper is. A tag helper is server-side code that allows for the customization of HTML markup (from the developers perspective) and manipulation of output rendered to the browser. So, when an element is recognized in server-side processing as a tag helper, it is executed to generate HTML that will either enhance or even completely replace the original tag helper markup.
For those who have been developing with ASP.NET MVC for awhile, tag helpers will supersede HTML helpers. Many blog posts and articles I have read on the topic of tag helpers typically go into a detailed comparison of the advantages of the new improved syntax over HTML helpers. While such a comparison is helpful to existing ASP.NET MVC developers, it could potentially confuse a new developer to ASP.NET as to the tag helper’s purpose or value. So while I will offer a brief comparison a little later in this post, my angle will strive to be on the features as autonomously to HTML helpers as possible.
Now back to the main question at hand – why tag helpers in ASP.NET 5? To put it simply, the purpose of a tag helper is ultimately bound to the pursuit of making code and markup easier to read and manage.
Let’s look at one example how. This is the brief comparison I referenced earlier regarding HTML helpers. In the code below, HTML helpers are defined to create an HTML form for submitting registration information:
For anyone brand new to ASP.NET, but strong in web development, the above code could look very confusing. Questions might impede understanding like: What does that do? Does it generate HTML? How can I control it? … I will not be answering those questions, since my focus is not to explain the HTML helper. So let’s look at the same example, but with the syntax using tag helpers:
Consider how a polished web developer new to ASP.NET would read the markup above. There would be no confusion over what the <form> or <div> tags were. Instead, it would be apparent that some attributes in the elements are unique to ASP.NET, such as asp-controller. With a little guess work, it could be inferred that a <form> tag will render to the browser with information on how and what to submit to. It could also be guessed that the <div> tag is a placeholder for validation information. Although the exact markup will not be the same as the tag helper, it certainly doesn’t look as foreign as HTML helpers.
How can you get started with tag helpers? If you are using the default template for ASP.NET 5 with sample content in it, you are already using them! The registration snippet referenced earlier is from that project. However, if you start with an empty project, you will need to add support for tag helpers. First, make sure you have referenced the package in the project.json file as seen here:
Next, to use the existing tag helpers, add the following to a view that uses it or at a global level such as in the _ViewImports.cshtml file:
Now you are ready to use the tag helpers provided with ASP.NET 5. In an upcoming post, I will demonstrate how and why to develop your own custom tag helper!
