Rendering components in RP/MVC updates (#17571)

Author: guardrex

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.
 
+   <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode> 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 |
+   | ----------- | ----------- |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.ServerPrerendered> | 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. |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Server> | 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. |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Static> | Renders the `App` component into static HTML. |
+
+   For more information on the Component Tag Helper, see <xref:mvc/views/tag-helpers/builtin-th/component-tag-helper>.
+
 1. Add a low-priority route for the *_Host.cshtml* page to endpoint configuration in `Startup.Configure`:
 
    ```csharp

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 <xref:blazor/integrate-components#prepare-the-app-to-use-components-in-pages-and-views> 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
+
+...
+
 <component type="typeof(Counter)" render-mode="ServerPrerendered" />
 ```
 
+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
+
+...
+
 <component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
     param-Size="14" param-Color="@("blue")" />
 ```
 
+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
+<h2>MyComponent</h2>
+
+<p>Int: @MyObject.MyInt</p>
+<p>String: @MyObject.MyString</p>
+
+@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";
+}
+
+<component type="typeof(MyComponent)" render-mode="ServerPrerendered" 
+    param-MyObject="@myObject" />
+```
+
+The preceding example assumes that the `MyComponent` component is in the app's *Shared* folder. `MyClass` is in the app's namespace (`{APP ASSEMBLY}`).
+
 <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode> configures whether the component:
 
 * Is prerendered into the page.