New Features of asp.net core: TagHelper tag assistant, coretaghelper

New Features of asp.net core: TagHelper tag assistant, coretaghelper

Starting today, I will talk about the new features of asp.net core. Today I will talk about the TagHelper tag assistant. Although learning. net, the most helpful is microsoft's official instruction document, which clearly describes some instructions, but what you can do. net core has not yet been translated into Microsoft documents, so it is hard for people who are not good at English. So today, I am going to learn about this tag assistant and share my experience with the blog director.

For more information about Microsoft official documentation and Git projects, click the following portal ~~

Official asp.net core documentation

Asp.net core github Project

Speaking of the impression of TagHelper, it is a bit like the server-side control in asp.net form, and a bit like the backend implementation version of "component" in Angular or Vue. You can convert a set of html tags into a custom tag to reuse html code.

Then the text starts ~~

First, we need to install a vs2017 plug-in: Razor Language Services. This plug-in can intelligently prompt custom tag assistants in html.

Https://marketplace.visualstudio.com/items? ItemName = ms-madsk.RazorLanguageServices

Create an asp.net core Project

The tag assistant defined by Microsoft is used. After the plug-in is installed, the tag of the tag assistant is highlighted.

Environment, link, and a labels in use the tag assistant to implement their respective functions.

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

A label uses asp-controller and asp-action custom attributes to implement route access.

Someone will say that I can also use the @ Html class to implement the same function. Why should I use TagHelper?

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

Indeed, we can implement the same functions using the @ Html Help class, but isn't the tag assistant method more in line with the html Tag syntax? It's a good news for obsessive-compulsive programmers ~~. In addition, adding the original attributes of a tag, such as class, makes it easier to use the tag assistant.

<! -- Tag assistant form --> <form asp-controller = "Home" asp-action = "Index" class = "form-horizontal" method = "post"> </form> <! -- Html Help class form --> @ using (Html. beginForm ("Index", "Home", FormMethod. post, new {Class = "form-horizontal "})){}

In addition, the tag assistant can be customized as follows:

(1) create a Class derived from the TagHelper Class

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

(2) Set attributes 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 the _ ViewImports. cshtml import class namespace

@addTagHelper *,taghelpersample

(4) use the tag assistant in cshtml

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

(5) debugging results

OK. We will share this with you about TagHelper today.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.