Introduction To Tag Helpers

TAG Helpers

• What are tag helpers? Advantages
• Tag helper vs Html helper.
• Why to use tag helpers?
• Tag helper example
• Tag helper steps
• Tag helper class
• Html tag helpers
• Complex tag helper

What are Tag Helpers? Simple Example of Tag Helper, Advantages over HTML Helper

In our view we need some controls are html elements like form controls are heading element that help us to build View. Tag helpers help us to create that Html elements, we can extend existing html elements or we can have our own custom tags, Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files.

Example of tag helper is,

Anchor tag : <a asp-action=”ActionName” asp-controller=”ControllerName” class=”customCssClass”>

We already have some built in tag helpers which help us to have eat and clean Views. Like Label, Anchor, Form Controls like input type, select etc.

Advantages of using tag helper over HTML Helper is that it make things really neat like in above example we use simple html tag attribute class=”customCssClass” but in case of HtmlHelper we need to use special character like

new {@class="caption"}

Some advantages of using Tag Helpers

• An HTML-friendly development experience
• A rich IntelliSense environment for creating HTML and Razor markup
• A way to make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server

Scope of Tag Helpers, How we can use them in our project?

You should have Microsoft.AspNetCore.Mvc.TagHelpers to use tag helpers in you project, whenever you create project from template Razor tools are installed so you don’t need to worry about it.
To use tag helpers in your view you need to have name space in your views, its good to import the name space in _ViewImports.cshtml file

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Now you have intellisence support of tag helper in your views.

If you have your custom tag defined in a folder “TagHelpers” in you project then you can import tag helpers folder like

@addTagHelper *, Tag_Helpers This “Tag_Helpers” is the main name space. Now it imports folders in views so you can declare your own custom tag helpers in view without worrying of including reference on each view.

@addTagHelper "*, projectname"

@removeTagHelper can also used to remove specific tag helpers of a namespace.

We can say that there different types of Tag Helper

1. Tag helper that extend exsiting html tag
   We have already used anchor tag that takes asp-action and asp-controller as atribute and we render link according to provided attributes.
   
   
2. Custom tag helper
   Later in this, we will define a custom tage helper that render a list of objects. We will use custom tag helper for that, which take list of string as parameter.
   
   
3. Tag helper that helps to do some operations seemless and update some exsisting tags or their attributes.
   These tag helper are link environment , in the environment tag we can have group of files that need to be included on the base of environment like if environment is development get local javascript file but in case of production get files from CDN.

Custom Tag Helper

Custom tag helper can help you to have a tag helper that can perform some operations like in case if you want to have header tag just for example.

Step 1

Decide what Is your target tag and then create a class that should inherit from TagHelper. Please note that namming convention is important, if you have multiple words in name like mygrid then it can be used as my-grid in view (Kebab-Style). MyGridTagHelper class make the runtime to target the tag like my-grid.If you have simple class name like AlertTagHelper then you can simply use alert as tag name.

Step 2

Override the Process or ProcessAsync method that gives you output conetxt to perform operation,

• TagHelperContext
  This parameter contains information about the tag addressed by the tag helper including all its attributes and children elements.
  
  
• TagHelperOutput
  Used to generated the tag output.

Step 3

Use the tag in your view and pass the required attribute.

Custom tag helper example

