diff --git a/aspnetcore/blazor/advanced-scenarios.md b/aspnetcore/blazor/advanced-scenarios.md index a7d30c890927..bb107273e078 100644 --- a/aspnetcore/blazor/advanced-scenarios.md +++ b/aspnetcore/blazor/advanced-scenarios.md @@ -5,7 +5,7 @@ description: Learn how to incorporate manual logic for building Blazor render tr monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 08/26/2024 +ms.date: 11/12/2024 uid: blazor/advanced-scenarios --- # ASP.NET Core Blazor advanced scenarios (render tree construction) diff --git a/aspnetcore/blazor/blazor-ef-core.md b/aspnetcore/blazor/blazor-ef-core.md index ce4204f9fb60..03b0ef4930ab 100644 --- a/aspnetcore/blazor/blazor-ef-core.md +++ b/aspnetcore/blazor/blazor-ef-core.md @@ -5,7 +5,7 @@ description: Learn how to use Entity Framework Core (EF Core) in Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: jeliknes ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/blazor-ef-core --- # ASP.NET Core Blazor with Entity Framework Core (EF Core) diff --git a/aspnetcore/blazor/call-web-api.md b/aspnetcore/blazor/call-web-api.md index 8b1ac24f5afa..a446f9155d76 100644 --- a/aspnetcore/blazor/call-web-api.md +++ b/aspnetcore/blazor/call-web-api.md @@ -5,7 +5,7 @@ description: Learn how to call a web API from Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 03/08/2024 +ms.date: 11/12/2024 uid: blazor/call-web-api --- # Call a web API from ASP.NET Core Blazor diff --git a/aspnetcore/blazor/components/built-in-components.md b/aspnetcore/blazor/components/built-in-components.md index 6bad093133ca..2bd4b5fcdf9c 100644 --- a/aspnetcore/blazor/components/built-in-components.md +++ b/aspnetcore/blazor/components/built-in-components.md @@ -5,7 +5,7 @@ description: Find information on Razor components provided by the Blazor framewo monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/built-in-components --- # ASP.NET Core built-in Razor components diff --git a/aspnetcore/blazor/components/cascading-values-and-parameters.md b/aspnetcore/blazor/components/cascading-values-and-parameters.md index dcd6efa16d71..443814c3e863 100644 --- a/aspnetcore/blazor/components/cascading-values-and-parameters.md +++ b/aspnetcore/blazor/components/cascading-values-and-parameters.md @@ -5,7 +5,7 @@ description: Learn how to flow data from an ancestor Razor component to descende monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 07/19/2024 +ms.date: 11/12/2024 uid: blazor/components/cascading-values-and-parameters --- # ASP.NET Core Blazor cascading values and parameters diff --git a/aspnetcore/blazor/components/class-libraries-and-static-server-side-rendering.md b/aspnetcore/blazor/components/class-libraries-and-static-server-side-rendering.md index 32673c24c7c0..4cc2a55bfea5 100644 --- a/aspnetcore/blazor/components/class-libraries-and-static-server-side-rendering.md +++ b/aspnetcore/blazor/components/class-libraries-and-static-server-side-rendering.md @@ -5,7 +5,7 @@ description: Learn how component authors can support static server-side renderin monikerRange: '>= aspnetcore-8.0' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/class-libraries-with-static-ssr --- # ASP.NET Core Razor class libraries (RCLs) with static server-side rendering (static SSR) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index a1246a2290b0..0ebcf58fde6c 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -5,7 +5,7 @@ description: Discover how components can be included in Blazor apps from an exte monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/class-libraries --- # Consume ASP.NET Core Razor components from a Razor class library (RCL) diff --git a/aspnetcore/blazor/components/control-head-content.md b/aspnetcore/blazor/components/control-head-content.md index b032142f539b..cad5eeeb6385 100644 --- a/aspnetcore/blazor/components/control-head-content.md +++ b/aspnetcore/blazor/components/control-head-content.md @@ -5,7 +5,7 @@ description: Learn how to control head content in Blazor apps, including how to monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/control-head-content --- # Control `` content in ASP.NET Core Blazor apps diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index 43e8aa5046ea..b09f873c418c 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -5,7 +5,7 @@ description: Learn how CSS isolation scopes CSS to Razor components, which can s monikerRange: '>= aspnetcore-5.0' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/css-isolation --- # ASP.NET Core Blazor CSS isolation diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md index b51e078168a6..a2b21f1eae5e 100644 --- a/aspnetcore/blazor/components/data-binding.md +++ b/aspnetcore/blazor/components/data-binding.md @@ -5,7 +5,7 @@ description: Learn about data binding features for Razor components and DOM elem monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/data-binding --- # ASP.NET Core Blazor data binding diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md index 4f513ce6d7b3..451e78fe1a79 100644 --- a/aspnetcore/blazor/components/dynamiccomponent.md +++ b/aspnetcore/blazor/components/dynamiccomponent.md @@ -5,7 +5,7 @@ description: Learn how to use dynamically-rendered Razor components in Blazor ap monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/dynamiccomponent --- # Dynamically-rendered ASP.NET Core Razor components diff --git a/aspnetcore/blazor/components/element-component-model-relationships.md b/aspnetcore/blazor/components/element-component-model-relationships.md index 2bd98948b749..e7c3315cfc6f 100644 --- a/aspnetcore/blazor/components/element-component-model-relationships.md +++ b/aspnetcore/blazor/components/element-component-model-relationships.md @@ -5,7 +5,7 @@ description: Learn how to use the @key directive attribute to retain element, co monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/key --- # Retain element, component, and model relationships in ASP.NET Core Blazor diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md index a38b975f0fca..90bbcd2410ad 100644 --- a/aspnetcore/blazor/components/event-handling.md +++ b/aspnetcore/blazor/components/event-handling.md @@ -5,7 +5,7 @@ description: Learn about Blazor's event handling features, including event argum monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/09/2024 +ms.date: 11/12/2024 uid: blazor/components/event-handling --- # ASP.NET Core Blazor event handling diff --git a/aspnetcore/blazor/components/generic-type-support.md b/aspnetcore/blazor/components/generic-type-support.md index d8538ca39b41..edcb0abe0f2f 100644 --- a/aspnetcore/blazor/components/generic-type-support.md +++ b/aspnetcore/blazor/components/generic-type-support.md @@ -5,7 +5,7 @@ description: Learn about generic type support in ASP.NET Core Razor components. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 04/10/2024 +ms.date: 11/12/2024 uid: blazor/components/generic-type-support --- # ASP.NET Core Razor component generic type support diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index 79ffc9fc7466..7007e486608d 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -5,7 +5,7 @@ description: Learn how to create and use Razor components in Blazor apps, includ monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 07/19/2024 +ms.date: 11/12/2024 uid: blazor/components/index --- # ASP.NET Core Razor components diff --git a/aspnetcore/blazor/components/integration-hosted-webassembly.md b/aspnetcore/blazor/components/integration-hosted-webassembly.md new file mode 100644 index 000000000000..4b4b099c3836 --- /dev/null +++ b/aspnetcore/blazor/components/integration-hosted-webassembly.md @@ -0,0 +1,1343 @@ +--- +title: Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly solutions +author: guardrex +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. +monikerRange: '>= aspnetcore-3.1 < aspnetcore-8.0' +ms.author: riande +ms.custom: mvc +ms.date: 11/12/2024 +uid: blazor/components/integration-hosted-webassembly +--- +# Integrate ASP.NET Core Razor components with MVC or Razor Pages in hosted Blazor WebAssembly solutions + +> [!NOTE] +> 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. + +:::moniker range="= aspnetcore-7.0 || = aspnetcore-5.0 || = aspnetcore-3.0 || = aspnetcore-3.1 || = aspnetcore-2.0" + +> [!WARNING] +> This version of ASP.NET Core is no longer supported. For more information, see the [.NET and .NET Core Support Policy](https://dotnet.microsoft.com/platform/support/policy/dotnet-core). + +:::moniker-end + +This article explains Razor component integration scenarios for hosted Blazor WebAssembly apps, including prerendering of Razor components on the server. + +> [!IMPORTANT] +> Framework changes across ASP.NET Core releases led to different sets of instructions in this article. Before using this article's guidance, confirm that the document version selector at the top of this article matches the version of ASP.NET Core that you intend to use for your app. + +:::moniker range=">= aspnetcore-7.0" + +Prerendering can improve [Search Engine Optimization (SEO)](https://developer.mozilla.org/docs/Glossary/SEO) by rendering content for the initial HTTP response that search engines can use to calculate page rank. + +## Solution configuration + +### Prerendering configuration + +To set up prerendering for a hosted Blazor WebAssembly app: + +1. Host the Blazor WebAssembly app in an ASP.NET Core app. A standalone Blazor WebAssembly app can be added to an ASP.NET Core solution, or you can use a hosted Blazor WebAssembly app created from the [Blazor WebAssembly project template](xref:blazor/tooling) with the hosted option: + + * Visual Studio: In the **Additional information** dialog, select the **ASP.NET Core Hosted** checkbox when creating the Blazor WebAssembly app. In this article's examples, the solution is named `BlazorHosted`. + * Visual Studio Code/.NET CLI command shell: `dotnet new blazorwasm -ho` (use the `-ho|--hosted` option). Use the `-o|--output {LOCATION}` option to create a folder for the solution and set the solution's project namespaces. In this article's examples, the solution is named `BlazorHosted` (`dotnet new blazorwasm -ho -o BlazorHosted`). + + For the examples in this article, the hosted solution's name (assembly name) is `BlazorHosted`. The client project's namespace is `BlazorHosted.Client`, and the server project's namespace is `BlazorHosted.Server`. + +1. **Delete** the `wwwroot/index.html` file from the Blazor WebAssembly **:::no-loc text="Client":::** project. + +1. In the **:::no-loc text="Client":::** project, **delete** the following lines in `Program.cs`: + + ```diff + - builder.RootComponents.Add("#app"); + - builder.RootComponents.Add("head::after"); + ``` + +1. Add `_Host.cshtml` file to the **:::no-loc text="Server":::** project's `Pages` folder. You can obtain the files from a project created from the Blazor Server template using Visual Studio or using the .NET CLI with the `dotnet new blazorserver -o BlazorServer` command in a command shell (the `-o BlazorServer` option creates a folder for the project). After placing the files into the **:::no-loc text="Server":::** project's `Pages` folder, make the following changes to the files. + + Make the following changes to the `_Host.cshtml` file: + + * Update the `Pages` namespace at the top of the file to match the namespace of the **:::no-loc text="Server":::** app's pages. The `{APP NAMESPACE}` placeholder in the following example represents the namespace of the donor app's pages that provided the `_Host.cshtml` file: + + Delete: + + ```diff + - @namespace {APP NAMESPACE}.Pages + ``` + + Add: + + ```razor + @namespace BlazorHosted.Server.Pages + ``` + + * Add an [`@using`](xref:mvc/views/razor#using) directive for the **:::no-loc text="Client":::** project at the top of the file: + + ```razor + @using BlazorHosted.Client + ``` + + * Update the stylesheet links to point to the WebAssembly project's stylesheets. In the following example, the client project's namespace is `BlazorHosted.Client`. The `{APP NAMESPACE}` placeholder represents the namespace of the donor app that provided the `_Host.cshtml` file. Update the Component Tag Helper (`` tag) for the `HeadOutlet` component to prerender the component. + + Delete: + + ```diff + - + - + - + ``` + + Add: + + ```cshtml + + + + ``` + + > [!NOTE] + > Leave the `` element that requests the Bootstrap stylesheet (`css/bootstrap/bootstrap.min.css`) in place. + + * Update the Blazor script source to use the client-side Blazor WebAssembly script: + + Delete: + + ```diff + - + ``` + + Add: + + ```html + + ``` + + * Update the `render-mode` of the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) to prerender the root `App` component with : + + Delete: + + ```diff + - + ``` + + Add: + + ```cshtml + + ``` + + > [!IMPORTANT] + > Prerendering isn't supported for authentication endpoints (`/authentication/` path segment). For more information, see . + +1. In the `Program.cs` file of the **:::no-loc text="Server":::** project, change the fallback endpoint from the `index.html` file to the `_Host.cshtml` page: + + Delete: + + ```diff + - app.MapFallbackToFile("index.html"); + ``` + + Add: + + ```csharp + app.MapFallbackToPage("/_Host"); + ``` + +1. If the **:::no-loc text="Client":::** and **:::no-loc text="Server":::** projects use one or more common services during prerendering, factor the service registrations into a method that can be called from both projects. For more information, see . + +1. Run the **:::no-loc text="Server":::** project. The hosted Blazor WebAssembly app is prerendered by the **:::no-loc text="Server":::** project for clients. + +### Configuration for embedding Razor components into pages or views + +The following sections and examples for embedding Razor components from the **:::no-loc text="Client":::** Blazor WebAssembly app into pages or views of the server app require additional configuration. + +The **:::no-loc text="Server":::** project must have the following files and folders. + +Razor Pages: + +* `Pages/Shared/_Layout.cshtml` +* `Pages/Shared/_Layout.cshtml.css` +* `Pages/_ViewImports.cshtml` +* `Pages/_ViewStart.cshtml` + +MVC: + +* `Views/Shared/_Layout.cshtml` +* `Views/Shared/_Layout.cshtml.css` +* `Views/_ViewImports.cshtml` +* `Views/_ViewStart.cshtml` + +The preceding files can be obtained by generating an app from the ASP.NET Core project templates using: + +* Visual Studio's new project creation tools. +* Opening a command shell and executing `dotnet new webapp -o {PROJECT NAME}` (Razor Pages) or `dotnet new mvc -o {PROJECT NAME}` (MVC). The option `-o|--output` with a value for the `{PROJECT NAME}` placeholder provides a name for the app and creates a folder for the app. + +Update the namespaces in the imported `_ViewImports.cshtml` file to match those in use by the **:::no-loc text="Server":::** project receiving the files. + +`Pages/_ViewImports.cshtml` (Razor Pages): + +```razor +@using BlazorHosted.Server +@namespace BlazorHosted.Server.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +``` + +`Views/_ViewImports.cshtml` (MVC): + +```razor +@using BlazorHosted.Server +@using BlazorHosted.Server.Models +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +``` + +Update the imported layout file, which is `Pages/Shared/_Layout.cshtml` for Razor Pages or `Views/Shared/_Layout.cshtml` for MVC. + +First, delete the title and the stylesheet from the donor project, which is `RPDonor.styles.css` in the following example. The `{PROJECT NAME}` placeholder represents the donor project's app name. + +```diff +- @ViewData["Title"] - {PROJECT NAME} +- +``` + +Include the **:::no-loc text="Client":::** project's styles in the layout file. In the following example, the **:::no-loc text="Client":::** project's namespace is `BlazorHosted.Client`. The `` element can be updated at the same time. + +Place the following lines in the `<head>` content of the layout file: + +```cshtml +<title>@ViewData["Title"] - BlazorHosted + + + +``` + +The imported layout contains two `Home` (`Index` page) and `Privacy` navigation links. To make the `Home` links point to the hosted Blazor WebAssembly app, change the hyperlinks: + +```diff +- {PROJECT NAME} ++ BlazorHosted +``` + +```diff +- Home ++ Home +``` + +In an MVC layout file: + +```diff +- {PROJECT NAME} ++ BlazorHosted +``` + +```diff +- Home ++ Home +``` + +Update the `