Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Tag Helper Components doc to ToC #8598

Merged
merged 2 commits into from
Sep 18, 2018
Merged

Add Tag Helper Components doc to ToC #8598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be4e91c
Add Tag Helper Components doc to ToC
scottaddie Sep 18, 2018
0b0e9b5
Link to TH Components doc from built-in TH doc
scottaddie Sep 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions aspnetcore/mvc/views/tag-helpers/built-in/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down Expand Up @@ -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)
* <xref:mvc/views/tag-helpers/intro>
* <xref:mvc/views/tag-helpers/th-components>
20 changes: 10 additions & 10 deletions aspnetcore/mvc/views/tag-helpers/th-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <xref: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*.

[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))

Expand All @@ -34,11 +34,11 @@ Inside the HTML `<head>` 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 <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperComponent>. The abstraction:
* Allows initialization of the class with a <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperContext>.
* 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 `<head>` element.
* The <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperComponent.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.
* <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperComponent.ProcessAsync*> compares the execution context's <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperContext.TagName*> property value to `head`. If the comparison evaluates to true, the content of the `_style` field is injected into the HTML `<head>` element.

### Inject into HTML body element

Expand All @@ -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 <xref:Microsoft.AspNetCore.Mvc.Razor.TagHelpers.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):

[!code-csharp[](th-components/samples/RazorPagesSample/Startup.cs?name=snippet_ConfigureServices&highlight=12-15)]

Expand Down Expand Up @@ -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 <xref:Microsoft.AspNetCore.Mvc.Razor.TagHelpers.TagHelperComponentTagHelper>.
* 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 `<address>` HTML element:

Expand Down Expand Up @@ -140,7 +140,7 @@ public class AddressTagHelperComponent : TagHelperComponent
}
```

The preceding `ProcessAsync` method injects the HTML provided to `SetHtmlContent` into the matching `<address>` element. The injection occurs when:
The preceding `ProcessAsync` method injects the HTML provided to <xref:Microsoft.AspNetCore.Razor.TagHelpers.TagHelperContent.SetHtmlContent*> into the matching `<address>` element. The injection occurs when:

* The execution context's `TagName` property value equals `address`.
* The corresponding `<address>` element has a `printable` attribute.
Expand Down
1 change: 1 addition & 0 deletions aspnetcore/toc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down