asp.net core razor custom taghelper

Original: ASP.NET Core Razor Custom taghelper

And a new term (taghelper), that can be operated by taghelper html tags, conditional output, it is free to add internal and external elements. Of course, it built a lot of asp- taghelper beginning.

The following article is also simple with you to achieve a taghelper;

Create a custom html element

Creating a class ButtonTagHelper

tagName for the label name, create a button tag below

 
 

  
  Copy
 
 
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            base.Process(context, output);
        }
    }
}

Registration taghelper

After creation can not be performed using, oh, such as form input asp- label by a label in .cshtml, immediately following the emergence of a list asp -...., which is how to do it? Because when we create _ViewImports project, has been ahead of the introduction of taghelper default is Microsoft has introduced to our written taghelper library Microsoft.AspNetCore.Mvc.TagHelpers;

Our custom, then also need to introduce taghelper customized according to this way, here I created a class library named "Ctrl.Core.Tag", I have this library to store all of the following taghelper I introduced directly into the namespace

 
 

  
  Copy
 
 
@addTagHelper *,Ctrl.Core.Tag

If you want to introduce the following specific taghelper

 
 

  
  Copy
 
 
@addTagHelper 你的TagHelper , 命名空间

Then we test is available, sir look into the project, and then find cshtml view, just enter the prefix test label will come out just defined

Add the project and run the newly created button to see whether there is a label

Add custom attributes

The above requirements are not meet our daily needs, Here we define an element attribute

 
 

  
  Copy
 
 
 output.Attributes.SetAttribute("class", "btn btn-primary");

And then turn the page to see results you will see the class element has been added to.

 
 

  
  Copy
 
 
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            output.Attributes.SetAttribute("class", "btn btn-primary");
            base.Process(context, output);
        }
    }
}

Perceived by matching button type vs

The above can meet our custom label, but may use limitations, here I will give you a scenario thinking, it can later be extended himself.

I created a class for enumeration CtrlButtonType

 
 

  
  Copy
 
 
namespace Ctrl.Core.Tag.Controls.Button
{
    /// <summary>
    ///     按钮类型
    /// </summary>
    public enum CtrlButtonType
    {
        /// <summary>
        ///  默认样式
        /// </summary>
        Default,
        /// <summary>
        ///     首选项
        /// </summary>
        Primary,
        /// <summary>
        ///      成功
        /// </summary>
        Success,
        /// <summary>
        ///  一般信息
        /// </summary>
        Info,
        /// <summary>
        ///  警告
        /// </summary>
        Warning,
        /// <summary>
        ///  危险
        /// </summary>
        Danger
    }
}

Adding an attribute class buttonTagHelper

 
 

  
  Copy
 
 
public CtrlButtonType ButtonType  { get; set; }

Just to add cshtml property that page, you will find there are tips, and you can see just enumeration defined by this and by the type of perception vs specify the type we have just the buttons are not very aspects of the.

 
 

  
  Copy
 
 

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public CtrlButtonType ButtonType  { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            output.Attributes.SetAttribute("class", "btn btn-"+ButtonType.ToString().ToLower());
            base.Process(context, output);
        }
    }
}

 
 

  
  Copy
 
 
 <test-button button-type="Success"></test-button>