|
1 | 1 | --- |
2 | | -title: Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly |
| 2 | +title: Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly solutions |
3 | 3 | author: guardrex |
4 | | -description: Learn about Razor component integration scenarios for hosted Blazor WebAssembly apps, including prerendering of Razor components on the server. |
| 4 | +description: Learn about Razor component integration scenarios for hosted Blazor WebAssembly apps with MVC or Razor Pages, including prerendering of Razor components on the server. |
5 | 5 | monikerRange: '>= aspnetcore-3.1 < aspnetcore-8.0' |
6 | 6 | ms.author: riande |
7 | 7 | ms.custom: mvc |
8 | 8 | ms.date: 11/18/2024 |
9 | 9 | uid: blazor/components/integration-hosted-webassembly |
10 | 10 | --- |
11 | | -# Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly |
| 11 | +# Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly solutions |
12 | 12 |
|
13 | 13 | > [!NOTE] |
14 | 14 | > Hosted Blazor WebAssembly solutions remain supported, but the project template was removed and is no longer supported in .NET 8 or later. This article appears in the table of contents up to .NET 7 for reference, but note that .NET 7 is a [Standard Support Term](https://dotnet.microsoft.com/platform/support/policy/dotnet-core) release that's no longer supported. |
@@ -302,7 +302,7 @@ After adopting the preceding configuration, embed Razor components into pages or |
302 | 302 |
|
303 | 303 | ## Render components in a page or view with the Component Tag Helper |
304 | 304 |
|
305 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
| 305 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
306 | 306 |
|
307 | 307 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssembly> |
308 | 308 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssemblyPrerendered> |
@@ -351,7 +351,7 @@ The preceding approach usually isn't required because the app usually prerenders |
351 | 351 |
|
352 | 352 | ## Render components in a page or view with a CSS selector |
353 | 353 |
|
354 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in the `Program.cs` file. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
| 354 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in the `Program.cs` file. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
355 | 355 |
|
356 | 356 | In `Program.cs` file of the **:::no-loc text="Client":::** project, add the namespace for the project's Razor components to the top of the file: |
357 | 357 |
|
@@ -864,7 +864,7 @@ After adopting the preceding configuration, embed Razor components into pages or |
864 | 864 |
|
865 | 865 | ## Render components in a page or view with the Component Tag Helper |
866 | 866 |
|
867 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
| 867 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
868 | 868 |
|
869 | 869 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssembly> |
870 | 870 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssemblyPrerendered> |
@@ -913,7 +913,7 @@ The preceding approach usually isn't required because the app usually prerenders |
913 | 913 |
|
914 | 914 | ## Render components in a page or view with a CSS selector |
915 | 915 |
|
916 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in the `Program.cs` file. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
| 916 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in the `Program.cs` file. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
917 | 917 |
|
918 | 918 | In `Program.cs` file of the **:::no-loc text="Client":::** project, add the namespace for the project's Razor components to the top of the file: |
919 | 919 |
|
@@ -1248,7 +1248,7 @@ If the donor project is created from an ASP.NET Core project template and the fi |
1248 | 1248 |
|
1249 | 1249 | ## Render components in a page or view with the Component Tag Helper |
1250 | 1250 |
|
1251 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
| 1251 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) supports two render modes for rendering a component from a Blazor WebAssembly app in a page or view: |
1252 | 1252 |
|
1253 | 1253 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssembly> |
1254 | 1254 | * <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssemblyPrerendered> |
@@ -1281,7 +1281,7 @@ Additional work might be required depending on the static resources that compone |
1281 | 1281 |
|
1282 | 1282 | ## Render components in a page or view with a CSS selector |
1283 | 1283 |
|
1284 | | -After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-and-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in `Program.cs`. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
| 1284 | +After [configuring the solution](#solution-configuration), including the [additional configuration](#configuration-for-embedding-razor-components-into-pages-or-views), add root components to the **:::no-loc text="Client":::** project of a hosted Blazor WebAssembly solution in `Program.cs`. In the following example, the `Counter` component is declared as a root component with a CSS selector that selects the element with the `id` that matches `counter-component`. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. |
1285 | 1285 |
|
1286 | 1286 | In `Program.cs` of the **:::no-loc text="Client":::** project, add the namespace for the project's Razor components to the top of the file: |
1287 | 1287 |
|
|
0 commit comments