Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Tag Helper components in ASP.NET Core MVC. It is very detailed and has a certain reference value. Friends who are interested must read it!

Tag Helper components-introduction

ASP.NET Core 2 also brings us a new feature-the Tag Helper component.

The Tag Helper component is responsible for generating or modifying specific HTML, which works with Tag Helper.

Tag Helper will run your Tag Helper component.

The Tag Helper component is the perfect choice for dynamically adding content to HTML.

For your Tag Helper component to run, you need to set up a specific Tag Helper. This TagHelper needs to inherit TagHelperComponentTagHelper from the built-in abstract class.

I know. I know the name is very confusing.

The type that inherits from TagHelperComponentTagHelper will be a TagHelper that will execute the matching TagHelper component.

Steps

Let's start by creating a new Tag Helper component. We can create TagHelper components for built-in head and body tags; inherit from the special class TagHelperComponentTagHelper

Tag Helper, you can create Tag Helper components.

Let's look at an example.

I'll start by creating a new Razor Pages template:

Dotnet new razor

Let's follow these steps to make a Tag Helper component work:

Create a new Tag Helper component

Inject components into DI

Create a TagHelper class that inherits from TagHelperComponentTagHelper

Include Tag Helper in the _ ViewImports.cshtml file

Create a new Tag Helper component:

Public class ArticleTagHelperComponent: TagHelperComponent {public override Task ProcessAsync (TagHelperContext context, TagHelperOutput output) {if (string.Equals (context.TagName, "article", StringComparison.OrdinalIgnoreCase)) {output.PostContent.AppendHtml ("console.log ('ASP.NET Core-Love From Console');");} return Task.CompletedTask;}}

If you have ever used Tag Helper, you should be familiar with it. In the example, you inherit from the built-in TagHelperComponent abstract class, and then override the ProcessAsync method.

We need to make the Tag Helper component part of our application and inject it into the service container:

Public void ConfigureServices (IServiceCollection services) {services.AddTransient (); services.AddMvc ();}

Now we can use the Tag Helper component we created!

Create a Tag Helper:

[HtmlTargetElement ("article")] [EditorBrowsable (EditorBrowsableState.Never)] public class ArticleTagHelperComponentTagHelper: TagHelperComponentTagHelper {public CodingBlastTagHelper (ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory): base (componentManager, loggerFactory) {}}

Notice the first line. The target of this Tag Helper helper is all article elements / tags in HTML.

In order for our application to know about this Tag Helper, we must add it to the _ ViewImports.cshtml file:

@ using IntroTagHelperComponent @ namespace IntroTagHelperComponent.Pages @ addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @ addTagHelper SampleTagHelperComponent.ArticleTagHelperComponentTagHelper, SampleTagHelperComponent

To see the actual effect, we need to have at least one article tag in the code, so we modify the Index.cshtml page:

@ model IndexModel@ {ViewData ["Title"] = "Home page";} TagHelperComponent will add stuff here. Tag Helper components for built-in Tag Helper

There are currently two built-in TagHelper that inherit from the TagHelperComponentTagHelper class, which are located in the Microsoft.AspNetCore.Mvc.TagHelpers assembly.

These two tag assistants are HeadTagHelper and BodyTagHelper. They make it easy to inject content into head and body. All we have to do is create the Tag Helper component and inject it into our application.

/ / Copyright (c) .NET Foundation. All rights reserved.// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.using System.ComponentModel;using Microsoft.AspNetCore.Razor.TagHelpers;using Microsoft.Extensions.Logging;namespace Microsoft.AspNetCore.Mvc.Razor.TagHelpers {/ A targeting the HTML element. / / [HtmlTargetElement ("head")] [EditorBrowsable (EditorBrowsableState.Never)] public class HeadTagHelper: TagHelperComponentTagHelper {/ Creates a new. / The which contains the collection / of s. / The. Public HeadTagHelper (ITagHelperComponentManager manager, ILoggerFactory loggerFactory): base (manager, loggerFactory) {}

The code is very simple. It inherits from the TagHelperComponentTagHelper class and targets the head HTML element.

If you look at the default _ ViewImports.cshtml file contents, you will see that they are included by default:

@ using IntroTagHelperComponent@namespace IntroTagHelperComponent.Pages@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

We can use our custom TagHelper component to modify the head tag with the built-in HeadTagHelper:

Let's add a Tag Helper component that will check all head tags:

Public class HeadTagHelperComponent: TagHelperComponent {public override Task ProcessAsync (TagHelperContext context, TagHelperOutput output) {if (string.Equals (context.TagName, "head", StringComparison.OrdinalIgnoreCase)) {output.PostContent.AppendHtml ("console.log ('head tag');");} return Task.CompletedTask;}}

Of course, we need to inject the added HeadTagHelperComponent into our application:

Public void ConfigureServices (IServiceCollection services) {services.AddTransient (); services.AddMvc ();} Summary

The Tag Helper component can be used to dynamically add content to the HTML

The special TagHelper (inheriting from the TagHelperComponentTagHelper class) executes all matching TagHelper components

These are all the contents of the article "how to use Tag Helper components in ASP.NET Core MVC". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.