Tag Helpers In MVC 6

Introduction

Tag helpers is a new feature introduced in MVC 6 to improve readability of razor code. Tag helpers function similarly to HTML helpers, by translating the custom tags (defined in our tag helper) into HTML code.

Why do we need tag helpers

Well, the first question that comes to our mind is, why do we even need tag helpers? Or for that reason, why do we need a HTML helper. The main reason we need them is to avoid repeating the same snippets of HTML again and again in our project. It enables consistency of code in a project with a large number of developers. Also, it has uses in generating input fields, generating anchor links taking advantage of routing etc.

Tag helpers over HTML helpers

The next question that pops up is why do we even need tag helpers, when HTML helpers can very well do the same job? That is true, we can achieve almost everything that tag helpers can provide us with HTML helpers. But, if you look at a view file created largely using HTML helpers, it will start appearing more like a C# code page than like a HTML page.

For many who love HTML, this doesn’t seem right. People want a HTML page (a view in our case) to look like a HTML page. So enter tag helpers! Tag helpers can help you achieve you do this.

Of course, please note there is nothing stopping you from using HTML helpers to create your view. It is just a choice provided to you by MVC 6 to make your view look much cleaner.

Ok, enough said, let us now look into an example of how to use tag helpers.

Use case: Create a <section> with a <h2> and a <p>

1. Create a new Visual Studio 2015 ASP.NET 5 MVC project (you can download Visual Studio 2015 community edition for free.
   
   
2. Create a class file where you will implement your custom tag helper.
   

   using Microsoft.AspNet.Razor.TagHelpers;
   using TagHelpersDemo.Models;
   
   namespace TagHelpersDemo.TagHelpers {
       public class CustomSectionTagHelper: TagHelper {
           public SectionInfo Info {
               get;
               set;
           }
   
           public override void Process(TagHelperContext context, TagHelperOutput output) {
               output.TagName = "section";
   
               output.Content.SetHtmlContent(
                   $ @ "<h2> {Info.Heading} </h2>  <
                   p > {
                       Info.Content
                   } < /p>"
               );
   
               output.TagMode = TagMode.StartTagAndEndTag;
           }
       }
   }

   SectionInfo Class
   

   namespace TagHelpersDemo.Models {
       public class SectionInfo {
           public string Heading {
               get;
               set;
           }
           public string Content {
               get;
               set;
           }
       }
   }

   In the above code, the name of the custom tag helper will be custom-section. Basically, the content of the class minus the TagHelper part, converted to lower-kebab-case.
   
   You write your logic on how you want your HTML markup rendered in the Process method. The output parameter needs to be set with the way the rendered HTML needs to look like. In our case, we want our custom tag to be translated into a heading and a paragraph inside a section tag.
   
   For passing the values of the heading and the paragraph, we are using a custom class named, SectionInfo. The Info property in the tag helper class will hope the value of the SectionInfo that we pass from our view file.
   
   
3. Register your tag helper assembly and tag helpers in your _ViewImports file,
   

   @using TagHelpersDemo
   @using TagHelpersDemo.Models
   @using TagHelpersDemo.ViewModels.Account
   @using TagHelpersDemo.ViewModels.Manage
   @using Microsoft.AspNet.Identity
   @inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration
   @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
   @addTagHelper "*, TagHelpersDemo"

   The * indicates that you are registering all your custom tag helpers in your assembly, TagHelpersDemo
   
   
4. Use the tag helper in your view file,
   

   @ {
       ViewData["Title"] = "About";
   }
   
   <
   custom - section info = "new SectionInfo {
       Heading = Model.Heading,
           Content = Model.Content
   }
   " />

   Output
   
   
   
   

Well, that is an example of creating and using a tag helper.