Creating a Bootstrap button Tag Helper

Tag Helpers are a new addition to ASP.NET MVC Core and can be used to generate HTML markup. The syntax of Tag Helpers is similar to traditional HTML elements, but is still processed on the server.

Although traditional HTML Helpers are still available, Tag Helpers are intended as an alternative, if not replacement, syntax.

To create your own custom Tag Helper that will generate a Bootstrap button, complete the following steps:

  1. Add a new folder called TagHelpers to your project.
  2. Create a new class called BootstrapButtonTagHelper in the TagHelpers folder.
  3. Change the BootstrapButtonTagHelper to inherit from the TagHelper class, which is a built-in class of the Microsoft.AspNetCore.Razor.TagHelpers package.
  4. In order to use the TagHelper class, add the following to the top of the BootstrapButtonTagHelper class:
            using Microsoft.AspNetCore.Razor.TagHelpers;
  5. Next, add two properties, called Color and Style, to the class. The two properties' data types will be set to two enums called BootstrapColor and BootstrapStyle.
            public string Color { get; set; } 
        public string Size { get; set; }
  6. Lastly, override the Process method of the TagHelper class and change its code to the following:
            public override void Process(TagHelperContext context, 
        TagHelperOutput output) 
        { 
            output.TagName = "button"; 
            output.Attributes.Clear(); 
            output.Attributes.Add("class", "btn btn-" + Color + " btn-"
             + Size); 
        }

The code for the Process method will set the output object's TagName property to button and add the necessary Bootstrap button classes, based on the values set in the Color and Size properties, to the generated <button> element.

You'll notice that the Add method in the Attributes collection is used in order to add the class names to the element.

Tip

A very good example of custom MVC Tag Helpers, which contains a wealth of code samples (if a little outdated), was created by Daniel Kuon and is available on GitHub at https://github.com/daniel-kuon/TagHelperExtensions.

Using the Bootstrap button Tag Helper

Once you've completed the steps to create a Tag Helper, you can use it in your views by following these steps:

  1. In order to use the Tag Helper in all your views, you need to open the _ViewImports.cshtml file inside the Views folder. If the Views folder does not contain a _ViewImports.cshtml file, create a new one.
  2. Add the following to the _ViewImports.cshtml file:
            @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" 
        @addTagHelper "*, Chapter5"

The @addTagHelper directive enables all views to use Tag Helpers. The first line of the preceding code will add all the built-in ASP.NET MVC Tag Helpers; the second will include all Tag Helpers declared in the Chapter5 project. The _ViewImports.cshtml is inherited by default by all files, which will enable the Tag Helpers declared in the file for all views by default.

To use the Tag Helper inside your view, open a view and add the following to it:

<bootstrap-button color=" danger" size="sm">My Button</bootstrap-button>

By specifying the color and size attributes, the preceding statement will generate a small, red Bootstrap button. Tag Helpers work by convention, using what the ASP.NET team calls Kebab case. For example, our helper is called BootstrapButtonTagHelper, which means, to use it in your view, you simply have to remove the Tag Helper part of the file and add a minus sign between each capital letter, for example, bootstrap-button.

The same rule applies for the properties declared inside the Tag Helper, and you'll also notice that each property is an attribute you can set inside the view.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.189.188.121