From be4e91ca83e5cd0371f3fa385781fccdd3e7007c Mon Sep 17 00:00:00 2001 From: Scott Addie Date: Tue, 18 Sep 2018 14:49:21 -0500 Subject: [PATCH 1/2] Add Tag Helper Components doc to ToC --- .../mvc/views/tag-helpers/th-components.md | 20 +++++++++---------- aspnetcore/toc.md | 1 + 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/aspnetcore/mvc/views/tag-helpers/th-components.md b/aspnetcore/mvc/views/tag-helpers/th-components.md index ac4aa898cbc8..88ace429ffb9 100644 --- a/aspnetcore/mvc/views/tag-helpers/th-components.md +++ b/aspnetcore/mvc/views/tag-helpers/th-components.md @@ -13,7 +13,7 @@ By [Scott Addie](https://twitter.com/Scott_Addie) and [Fiyaz Bin Hasan](https:// A Tag Helper Component is a Tag Helper that allows you to conditionally modify or add HTML elements from server-side code. This feature is available in ASP.NET Core 2.0 or later. -ASP.NET Core includes two built-in Tag Helper Components: `head` and `body`. They're located in the `Microsoft.AspNetCore.Mvc.Razor.TagHelpers` namespace and can be used in both MVC and Razor Pages. Tag Helper Components don't require registration with the app in *_ViewImports.cshtml*. +ASP.NET Core includes two built-in Tag Helper Components: `head` and `body`. They're located in the namespace and can be used in both MVC and Razor Pages. Tag Helper Components don't require registration with the app in *_ViewImports.cshtml*. [View or download sample code](https://github.com/aspnet/Docs/tree/master/aspnetcore/mvc/views/tag-helpers/th-components/samples) ([how to download](xref:tutorials/index#how-to-download-a-sample)) @@ -34,11 +34,11 @@ Inside the HTML `` element, CSS files are commonly imported with the HTML In the preceding code: -* `AddressStyleTagHelperComponent` implements `TagHelperComponent`. The abstraction: - * Allows initialization of the class with a `TagHelperContext`. +* `AddressStyleTagHelperComponent` implements . The abstraction: + * Allows initialization of the class with a . * Enables the use of Tag Helper Components to add or modify HTML elements. -* The `Order` property defines the order in which the Components are rendered. `Order` is necessary when there are multiple usages of Tag Helper Components in an app. -* `ProcessAsync` compares the execution context's `TagName` property value to `head`. If the comparison evaluates to true, the content of the `_style` field is injected into the HTML `` element. +* The property defines the order in which the Components are rendered. `Order` is necessary when there are multiple usages of Tag Helper Components in an app. +* compares the execution context's property value to `head`. If the comparison evaluates to true, the content of the `_style` field is injected into the HTML `` element. ### Inject into HTML body element @@ -62,7 +62,7 @@ A Tag Helper Component must be added to the app's Tag Helper Components collecti ### Registration via services container -If the Tag Helper Component class isn't managed with `ITagHelperComponentManager`, it must be registered with the [dependency injection (DI)](xref:fundamentals/dependency-injection) system. The following `Startup.ConfigureServices` code registers the `AddressStyleTagHelperComponent` and `AddressScriptTagHelperComponent` classes with a [transient lifetime](xref:fundamentals/dependency-injection#lifetime-and-registration-options): +If the Tag Helper Component class isn't managed with , it must be registered with the [dependency injection (DI)](xref:fundamentals/dependency-injection) system. The following `Startup.ConfigureServices` code registers the `AddressStyleTagHelperComponent` and `AddressScriptTagHelperComponent` classes with a [transient lifetime](xref:fundamentals/dependency-injection#lifetime-and-registration-options): [!code-csharp[](th-components/samples/RazorPagesSample/Startup.cs?name=snippet_ConfigureServices&highlight=12-15)] @@ -104,9 +104,9 @@ In the preceding code: To create a custom Tag Helper Component: -* Create a public class deriving from `TagHelperComponentTagHelper`. -* Apply an `[HtmlTargetElement]` attribute to the class. Specify the name of the target HTML element. -* *Optional*: Apply an `[EditorBrowsable(EditorBrowsableState.Never)]` attribute to the class to suppress the type's display in IntelliSense. +* Create a public class deriving from . +* Apply an [[HtmlTargetElement]](xref:Microsoft.AspNetCore.Razor.TagHelpers.HtmlTargetElementAttribute) attribute to the class. Specify the name of the target HTML element. +* *Optional*: Apply an [[EditorBrowsable(EditorBrowsableState.Never)]](xref:System.ComponentModel.EditorBrowsableAttribute) attribute to the class to suppress the type's display in IntelliSense. The following code creates a custom Tag Helper Component that targets the `
` HTML element: @@ -140,7 +140,7 @@ public class AddressTagHelperComponent : TagHelperComponent } ``` -The preceding `ProcessAsync` method injects the HTML provided to `SetHtmlContent` into the matching `
` element. The injection occurs when: +The preceding `ProcessAsync` method injects the HTML provided to into the matching `
` element. The injection occurs when: * The execution context's `TagName` property value equals `address`. * The corresponding `
` element has a `printable` attribute. diff --git a/aspnetcore/toc.md b/aspnetcore/toc.md index 270bff63c43e..9ca2f45561d9 100644 --- a/aspnetcore/toc.md +++ b/aspnetcore/toc.md @@ -173,6 +173,7 @@ ### [Tag Helpers](xref:mvc/views/tag-helpers/intro) #### [Create Tag Helpers](xref:mvc/views/tag-helpers/authoring) #### [Use Tag Helpers in forms](xref:mvc/views/working-with-forms) +#### [Tag Helper Components](xref:mvc/views/tag-helpers/th-components) #### [Built-in Tag Helpers](xref:mvc/views/tag-helpers/builtin-th/Index) ##### [Anchor Tag Helper](xref:mvc/views/tag-helpers/builtin-th/anchor-tag-helper) ##### [Cache Tag Helper](xref:mvc/views/tag-helpers/builtin-th/cache-tag-helper) From 0b0e9b56610cd5c293bbfdaf3167799b3d669076 Mon Sep 17 00:00:00 2001 From: Scott Addie Date: Tue, 18 Sep 2018 14:56:01 -0500 Subject: [PATCH 2/2] Link to TH Components doc from built-in TH doc --- aspnetcore/mvc/views/tag-helpers/built-in/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/index.md b/aspnetcore/mvc/views/tag-helpers/built-in/index.md index c9e5c2399611..8b9fb63e186a 100644 --- a/aspnetcore/mvc/views/tag-helpers/built-in/index.md +++ b/aspnetcore/mvc/views/tag-helpers/built-in/index.md @@ -3,7 +3,7 @@ title: ASP.NET Core built-in Tag Helpers author: pkellner description: Find out how ASP.NET Core built-in Tag Helpers boost your productivity. ms.author: riande -ms.date: 09/13/2017 +ms.date: 09/18/2018 uid: mvc/views/tag-helpers/builtin-th/Index --- @@ -54,5 +54,5 @@ ASP.NET Core includes many built-in Tag Helpers to boost your productivity. This ## Additional resources -* [Client-side development](xref:client-side/index) -* [Tag Helpers](xref:mvc/views/tag-helpers/intro) +* +*