@@ -5,7 +5,7 @@ description: Learn about data binding scenarios for components and DOM elements
55monikerRange : ' >= aspnetcore-3.1'
66ms.author : riande
77ms.custom : mvc
8- ms.date : 04/14 /2020
8+ ms.date : 04/25 /2020
99no-loc : [Blazor, SignalR]
1010uid : blazor/integrate-components
1111---
@@ -237,11 +237,54 @@ For more information on namespaces, see the [Component namespaces](#component-na
237237
238238To render a component from a page or view, use the [ Component Tag Helper] ( xref:mvc/views/tag-helpers/builtin-th/component-tag-helper ) .
239239
240- For more information on how components are rendered, component state, and the ` Component ` Tag Helper, see the following articles:
240+ ### Render stateful interactive components
241241
242- * < xref:blazor/hosting-models >
243- * < xref:blazor/hosting-model-configuration >
244- * < xref:mvc/views/tag-helpers/builtin-th/component-tag-helper >
242+ Stateful interactive components can be added to a Razor page or view.
243+
244+ When the page or view renders:
245+
246+ * The component is prerendered with the page or view.
247+ * The initial component state used for prerendering is lost.
248+ * New component state is created when the SignalR connection is established.
249+
250+ The following Razor page renders a ` Counter ` component:
251+
252+ ``` cshtml
253+ <h1>My Razor Page</h1>
254+
255+ <component type="typeof(Counter)" render-mode="ServerPrerendered"
256+ param-InitialValue="InitialValue" />
257+
258+ @functions {
259+ [BindProperty(SupportsGet=true)]
260+ public int InitialValue { get; set; }
261+ }
262+ ```
263+
264+ For more information, see < xref:xref:mvc/views/tag-helpers/builtin-th/component-tag-helper > .
265+
266+ ### Render noninteractive components
267+
268+ In the following Razor page, the ` Counter ` component is statically rendered with an initial value that's specified using a form. Since the component is statically rendered, the component isn't interactive:
269+
270+ ``` cshtml
271+ <h1>My Razor Page</h1>
272+
273+ <form>
274+ <input type="number" asp-for="InitialValue" />
275+ <button type="submit">Set initial value</button>
276+ </form>
277+
278+ <component type="typeof(Counter)" render-mode="Static"
279+ param-InitialValue="InitialValue" />
280+
281+ @functions {
282+ [BindProperty(SupportsGet=true)]
283+ public int InitialValue { get; set; }
284+ }
285+ ```
286+
287+ For more information, see < xref:xref:mvc/views/tag-helpers/builtin-th/component-tag-helper > .
245288
246289## Component namespaces
247290
0 commit comments