From 052119e9c91528fc2fc20673d607ad792446b6b7 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 10 Apr 2020 06:35:30 -0500 Subject: [PATCH] Rendering components in RP/MVC updates (#17571) --- aspnetcore/blazor/integrate-components.md | 15 +++- .../built-in/component-tag-helper.md | 76 ++++++++++++++++++- 2 files changed, 89 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/integrate-components.md b/aspnetcore/blazor/integrate-components.md index 336186f395..3edade0c0b 100644 --- a/aspnetcore/blazor/integrate-components.md +++ b/aspnetcore/blazor/integrate-components.md @@ -5,7 +5,7 @@ description: Learn about data binding scenarios for components and DOM elements monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 03/17/2020 +ms.date: 04/01/2020 no-loc: [Blazor, SignalR] uid: blazor/integrate-components --- @@ -105,6 +105,19 @@ To support routable Razor components in Razor Pages apps: Components use the shared *_Layout.cshtml* file for their layout. + configures whether the `App` component: + + * Is prerendered into the page. + * Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent. + + | Render Mode | Description | + | ----------- | ----------- | + | | Renders the `App` component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, this marker is used to bootstrap a Blazor app. | + | | Renders a marker for a Blazor Server app. Output from the `App` component isn't included. When the user-agent starts, this marker is used to bootstrap a Blazor app. | + | | Renders the `App` component into static HTML. | + + For more information on the Component Tag Helper, see . + 1. Add a low-priority route for the *_Host.cshtml* page to endpoint configuration in `Startup.Configure`: ```csharp diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md b/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md index 704261e511..a7e3ea21c6 100644 --- a/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md +++ b/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md @@ -4,7 +4,7 @@ author: guardrex ms.author: riande description: Learn how to use the ASP.NET Core Component Tag Helper to render Razor components in pages and views. ms.custom: mvc -ms.date: 03/18/2020 +ms.date: 04/01/2020 no-loc: [Blazor, SignalR] uid: mvc/views/tag-helpers/builtin-th/component-tag-helper --- @@ -14,12 +14,25 @@ By [Daniel Roth](https://github.com/danroth27) and [Luke Latham](https://github. To render a component from a page or view, use the [Component Tag Helper](xref:Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper). +## Prerequisites + +Follow the guidance in the *Prepare the app to use components in pages and views* section of the article. + +## Component Tag Helper + The following Component Tag Helper renders the `Counter` component in a page or view: ```cshtml +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@using {APP ASSEMBLY}.Pages + +... + ``` +The preceding example assumes that the `Counter` component is in the app's *Pages* folder. + The Component Tag Helper can also pass parameters to components. Consider the following `ColorfulCheckbox` component that sets the check box label's color and size: ```razor @@ -51,10 +64,17 @@ The Component Tag Helper can also pass parameters to components. Consider the fo The `Size` (`int`) and `Color` (`string`) [component parameters](xref:blazor/components#component-parameters) can be set by the Component Tag Helper: ```cshtml +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@using {APP ASSEMBLY}.Shared + +... + ``` +The preceding example assumes that the `ColorfulCheckbox` component is in the app's *Shared* folder. + The following HTML is rendered in the page or view: ```html @@ -68,6 +88,60 @@ Passing a quoted string requires an [explicit Razor expression](xref:mvc/views/r The parameter type must be JSON serializable, which typically means that the type must have a default constructor and settable properties. For example, you can specify a value for `Size` and `Color` in the preceding example because the types of `Size` and `Color` are primitive types (`int` and `string`), which are supported by the JSON serializer. +In the following example, a class object is passed to the component: + +*MyClass.cs*: + +```csharp +public class MyClass +{ + public MyClass() + { + } + + public int MyInt { get; set; } = 999; + public string MyString { get; set; } = "Initial value"; +} +``` + +**The class must have a public parameterless constructor.** + +*Shared/MyComponent.razor*: + +```razor +

MyComponent

+ +

Int: @MyObject.MyInt

+

String: @MyObject.MyString

+ +@code +{ + [Parameter] + public MyClass MyObject { get; set; } +} +``` + +*Pages/MyPage.cshtml*: + +```cshtml +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@using {APP ASSEMBLY} +@using {APP ASSEMBLY}.Shared + +... + +@{ + var myObject = new MyClass(); + myObject.MyInt = 7; + myObject.MyString = "Set by MyPage"; +} + + +``` + +The preceding example assumes that the `MyComponent` component is in the app's *Shared* folder. `MyClass` is in the app's namespace (`{APP ASSEMBLY}`). + configures whether the component: * Is prerendered into the page.