1. Target the div element which have a info-message attribute.
2. Check the properties and render the boot starp info message.
   

   using Microsoft.AspNetCore.Razor.TagHelpers;
   using System;
   using System.Collections.Generic;
   using System.Diagnostics;
   using System.Linq;
   using System.Threading.Tasks;
   namespace Tag_Helpers.TagHelpers {
       [HtmlTargetElement("div", Attributes = InfoMessageAttributeName)]
       public class AlertMessageTagHelper: TagHelper {
           private
           const string InfoMessageAttributeName = "info-message";
           private
           const string MessageAttributeName = "message";
           private
           const string HideAttributeName = "visible";
           private
           const string AlertTypeAttributeName = "alert-type";
           [HtmlAttributeName(MessageAttributeName)]
           public string Message {
               get;
               set;
           }
           [HtmlAttributeName(HideAttributeName)]
           public bool Visible {
               get;
               set;
           }
           [HtmlAttributeName(AlertTypeAttributeName)]
           public string AlertType {
               get;
               set;
           }
           public override void Process(TagHelperContext context, TagHelperOutput output) {
               string className = string.Empty;
               if (Visible) {
                   className = "show";
               } else {
                   className = "hidden";
               }
               Debug.WriteLine("========================>" + context.UniqueId);
               string InfoMessageContent = $ @ "<div id='{context.UniqueId}' onclick='hideContent(this)' class='infoMessage alert alert-dismissable {AlertType} {className}'><a href ='#' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Information:</strong><span id='statusMessage' >{Message}</ span ></ div >";
               string js = "<script type='text/javascript'>function hideContent(e){ $(e).removeClass('show').addClass('hidden');} function showMessage(message){ var control= $('[info-message]'); $(control).find('span').text(message); }</script>";
               output.Content.AppendHtml(js + InfoMessageContent);
               base.Process(context, output);
           }
       }
   }

Let me share how it can use in View,

@using Tag_Helpers.Controllers;
@model IEnumerable < Tag_Helpers.Controllers.Data > @
  {
    ViewData["Title"] = "Home Page";
} < script type = "text/javascript" > function UpdateMessageContent()
{
    var message = $("#txt1").val();
    showMessage(message);
} < /script> < div info - message message = "A simple message"
visible = "true"
alert - type = "alert-info" > < /div> < input type = "text"
id = "txt1" / > < input type = "button"
onclick = "UpdateMessageContent()"
value = "Update Message Content" / >

Output


When I add some text in textbox and click on Update Message Button then it updates the message content

Explanation

We declared a class AlertMessageTagHelper, this class target HtmlElement div so we have declared attribute of class like, 

[HtmlTargetElement("div", Attributes = InfoMessageAttributeName)]

//And

private const string InfoMessageAttributeName = "info-message";

We have defined class property along with HtmlAttribute that is required to target, 

private
const string MessageAttributeName = "message";
[HtmlAttributeName(MessageAttributeName)]
public string Message
{
    get;
    set;
}

So we have other properties like that and we follow same procedure.

When we have any div html element with the info-message attribute then it target this tag helper.

We pass the message,visible and alert type attribute , alert type attribute can be alert-danger, alert-info etc.

<div info-message message="A simple message" visible="true" alert-type="alert-info"></div>

 

Example of custom Tag Helper

Objective of this tag to render html table which is passed from view by using grid tag helper.

