Taghelper: a new feature of asp.net core

Time:2021-6-26

Today, I’ll talk about the new features of asp.net core. Today, I’ll talk about taghelper. Although the most helpful thing to learn about. Net is Microsoft’s official instructions, in which some instructions are written very clearly. However, Microsoft has not yet had time to translate the. Net core into the document, which is hard for people with poor English. So today, let’s learn about the tag assistant and share our experience with the blog Park boss.

If you want to see Microsoft official documents and git projects, you can directly click the portal below~~

  Official document of asp.net core

  Asp.net core GitHub project

When it comes to taghelper, I feel a bit like the server-side control in asp.net form, and a bit like the back-end implementation version of “component” in angular or Vue. Users can transform a set of HTML tags into a custom tag, which realizes the reuse of HTML code.

So the text begins~~

First, we need to install a vs2017 plug-in: Razor language services. This plug-in can intelligently prompt user-defined label assistant in HTML.

  https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices

Create an asp.net core project

Using the label assistant defined by Microsoft, after installing the plug-in, the label using the label assistant will be highlighted

In the figure above, environment, link and a tags all use tag assistant to realize their respective functions


<a asp-area="" asp-controller="Home" asp-action="Index">taghelpersample</a>

A tag through the use of ASP controller, ASP action custom attributes to achieve routing access.

At this time, someone will say, I can also use the @ HTML class to achieve the same function. Why do I need to use taghelper?


@Html.ActionLink("taghelpersample", "Index", "Home",null, new { Class = "navbar-brand" })

It’s true that we can achieve the same function by using @ HTML help class, but the way of using tag assistant is more in line with HTML tag syntax, which is good news for obsessive-compulsive programmers. Moreover, it is more convenient to add the original attributes of the tag, such as class.

<!-- Label assistant form -- >
<form asp-controller="Home" asp-action="Index" method="post">

</form>
<!-- HTML help class version form -- >
@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" }))
{

}

In addition, another feature of the label assistant is that it can be customized. The specific steps are as follows:

(1) Create a class derived from the taghelper class

//Class will be converted to < text collection > < / text collection > by default
   public class TextCollectionTagHelper:TagHelper
 {
  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   base.Process(context, output);
  }
 }

(2) Setting properties and basic classes


public string Color { get; set; }

  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("style", "color:" + Color);
   var text = "Hello,World";
   var h1 = new TagBuilder("h1");
   var h2 = new TagBuilder("h2");
   var h3 = new TagBuilder("h3");
   var h4 = new TagBuilder("h4");
   var h5 = new TagBuilder("h5");
   var h6 = new TagBuilder("h6");
   h1.InnerHtml.Append(text);
   h2.InnerHtml.Append(text);
   h3.InnerHtml.Append(text);
   h4.InnerHtml.Append(text);
   h5.InnerHtml.Append(text);
   h6.InnerHtml.Append(text);
   output.Content.AppendHtml(h1);
   output.Content.AppendHtml(h2);
   output.Content.AppendHtml(h3);
   output.Content.AppendHtml(h4);
   output.Content.AppendHtml(h5);
   output.Content.AppendHtml(h6);
  }


(3) In_ Viewimports.cshtml import class namespace


@addTagHelper *,taghelpersample

(4) Using tag assistant in cshtml


<text-collection color="red"></text-collection>
<text-collection color="blue"></text-collection>
<text-collection color="#666"></text-collection>

(5) Debugging effect

OK, so much for taghelper today.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.