ASP.MVC 6 razor tag helpers for more designer friendly view markup

I’m really liking a lot of the ASP.NET 5 stuff which is coming down the line. Cross platform capabilities are cool, but more relevant and ‘exciting’ to me is the out of the box IOC container which hopefully will result in one less dependency on Ninject, CastleWindsor etc. and dynamic development which means I can change server side code, save and just refresh the browser without restarting the debug session.

On the MVC side, version 6 introduces tag helpers which I really like too. These allow us to get the same viewModel binding benefits of HTML helpers by applying data attributes to HTML tags rather than using the C# HTML helpers directly via @Html.TextBoxFor, @Html.LabelFor etc.

Markup in my opinion becomes less server side like, less ASP.NET MVC specific and more cleaner and client-side like meaning it would be easier for designers to work more fully on the views. The below example is from Dave Paquette’s introduction article on tag helpers which I link to below.

Example differences in markup between html helper and tag helper
Example differences in markup between html helper and tag helper

You can see that by using tag helpers we can specify things like classes, styles and other attributes (such as angular and knockout markup) in the normal HTML5 way rather than via an anonymous type. The only MVC specific part is the addition of the asp-for attribute. Matt DeKrey’s stackoverflow answer on the difference between html and tag helpers really sums up the benefits well I feel. I’m really looking forward to using razor this way, I think it lowers another barrier to working with MVC. If your preference however is to continue with HTML helpers they are still available of course.

By far the best coverage of MVC 6 tag helpers I’ve found is by Dave Paquette who has a tonne of articles about all the different tag helpers and also how you can create your own custom ones too. Start of with his Cleaner Forms using Tag Helpers in MVC6 article which is really good. Mike Brind’s Introducing TagHelpers in ASP.NET MVC 6 is another good introduction to tag helpers but also explores how they actually work under the hood.

Leave a Reply

Your email address will not be published. Required fields are marked *