The method of asp.net core razor custom taghelper

Time:2020-5-13

Another new noun (taghelper), through which you can operate HTML tags, condition output, and add internal and external elements freely. Of course, there are many ASP start taghelper built in.

The following article also takes you to implement a taghelper;

Create custom HTML elements

Create a buttontaghepper class

TagName is the label name. Create a button label 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);
    }
  }
}

Sign up for taghelper

After creation, it can’t be used. In. Cshtml, input ASP – through a certain tag, such as form tag, and a list of ASP -…, will appear immediately. How do you do this? Because in_ When we create a project project, viewimports has introduced the taghelper class library that Microsoft has written for us by default Microsoft.AspNetCore.Mvc.TagHelpers ;

If we want to customize, we also need to import our own taghelper in this way. Next, I created a class library named “Ctrl. Core. Tag”. I want to store all taghelper in this class library. I will directly import the namespace

@addTagHelper *,Ctrl.Core.Tag

If you want to introduce a specific taghelper as follows

@Addtaghelper your taghelper, namespace

Then let’s test whether it is available. Sir, make a project, find a cshtml view, enter the prefix test, and the label just defined will come out

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

Add custom attribute

The above requirements can’t meet our daily needs. Let’s define another element attribute


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

Then open the page to see the effect and 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 by vs

The above can satisfy our custom tags, but it may have limitations in use. Now I will provide you with a scenario idea, which you can expand later

I create an enumeration class called 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>
    ///General information
    /// </summary>
    Info,
    /// <summary>
    ///Warning
    /// </summary>
    Warning,
    /// <summary>
    ///Danger
    /// </summary>
    Danger
  }
}

Add a property to the buttontaghepper class


public CtrlButtonType ButtonType { get; set; }

Add the properties of the page just now to cshtml, you will find that there are prompts and you can see the attributes defined in the enumeration just now. So it’s very important to use vs awareness and type to specify the type of the button we just used


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>

summary

The above is the asp.net core razor custom taghelper that Xiaobian introduced to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!