asp. net core razor Custom taghelper Method
- 2021-11-10 09:24:10
- OfStack
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