This is custom tag helper example. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.Runtime.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Reflection;
namespace Tag_Helpers.TagHelpers {
    [HtmlTargetElement("grid")]
    public class GridTagHelper: TagHelper {
        private
        const string ItemsAttributeName = "items";
        [HtmlAttributeName(ItemsAttributeName)]
        public IEnumerable < object > Items {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {
            TagBuilder table = new TagBuilder("table");
            table.GenerateId("id", context.UniqueId);
            var attributes = context.AllAttributes.Where(atr => atr.Name != ItemsAttributeName).ToDictionary(atr => atr.Name, atr => atr.Value);
            table.MergeAttributes < string, object > (attributes);
            var tr = new TagBuilder("tr");
            var heading = Items.First();
            PropertyInfo[] properties = heading.GetType().GetProperties();
            foreach(var prop in properties) {
                TagBuilder headerCol = new TagBuilder("th");
                headerCol.InnerHtml.Append(prop.Name.ToString());
                tr.InnerHtml.AppendHtml(headerCol);
            }
            table.InnerHtml.AppendHtml(tr);
            foreach(var item in Items) {
                tr = new TagBuilder("tr");
                foreach(var prop in properties) {
                    TagBuilder col = new TagBuilder("td");
                    col.InnerHtml.Append(prop.GetValue(item).ToString());
                    tr.InnerHtml.AppendHtml(col);
                }
                table.InnerHtml.AppendHtml(tr);
            }
            output.Content.SetHtmlContent(table);
        }
    }
}

We can define a class in project like. 

public class Test
{
    public string Name {
        get;
        set;
    }
    public string Email {
        get;
        set;
    }
}

We can use that class in View like, don’t forget to import class namespace in view if it is not accessible in view. 

@ {
    List < Test > tests = new List < Test > ();
    Test t1 = new Test();
    t1.Name = "Khuram";
    t1.Email = "[email protected]";
    Test t2 = new Test();
    t2.Name = "Khuram";
    t2.Email = "[email protected]";
    tests.Add(t1);
    tests.Add(t2);
} < grid items = "@tests"
border = "1" > < /grid>

Output in the view is like this

Explanation

We have declared a class and use 

[HtmlTargetElement("grid")]
public class GridTagHelper : TagHelper

Now this class target a custom tag ehich is <grid> this grid tag expect some attributes 

private
const string ItemsAttributeName = "items";
[HtmlAttributeName(ItemsAttributeName)]
public IEnumerable < object > Items
{
    get;
    set;
}

items is the attribute name which should be passed from view , it is collection of object and that object can be a class like we pass object collection of class Test. 

TagBuilder table = new TagBuilder("table");
table.GenerateId("id", context.UniqueId);

We build a tag using TagBuilder class and assign the unique id to table. 

var attributes = context.AllAttributes.Where(atr => atr.Name != ItemsAttributeName).ToDictionary(atr => atr.Name, atr => atr.Value);
table.MergeAttributes<string, object>(attributes);

If there is any attribute defined on grid tag then merge it. 

var tr = new TagBuilder("tr");
var heading = Items.First();
PropertyInfo[] properties = heading.GetType().GetProperties();
foreach(var prop in properties) {
    TagBuilder headerCol = new TagBuilder("th");
    headerCol.InnerHtml.Append(prop.Name.ToString());
    tr.InnerHtml.AppendHtml(headerCol);
}
table.InnerHtml.AppendHtml(tr);

Create row and for each property of class , create header cell of table. 

foreach(var item in Items)
{
    tr = new TagBuilder("tr");
    foreach(var prop in properties) {
        TagBuilder col = new TagBuilder("td");
        col.InnerHtml.Append(prop.GetValue(item).ToString());
        tr.InnerHtml.AppendHtml(col);
    }
    table.InnerHtml.AppendHtml(tr);
}

Create row for an object and populate data.

output.Content.SetHtmlContent(table);

 

Render the table.

Complex Tag Helper

Sometime things are not simple so we need to have complex tag helper, where we can have tag inside tag or a parent tag can have child tags.

Example 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.Runtime.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Tag_Helpers.TagHelpers {
    [HtmlTargetElement("combo")]
    public class ComboTagHelper: TagHelper {
        [HtmlAttributeName("key")]
        public string Key {
            get;
            set;
        }
        [HtmlAttributeName("value")]
        public string Value {
            get;
            set;
        }
        [HtmlAttributeName("dsource")]
        public object DataSource {
            get;
            set;
        }
        [HtmlAttributeName("dclass")]
        public string DataClass {
            get;
            set;
        }
        public MultiSelectionTagHelper MultiSelection {
            get;
            set;
        }
        public override async void Process(TagHelperContext context, TagHelperOutput output) {
            context.Items.Add(typeof(ComboTagHelper), this);
            var childContent = await output.GetChildContentAsync();
            //Render items here
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.Runtime.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Tag_Helpers.TagHelpers {
    [HtmlTargetElement("combo-multi-selection")]
    public class MultiSelectionTagHelper: TagHelper {
        [HtmlAttributeName("enable-checkboxes")]
        public bool EnableCheckBoxes {
            get;
            set;
        }
        [HtmlAttributeName("is-enabled")]
        public bool Enabled {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {
            ((ComboTagHelper) context.Items[typeof(ComboTagHelper)]).MultiSelection = this;
            output.SuppressOutput();
        }
    }
}

In the view we have, 

<combo dsource="@Model" key="Id" value="Name">
    <combo-multi-selection is-enabled="true" enable-checkboxes="true" dclass="Data" />
 </combo>

In the parent <combo> tag we have another tag which specify the multi selection and data class by dclass attribute.

We can get the child tag properties by

Defining child tag helper class object in parent class.

Add the parent class in the current context.

Get the class object from context in child tag helper class.

Now you can assigned the child tag helper object to parent.

Reference

http://Asp.Net