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:
TagHelpers
to your project.BootstrapButtonTagHelper
in the TagHelpers
folder.BootstrapButtonTagHelper
to inherit from the TagHelper
class, which is a built-in class of the Microsoft.AspNetCore.Razor.TagHelpers
package.TagHelper
class, add the following to the top of the BootstrapButtonTagHelper
class:using Microsoft.AspNetCore.Razor.TagHelpers;
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; }
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.
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.
Once you've completed the steps to create a Tag Helper, you can use it in your views by following these steps:
_ViewImports.cshtml
file inside the Views
folder. If the Views
folder does not contain a _ViewImports.cshtml
file, create a new one._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.
13.58.51.228