asp. net core razor Custom taghelper Method

Another new noun (taghelper), through taghelper, html tags can be operated, conditional output, and internal and external elements can be added freely. Of course, there are quite a few built-in asp-taghelper at the beginning.

The following article also simply takes you to realize an taghelper;;

Create a custom html element

Create 1 class ButtonTagHelper

tagName is the name of the tag. Create 1 button tag below

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);
    }
  }
}

Register taghelper

You can't use it after creation. Enter asp-through a tag such as form on. cshtml, and a list asp-will appear immediately. How do you do this? Because in _ ViewImports, when we created the project project, taghelper was introduced in advance. By default, the taghelper class library Microsoft. AspNetCore. Mvc. TagHelpers that Microsoft has written for us;

If we customize, we also need to introduce custom taghelper in this way. Below, I created a class library named "Ctrl. Core. Tag". I want to store all taghelper under this class library. I directly introduce the namespace

@addTagHelper *,Ctrl.Core.Tag

If you want to introduce a specific taghelper as follows

@addTagHelper 你的TagHelper , 命名空间

Then we test whether 1 is available, and then find an cshtml view. Enter the prefix test and the label just defined will come out

Add and run the project to see if the button tag you just created exists

Add Custom Attributes

The above requirements can't meet our daily requirements, so let's define another element attribute below

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

Then open the page to see the effect and you will see that the class element has been added.

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);
    }
  }
}

Matching button type perceived through vs

The above can satisfy our custom label, but it may be limited in use. I will provide you with a scene idea below, and you can expand it yourself later.

I created 1 enumeration class for CtrlButtonType

namespace Ctrl.Core.Tag.Controls.Button
{
  /// <summary>
  ///    Button type 
  /// </summary>
  public enum CtrlButtonType
  {
    /// <summary>
    ///  Default style 
    /// </summary>
    Default,
    /// <summary>
    ///    Preferences 
    /// </summary>
    Primary,
    /// <summary>
    ///    Success 
    /// </summary>
    Success,
    /// <summary>
    /// 1 General information 
    /// </summary>
    Info,
    /// <summary>
    ///  Warning 
    /// </summary>
    Warning,
    /// <summary>
    ///  Danger 
    /// </summary>
    Danger
  }
}

Add 1 attribute to the buttonTagHelper class

public CtrlButtonType ButtonType { get; set; }

Add the attributes of that page to cshtml, and you will find that there are hints and you can see what was defined in the enumeration just now. This is not very useful to perceive through vs and specify the type of button we just had by type.

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);
    }
  }
}

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

Summarize