Using Asp.net Taghelpers for building consistent UI components

Generally when creating asp.net razor templates, or HTML in general. We seperate structure from layout by only using HTML for the structure, and CSS for the way it looks.

When using UI frameworks like Bootstrap we heavily validate this rule by defining the way it looks inside out HTML-documents. For example:

Create

the class "btn-success" will make it look green, and the "fa-check" class will give it a checkmark icon. 
But what if we decide that we want to get rid of Bootstrap, or have all "Create"-buttons a "plus"-icon instead a "check" icon. Can you imagine all the manual labour this would require?

Asp.net core MVC6 introduced the feature of Tag Helpers (https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro)

This allows you to create re-usable components inside your razor-templates, for example like this:

Create

This solves all our problems we had before, it allows to stick to the structure in the HTML document. We just specify the type of the button, how it will turn out is specified inside our taghelper.

Creating a taghelper is just as easy as creating a class that inherits from the TagHelper-class.

This is a small example for our button:

[HtmlTargetElement("button")]
[HtmlTargetElement(Attributes = "button")]
public class ButtonTagHelper : TagHelper
{

    [HtmlAttributeName("button")]
    public string ButtonType { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {

        var content = await output.GetChildContentAsync();
        string target = string.Empty;

        switch (ButtonType)
        {
            case "back":
                output.Attributes.Add("class", "btn btn-danger");
                target = "<i class=\"fa fa-repeat\" aria-hidden=\"true\"></i> " + content.GetContent();
                break;

            case "save":
                output.Attributes.Add("class", "btn btn-success");
                target = "<i class=\"fa fa-check\" aria-hidden=\"true\"></i> " + content.GetContent();
                break;

            case "add":
                output.Attributes.Add("class", "btn btn-success");
                target = "<i class=\"fa fa-plus\" aria-hidden=\"true\"></i> " + content.GetContent();
                break;

            default:
                target = content.GetContent();
                break;
        }

        output.Content.SetHtmlContent(target);

    }
}

Getting this taghelper to work inside our templates is just as easy as telling razor where to look by adding your location to Views/_ViewImports.cshtml

@addTagHelper *, NameSpaceWithTaghelpers