Tag Helpers in ASP.NET5

In today's blog post, I will be discussing tag helpers in ASP.NET5. I recently downloaded the Visual Studio 2015 and started playing around with it. One of the new and exciting features in ASP.NET 5 (MVC6) is tag helpers.

Why Tag Helper

When we are working with MVC Views, currently we write C# like code in order to output the HTML elements. For example,

@Html.TextBox("FirstName",
 @Model.FirstName, new { style = "width: 100px;" })

When I am writing this code, I have no intellisense available to me when I am adding styles. All this is mentioned as simply HTML attributes. Even when I am adding any of the arguments, I don't get any intellisense to assist me. Also, if we look at the way any View page looks, overall it looks more like C# code rather than HTML code.

So here come the tag helpers to rescue us. The tag helpers help us write the view code in a cleaner way.

<input asp-for="FirstName" style="width:100px;"/>

This code looks more like HTML rather than C# code.

Secondly, now I have intellisense at every step while writing the code. Check out the screenshots:
i) Intellisense for Model Property Name
ii) Intellisense for style/ class, etc
iii) Intellisense for choosing css class
iv) Intellisense for choosing style

Custom Tag Helper

Not only we can use the tag helpers provided to us, we can also create our own tag helpers. Let's see how to create our own custom tag helpers in MVC6 application. In order to create our own custom tag helper, we need to derive from TagHelper abstract class. Let's do this with an example:

 [TargetElement("entity", Attributes = "type")]

    public class EntityTagHelper : TagHelper

    {

        public override void Process(TagHelperContext context,
         TagHelperOutput output)

        {

            int type;

            output.TagName = "img";

            Int32.TryParse(
             context.AllAttributes["type"].ToString(),
             out type);

            string image = String.Empty;

            switch (type)

            {

                case 0:

                    image = "/images/employee.png";

                    break;

                case 1:

                    image = "/images/department.png";

                    break;

                case 2:

                    image = "/images/group.png";

                    break;

            }

            output.Attributes["src"] = image;

        }

    }

Here, I created an EntityTagHelper and overrode the method called Process. There are 2 methods Process and ProcessAsync which can be overridden in TagHelper class. Async as the name suggests is for asynchronous processing.
The Process method has context and output parameters. We will be reading out input attributes from context and setting our output attributes in the output parameter. So here I am creating an img tag and setting the source of the image based on the value of attribute type provided with the entity tag, using simple switch case.

Next, I added this to _GlobalImport.cshtml

@addTagHelper "*, Abhi1"

So here I am adding my custom tag helpers from project named "Abhi1" to my views. This step is extremely important as without this the custom tags will not be working.

Next, I added this to my view:

<entity type="1"></entity>

Since type value of 1 was provided, which translates to department.png.
Conclusion
In this blog post, we saw how custom tag helpers are useful and how we can write our own custom tag helpers in MVC6.
For future updates to my weekly blog, please subscribe to my blog via the "Subscribe By Email" feature at the right.