ASP.NET Core 1.0 - Quick Look at RAZOR Views new Tag Helpers

Author by Sam Figie

I have been very intrigued by the announcement of ASP.NET Core 1.0 and have seen some impressive demos this year's Build Conference.   In case you missed some background, the "next" ASP.NET version formerly known as ASP.NET 5 is now not really the "next" version but should be thought of as a new framework, or fork entirely.  This means that ASP.NET 4.6 is still very relevant and is expected to be used for quite some time.  The analogy I heard to describe ASP.NET Core is that it is a high performance race car, that has been stripped down to the bare essentials it needs, whereas 4.6 is very stable and feature rich.  That said, Core has been broken down to be very modular so as a developer you have more control of what is "in" by default and minimal overhead can be achieved.  One of the sessions I attended during Build this year regarding this topic can be found here, which I would highly recommend . 

 

Of the many features that are being revealed through the ASP.NET 5 RC's and other announcements, one of the first things that peeked my interest were the updates to RAZOR views with the addition of tag helpers.  The cool thing about these new tag helpers is, it allows the developer to create Razor views that look more like HTML and less like C#.  Now instead of using HTML helper methods, the same functionality can be can be achieved by using tag helpers, which act as attributes on HTML tags, for example 

01.png 

becomes

02.png

 This makes developing RAZOR views easier for those who are more accustomed to developing traditional HTML.  By using tag helpers, developers can use what is more familiar, especially if you are familiar with Angular JS tag attribute syntax where any Angular specific attributes are prefixed with "ng-", and similarly with Razor tag helpers, attributes are prefixed with "asp-".

 

To demonstrate this even further, I have put together a simple feedback form for a website with a set of fields common to this use case.  

03.png

 

 

 

 

 

 

 

 

 

 

 

 

Below is the markup for building the form using only HTML helpers.

04.png

And again, the same form markup, but this time using only the new Tag Helpers.  

05.png

As you can see there is a significant difference between the two approaches.  Notice how concise and clean the code looks when using tag helpers as opposed to HTML helpers.  Not only that, when reading the markup with tag helpers is much easier to visualize mentally what the view looks like, as the tag helpers feel more of an extension of the HTML markup instead of a replacement or distraction. 

 

06.pngOne last benefit to using tag helpers is we now get intellisense for CSS on RAZOR elements.  Because the Razor elements are blended into the HTML tags as attributes editing HTML markup with asp tag helpers allows for all the standard HTML intellisense to be available in the editor.  Previously, when using HTML Helpers, it was all under the context of C# code so adding html attributes like classes is done without the help of intellisense because the parser is reading the text as C# code instead of HTML markup.  

 

It will be exciting to explore some of the many other new feature sets that will be a part of ASP.NET Core 1.0 such as asynchronous partial views and razor view dependency injection, along with others as they are implemented for the RTM and future releases.  For more information on tag helpers you can find the in progress  documentation.

 

 

 

Tags in this Article