From 705c9aa39cbd8a6c326cc7b450bd07aaf8885f83 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 15 Nov 2024 08:43:01 -0500 Subject: [PATCH 1/3] Revert integration guidance to Blazor Server script --- .openpublishing.redirection.json | 5 + aspnetcore/blazor/components/integration.md | 629 ------------------ .../prerendering-and-integration.md | 9 +- aspnetcore/toc.yml | 2 - 4 files changed, 7 insertions(+), 638 deletions(-) delete mode 100644 aspnetcore/blazor/components/integration.md diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index fe2520579040..962b7e7c25f6 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -1317,6 +1317,11 @@ "source_path": "aspnetcore/blazor/images.md", "redirect_url": "/aspnet/core/blazor/images-and-documents", "redirect_document_id": false + }, + { + "source_path": "aspnetcore/blazor/components/integration.md", + "redirect_url": "/aspnet/core/blazor/components/prerendering-and-integration", + "redirect_document_id": false } ] } diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md deleted file mode 100644 index be74fa2b5a29..000000000000 --- a/aspnetcore/blazor/components/integration.md +++ /dev/null @@ -1,629 +0,0 @@ ---- -title: Integrate ASP.NET Core Razor components into ASP.NET Core apps -author: guardrex -description: Learn about Razor component integration scenarios ASP.NET Core apps, Razor Pages and MVC. -monikerRange: '>= aspnetcore-8.0' -ms.author: riande -ms.custom: mvc -ms.date: 02/09/2024 -uid: blazor/components/integration ---- -# Integrate ASP.NET Core Razor components into ASP.NET Core apps - -[!INCLUDE[](~/includes/not-latest-version-without-not-supported-content.md)] - -This article explains Razor component integration scenarios for ASP.NET Core apps. - -## Razor component integration - -Razor components can be integrated into Razor Pages, MVC, and other types of ASP.NET Core apps. Razor components can also be integrated into any web app, including apps not based on ASP.NET Core, as [custom HTML elements](xref:blazor/components/js-spa-frameworks#blazor-custom-elements). - -Use the guidance in the following sections depending on the app's requirements: - -* To integrate components that aren't directly routable from user requests, follow the guidance in the [Use non-routable components in pages or views](#use-non-routable-components-in-pages-or-views) section. Follow this guidance when the app should only embed components into existing pages and views with the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper). -* To integrate components with full Blazor support, follow the guidance in the [Add Blazor support to an ASP.NET Core app](#add-blazor-support-to-an-aspnet-core-app) section. - -## Use non-routable components in pages or views - -Use the following guidance to integrate Razor components into pages or views of an existing Razor Pages or MVC app with the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper). - -> [!NOTE] -> If your app requires directly-routable components (not embedded into pages or views), skip this section and use the guidance in the [Add Blazor support to an ASP.NET Core app](#add-blazor-support-to-an-aspnet-core-app) section. - -When server prerendering is used and the page or view renders: - -* The component is prerendered with the page or view. -* The initial component state used for prerendering is lost. -* New component state is created when the SignalR connection is established. - -For more information on rendering modes, including non-interactive static component rendering, see . To save the state of prerendered Razor components, see . - -Add a `Components` folder to the root folder of the project. - -Add an imports file to the `Components` folder with the following content. Change the `{APP NAMESPACE}` placeholder to the namespace of the project. - -`Components/_Imports.razor`: - -```razor -@using System.Net.Http -@using System.Net.Http.Json -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Routing -@using Microsoft.AspNetCore.Components.Web -@using static Microsoft.AspNetCore.Components.Web.RenderMode -@using Microsoft.AspNetCore.Components.Web.Virtualization -@using Microsoft.JSInterop -@using {APP NAMESPACE} -@using {APP NAMESPACE}.Components -``` - -In the project's layout file (`Pages/Shared/_Layout.cshtml` in Razor Pages apps or `Views/Shared/_Layout.cshtml` in MVC apps): - -* Add the following `` tag and [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) for a component to the `` markup: - - ```cshtml - - - ``` - - The `href` value (the *app base path*) in the preceding example assumes that the app resides at the root URL path (`/`). If the app is a sub-application, follow the guidance in the *App base path* section of the article. - - The component is used to render head (``) content for page titles ( component) and other head elements ( component) set by Razor components. For more information, see . - -* Add a ` - ``` - - The Blazor framework automatically adds the `blazor.web.js` script to the app. - -> [!NOTE] -> Typically, the layout loads via a `_ViewStart.cshtml` file. - -Add an non-operational (no-op) `App` component to the project. - -`Components/App.razor`: - -```razor -@* No-op App component *@ -``` - -Where services are registered, add services for Razor components and services to support rendering Interactive Server components. - -At the top of the `Program` file, add a `using` statement to the top of the file for the project's components: - -```csharp -using {APP NAMESPACE}.Components; -``` - -In the preceding line, change the `{APP NAMESPACE}` placeholder to the app's namespace. For example: - -```csharp -using BlazorSample.Components; -``` - -In the `Program` file before the line that builds the app (`builder.Build()`): - -```csharp -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -``` - -For more information on adding support for Interactive Server and WebAssembly components, see . - -In the `Program` file immediately after the call to map Razor Pages () in a Razor Pages app or to map the default controller route () in an MVC app, call to discover available components and specify the app's root component (the first component loaded). By default, the app's root component is the `App` component (`App.razor`). Chain a call to to configure interactive server-side rendering (interactive SSR) for the app: - -```csharp -app.MapRazorComponents() - .AddInteractiveServerRenderMode(); -``` - -> [!NOTE] -> If the app hasn't already been updated to include Antiforgery Middleware, add the following line after is called: -> -> ```csharp -> app.UseAntiforgery(); -> ``` - -Integrate components into any page or view. For example, add an `EmbeddedCounter` component to the project's `Components` folder. - -`Components/EmbeddedCounter.razor`: - -```razor -

Embedded Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} -``` - -**Razor Pages**: - -In the project's `Index` page of a Razor Pages app, add the `EmbeddedCounter` component's namespace and embed the component into the page. When the `Index` page loads, the `EmbeddedCounter` component is prerendered in the page. In the following example, replace the `{APP NAMESPACE}` placeholder with the project's namespace. - -`Pages/Index.cshtml`: - -```cshtml -@page -@using {APP NAMESPACE}.Components -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - - -``` - -**MVC**: - -In the project's `Index` view of an MVC app, add the `EmbeddedCounter` component's namespace and embed the component into the view. When the `Index` view loads, the `EmbeddedCounter` component is prerendered in the page. In the following example, replace the `{APP NAMESPACE}` placeholder with the project's namespace. - -`Views/Home/Index.cshtml`: - -```cshtml -@using {APP NAMESPACE}.Components -@{ - ViewData["Title"] = "Home Page"; -} - - -``` - -## Add Blazor support to an ASP.NET Core app - -This section covers adding Blazor support to an ASP.NET Core app: - -* [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr) -* [Enable interactive server-side rendering (interactive SSR)](#enable-interactive-server-side-rendering-interactive-ssr) -* [Enable interactive automatic (Auto) or client-side rendering (CSR)](#enable-interactive-automatic-auto-or-client-side-rendering-csr) - -> [!NOTE] -> For the examples in this section, the example app's name and namespace is `BlazorSample`. - -### Add static server-side rendering (static SSR) - -Add a `Components` folder to the app. - -Add the following `_Imports` file for namespaces used by Razor components. - -`Components/_Imports.razor`: - -```razor -@using System.Net.Http -@using System.Net.Http.Json -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Routing -@using Microsoft.AspNetCore.Components.Web -@using static Microsoft.AspNetCore.Components.Web.RenderMode -@using Microsoft.AspNetCore.Components.Web.Virtualization -@using Microsoft.JSInterop -@using {APP NAMESPACE} -@using {APP NAMESPACE}.Components -``` - -Change the namespace placeholder (`{APP NAMESPACE}`) to the namespace of the app. For example: - -```razor -@using BlazorSample -@using BlazorSample.Components -``` - -Add the Blazor router (``, ) to the app in a `Routes` component, which is placed in the app's `Components` folder. - -`Components/Routes.razor`: - -```razor - - - - - - -``` - -Add an `App` component to the app, which serves as the root component, which is the first component the app loads. - -`Components/App.razor`: - -:::moniker range=">= aspnetcore-9.0" - -```razor - - - - - - - - - - - - - - - - - -``` - -:::moniker-end - -:::moniker range="< aspnetcore-9.0" - -```razor - - - - - - - - - - - - - - - - - -``` - -:::moniker-end - -The `{ASSEMBLY NAME}` placeholder is the app's assembly name. For example, a project with an assembly name of `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name. - -Add a `Pages` folder to the `Components` folder to hold routable Razor components. - -Add the following `Welcome` component to demonstrate static SSR. - -`Components/Pages/Welcome.razor`: - -```razor -@page "/welcome" - -Welcome! - -

Welcome to Blazor!

- -

@message

- -@code { - private string message = - "Hello from a Razor component and welcome to Blazor!"; -} -``` - -In the ASP.NET Core project's `Program` file: - -* Add a `using` statement to the top of the file for the project's components: - - ```csharp - using {APP NAMESPACE}.Components; - ``` - - In the preceding line, change the `{APP NAMESPACE}` placeholder to the app's namespace. For example: - - ```csharp - using BlazorSample.Components; - ``` - -* Add Razor component services (), which also automatically adds antiforgery services (). Add the following line before the line that calls `builder.Build()`): - - ```csharp - builder.Services.AddRazorComponents(); - ``` - -* Add [Antiforgery Middleware](xref:blazor/security/index#antiforgery-support) to the request processing pipeline with . is called after the call to . If there are calls to and , the call to must go between them. A call to must be placed after calls to and . - - ```csharp - app.UseAntiforgery(); - ``` - -* Add to the app's request processing pipeline with the `App` component (`App.razor`) specified as the default root component (the first component loaded). Place the following code before the line that calls `app.Run`: - - ```csharp - app.MapRazorComponents(); - ``` - -When the app is run, the `Welcome` component is accessed at the `/welcome` endpoint. - -### Enable interactive server-side rendering (interactive SSR) - -Follow the guidance in the [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr) section. - -In the app's `Program` file, add a call to where Razor component services are added with : - -```csharp -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -``` - -Add a call to where Razor components are mapped with : - -```csharp -app.MapRazorComponents() - .AddInteractiveServerRenderMode(); -``` - -Add the following `Counter` component to the app that adopts interactive server-side rendering (interactive SSR). - -`Components/Pages/Counter.razor`: - -```razor -@page "/counter" -@rendermode InteractiveServer - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} -``` - -When the app is run, the `Counter` component is accessed at `/counter`. - -### Enable interactive automatic (Auto) or client-side rendering (CSR) - -Follow the guidance in the [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr) section. - -Components using the Interactive Auto render mode initially use interactive SSR. The .NET runtime and app bundle are downloaded to the client in the background and cached so that they can be used on future visits. Components using the Interactive WebAssembly render mode only render interactively on the client after the Blazor bundle is downloaded and the Blazor runtime activates. Keep in mind that when using the Interactive Auto or Interactive WebAssembly render modes, component code downloaded to the client isn't private. For more information, see . - -After deciding which render mode to adopt: - -* If you plan to adopt the Interactive Auto render mode, follow the guidance in the [Enable interactive server-side rendering (interactive SSR)](#enable-interactive-server-side-rendering-interactive-ssr) section. -* If you plan to only adopt Interactive WebAssembly rendering, continue without adding interactive SSR. - -Add a package reference for the [`Microsoft.AspNetCore.Components.WebAssembly.Server`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Server) NuGet package to the app. - -[!INCLUDE[](~/includes/package-reference.md)] - -Create a donor Blazor Web App to provide assets to the app. Follow the guidance in the article, selecting support for the following template features when generating the Blazor Web App. - -For the app's name, use the same name as the ASP.NET Core app, which results in matching app name markup in components and matching namespaces in code. Using the same name/namespace isn't strictly required, as namespaces can be adjusted after assets are moved from the donor app to the ASP.NET Core app. However, time is saved by matching the namespaces at the outset. - -Visual Studio: - -* For **Interactive render mode**, select **Auto (Server and WebAssembly)**. -* Set the **Interactivity location** to **Per page/component**. -* Deselect the checkbox for **Include sample pages**. - -.NET CLI: - -* Use the `-int Auto` option. -* Don't use the `-ai|--all-interactive` option. -* Pass the `-e|--empty` option. - -From the donor Blazor Web App, copy the entire `.Client` project into the solution folder of the ASP.NET Core app. - -> [!IMPORTANT] -> **Don't copy the `.Client` folder into the ASP.NET Core project's folder.** The best approach for organizing .NET solutions is to place each project of the solution into its own folder inside of a top-level solution folder. If a solution folder above the ASP.NET Core project's folder doesn't exist, create one. Next, copy the `.Client` project's folder from the donor Blazor Web App into the solution folder. The final project folder structure should have the following layout: -> -> * `BlazorSampleSolution` (top-level solution folder) -> * `BlazorSample` (original ASP.NET Core project) -> * `BlazorSample.Client` (`.Client` project folder from the donor Blazor Web App) -> -> For the ASP.NET Core solution file, you can leave it in the ASP.NET Core project's folder. Alternatively, you can move the solution file or create a new one in the top-level solution folder as long as the project references correctly point to the project files (`.csproj`) of the two projects in the solution folder. - -If you named the donor Blazor Web App when you created the donor project the same as the ASP.NET Core app, the namespaces used by the donated assets match those in the ASP.NET Core app. You shouldn't need to take further steps to match namespaces. If you used a different namespace when creating the donor Blazor Web App project, you must adjust the namespaces across the donated assets to match if you intend to use the rest of this guidance exactly as presented. If the namespaces don't match, ***either*** adjust the namespaces before proceeding ***or*** adjust the namespaces as you follow the remaining guidance in this section. - -Delete the donor Blazor Web App, as it has no further use in this process. - -Add the `.Client` project to the solution: - -* Visual Studio: Right-click the solution in **Solution Explorer** and select **Add** > **Existing Project**. Navigate to the `.Client` folder and select the project file (`.csproj`). - -* .NET CLI: Use the [`dotnet sln add` command](/dotnet/core/tools/dotnet-sln#add) to add the `.Client` project to the solution. - -Add a project reference from the ASP.NET Core project to the client project: - -* Visual Studio: Right-click the ASP.NET Core project and select **Add** > **Project Reference**. Select the `.Client` project and select **OK**. - -* .NET CLI: From the ASP.NET Core project's folder, use the following command: - - ```dotnetcli - dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj - ``` - - The preceding command assumes the following: - - * The project file name is `BlazorSample.Client.csproj`. - * The `.Client` project is in a `BlazorSample.Client` folder inside the solution folder. The `.Client` folder is side-by-side with the ASP.NET Core project's folder. - - For more information on the `dotnet add reference` command, see [`dotnet add reference` (.NET documentation)](/dotnet/core/tools/dotnet-add-reference). - -Make the following changes to the ASP.NET Core app's `Program` file: - -* Add Interactive WebAssembly component services with where Razor component services are added with . - - For interactive Auto rendering: - - ```csharp - builder.Services.AddRazorComponents() - .AddInteractiveServerComponents() - .AddInteractiveWebAssemblyComponents(); - ``` - - For only Interactive WebAssembly rendering: - - ```csharp - builder.Services.AddRazorComponents() - .AddInteractiveWebAssemblyComponents(); - ``` - -* Add the Interactive WebAssembly render mode () and additional assemblies for the `.Client` project where Razor components are mapped with . - - For interactive automatic (Auto) rendering: - - ```csharp - app.MapRazorComponents() - .AddInteractiveServerRenderMode() - .AddInteractiveWebAssemblyRenderMode() - .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly); - ``` - - For only Interactive WebAssembly rendering: - - ```csharp - app.MapRazorComponents() - .AddInteractiveWebAssemblyRenderMode() - .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly); - ``` - - In the preceding examples, change `BlazorSample.Client` to match the `.Client` project's namespace. - -Add a `Pages` folder to the `.Client` project. - -If the ASP.NET Core project has an existing `Counter` component: - -* Move the component to the `Pages` folder of the `.Client` project. -* Remove the `@rendermode` directive at the top of the component file. - -If the ASP.NET Core app doesn't have a `Counter` component, add the following `Counter` component (`Pages/Counter.razor`) to the `.Client` project: - -```razor -@page "/counter" -@rendermode InteractiveAuto - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} -``` - -If the app is only adopting Interactive WebAssembly rendering, remove the `@rendermode` directive and value: - -```diff -- @rendermode InteractiveAuto -``` - -Run the solution from the ***ASP.NET Core app*** project: - -* Visual Studio: Confirm that the ASP.NET Core project is selected in **Solution Explorer** when running the app. - -* .NET CLI: Run the project from the ASP.NET Core project's folder. - -To load the `Counter` component, navigate to `/counter`. - -### Implement Blazor's layout and styles - -Optionally, assign a default layout component using the parameter of the `RouteView` component. - -In `Routes.razor`, the following example uses a `MainLayout` component as the default layout: - -```razor - -``` - -For more information, see . - -Blazor project template layout and stylesheets are available from the [`dotnet/aspnetcore` GitHub repository](https://github.com/dotnet/aspnetcore/tree/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout): - -* `MainLayout.razor` -* `MainLayout.razor.css` -* `NavMenu.razor` -* `NavMenu.razor.css` - -[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] - -Depending on how you organize your layout files in the app, you might need to add an `@using` statement for the layout files' folder in the app's `_Imports.razor` file in order to surface them for use in the app's components. - -There's no need to explicitly reference stylesheets when using [CSS isolation](xref:blazor/components/css-isolation). The Blazor framework automatically bundles individual component stylesheets. The app's bundled stylesheet is already referenced in the app's `App` component (`{ASSEMBLY NAME}.styles.css`, where the `{ASSEMBLY NAME}` placeholder is the app's assembly name). - -## Return a `RazorComponentResult` from an MVC controller action - -An MVC controller action can return a component with . - -`Components/Welcome.razor`: - -```razor -Welcome! - -

Welcome!

- -

@Message

- -@code { - [Parameter] - public string? Message { get; set; } -} -``` - -In a controller: - -```csharp -public IResult GetWelcomeComponent() => - new RazorComponentResult(new { Message = "Hello, world!" }); -``` - -Only HTML markup for the rendered component is returned. Layouts and HTML page markup aren't automatically rendered with the component. To produce a complete HTML page, the app can maintain a [Blazor layout](xref:blazor/components/layouts) that provides HTML markup for ``, ``, ``, and other tags. The component includes the layout with the [`@layout`](xref:mvc/views/razor#layout) Razor directive at the top of the component definition file, `Welcome.razor` for the example in this section. The following example assumes that the app has a layout named `RazorComponentResultLayout` (`Components/Layout/RazorComponentResultLayout.razor`): - -```razor -@using BlazorSample.Components.Layout -@layout RazorComponentResultLayout -``` - -You can avoid placing the `@using` statement for the `Layout` folder in individual components by moving it to the app's `_Imports.razor` file. - -For more information, see . - -## Component namespaces - -When using a custom folder to hold the project's Razor components, add the namespace representing the folder to either the page/view or to the `_ViewImports.cshtml` file. In the following example: - -* Components are stored in the `Components` folder of the project. -* The `{APP NAMESPACE}` placeholder is the project's namespace. `Components` represents the name of the folder. - -```cshtml -@using {APP NAMESPACE}.Components -``` - -For example: - -```cshtml -@using BlazorSample.Components -``` - -The `_ViewImports.cshtml` file is located in the `Pages` folder of a Razor Pages app or the `Views` folder of an MVC app. - -For more information, see . - -## Additional resources - - diff --git a/aspnetcore/blazor/components/prerendering-and-integration.md b/aspnetcore/blazor/components/prerendering-and-integration.md index 833dc82a8960..15c8f4e9974c 100644 --- a/aspnetcore/blazor/components/prerendering-and-integration.md +++ b/aspnetcore/blazor/components/prerendering-and-integration.md @@ -2,7 +2,7 @@ title: Prerender and integrate ASP.NET Core Razor components author: guardrex description: Learn about Razor component integration scenarios for Blazor apps, including prerendering of Razor components on the server. -monikerRange: '>= aspnetcore-3.1 < aspnetcore-8.0' +monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc ms.date: 02/09/2024 @@ -11,12 +11,7 @@ zone_pivot_groups: blazor-hosting-models --- # Prerender and integrate ASP.NET Core Razor components -:::moniker range="< aspnetcore-7.0" - -> [!NOTE] -> This isn't the latest version of this article. For the latest version of this article, see the [.NET 7 version](?view=aspnetcore-7.0&preserve-view=true). - -:::moniker-end +[!INCLUDE[](~/includes/not-latest-version.md)] This article explains Razor component integration scenarios for Blazor apps, including prerendering of Razor components on the server. diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 5c8c55da4d3d..5381bb5c5532 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -548,8 +548,6 @@ items: uid: blazor/components/quickgrid - name: Prerender and integrate components uid: blazor/components/prerendering-and-integration - - name: Integrate components - uid: blazor/components/integration - name: Class libraries uid: blazor/components/class-libraries - name: Class libraries with static SSR From f7346665da1cb007518b71e5333e860669966278 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 15 Nov 2024 08:58:47 -0500 Subject: [PATCH 2/3] Updates --- .openpublishing.redirection.json | 8 ++++---- ...{prerendering-and-integration.md => integration.md} | 4 ++-- aspnetcore/blazor/fundamentals/signalr.md | 2 +- .../host-and-deploy/multiple-hosted-webassembly.md | 4 ++-- aspnetcore/blazor/includes/prerendering.md | 2 +- aspnetcore/blazor/security/index.md | 6 ++---- .../security/webassembly/additional-scenarios.md | 2 +- aspnetcore/blazor/security/webassembly/index.md | 2 +- aspnetcore/migration/30-to-31.md | 2 +- .../views/tag-helpers/built-in/component-tag-helper.md | 10 +++++----- .../tag-helpers/built-in/persist-component-state.md | 8 ++++---- aspnetcore/mvc/views/view-components.md | 4 ++-- aspnetcore/release-notes/aspnetcore-3.1.md | 2 +- aspnetcore/release-notes/aspnetcore-6.0.md | 2 +- aspnetcore/toc.yml | 2 +- .../choose-web-ui/includes/choose-web-ui3-7.md | 4 +--- aspnetcore/whats-new/dotnet-AspNetCore.Docs-mod0.md | 2 +- 17 files changed, 31 insertions(+), 35 deletions(-) rename aspnetcore/blazor/components/{prerendering-and-integration.md => integration.md} (99%) diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index 962b7e7c25f6..faaf355d258b 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -1117,7 +1117,7 @@ }, { "source_path": "aspnetcore/blazor/integrate-components.md", - "redirect_url": "/aspnet/core/blazor/components/prerendering-and-integration", + "redirect_url": "/aspnet/core/blazor/components/integration", "redirect_document_id": false }, { @@ -1157,7 +1157,7 @@ }, { "source_path": "aspnetcore/blazor/components/integrate-components-into-razor-pages-and-mvc-apps.md", - "redirect_url": "/aspnet/core/blazor/components/prerendering-and-integration", + "redirect_url": "/aspnet/core/blazor/components/integration", "redirect_document_id": false }, { @@ -1319,8 +1319,8 @@ "redirect_document_id": false }, { - "source_path": "aspnetcore/blazor/components/integration.md", - "redirect_url": "/aspnet/core/blazor/components/prerendering-and-integration", + "source_path": "aspnetcore/blazor/components/prerendering-and-integration.md", + "redirect_url": "/aspnet/core/blazor/components/integration", "redirect_document_id": false } ] diff --git a/aspnetcore/blazor/components/prerendering-and-integration.md b/aspnetcore/blazor/components/integration.md similarity index 99% rename from aspnetcore/blazor/components/prerendering-and-integration.md rename to aspnetcore/blazor/components/integration.md index 15c8f4e9974c..824313ef36de 100644 --- a/aspnetcore/blazor/components/prerendering-and-integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -1,12 +1,12 @@ --- -title: Prerender and integrate ASP.NET Core Razor components +title: Integrate ASP.NET Core Razor components author: guardrex description: Learn about Razor component integration scenarios for Blazor apps, including prerendering of Razor components on the server. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc ms.date: 02/09/2024 -uid: blazor/components/prerendering-and-integration +uid: blazor/components/integration zone_pivot_groups: blazor-hosting-models --- # Prerender and integrate ASP.NET Core Razor components diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 151e764a0a87..ce99003507aa 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -156,7 +156,7 @@ If prerendering is configured, prerendering occurs before the client connection If prerendering is configured, prerendering occurs before the client connection to the server is established. For more information, see the following articles: * -* +* :::moniker-end diff --git a/aspnetcore/blazor/host-and-deploy/multiple-hosted-webassembly.md b/aspnetcore/blazor/host-and-deploy/multiple-hosted-webassembly.md index 0f416370df22..29fd719339eb 100644 --- a/aspnetcore/blazor/host-and-deploy/multiple-hosted-webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/multiple-hosted-webassembly.md @@ -66,7 +66,7 @@ The preceding configurations are beyond the scope of this article. For more info * [Host and deploy articles](xref:host-and-deploy/index) * -* +* Use an existing hosted Blazor WebAssembly [solution](xref:blazor/tooling#visual-studio-solution-file-sln) or create a [new hosted Blazor WebAssembly solution](xref:blazor/tooling) from the Blazor WebAssembly project template by passing the `-ho|--hosted` option if using the .NET CLI or selecting the **ASP.NET Core Hosted** checkbox in Visual Studio when the project is created in the IDE. @@ -453,7 +453,7 @@ public class HomeController : Controller > [!NOTE] > The preceding `Index` view is a minimal example purely for demonstration purposes. If the app requires additional MVC assets, such as a layout, styles, scripts, and imports, obtain them from an app created from the MVC project template. For more information, see . -For more information on using the Razor components from either of the client apps in pages or views of the server app, see . +For more information on using the Razor components from either of the client apps in pages or views of the server app, see . ## Run the app diff --git a/aspnetcore/blazor/includes/prerendering.md b/aspnetcore/blazor/includes/prerendering.md index 42dee80c0325..719501f2e6b9 100644 --- a/aspnetcore/blazor/includes/prerendering.md +++ b/aspnetcore/blazor/includes/prerendering.md @@ -9,7 +9,7 @@ :::moniker range="< aspnetcore-8.0" -*This section applies to server-side apps and hosted Blazor WebAssembly apps that prerender Razor components. Prerendering is covered in .* +*This section applies to server-side apps and hosted Blazor WebAssembly apps that prerender Razor components. Prerendering is covered in .* :::moniker-end diff --git a/aspnetcore/blazor/security/index.md b/aspnetcore/blazor/security/index.md index 9ac8358aed38..bd6c3be32b6a 100644 --- a/aspnetcore/blazor/security/index.md +++ b/aspnetcore/blazor/security/index.md @@ -20,18 +20,16 @@ Security scenarios differ between authorization code running server-side and cli If authorization rule enforcement must be guaranteed, don't implement authorization checks in client-side code. Build a Blazor Web App that only relies on server-side rendering (SSR) for authorization checks and rule enforcement. -[Razor Pages authorization conventions](xref:security/authorization/razor-pages-authorization) don't apply to routable Razor components. If a non-routable Razor component is [embedded in a page of a Razor Pages app](xref:blazor/components/integration), the page's authorization conventions indirectly affect the Razor component along with the rest of the page's content. - :::moniker-end :::moniker range="< aspnetcore-8.0" If authorization rule enforcement and the security of data and code must be guaranteed, don't develop a client-side app. Build a Blazor Server app. -[Razor Pages authorization conventions](xref:security/authorization/razor-pages-authorization) don't apply to routable Razor components. If a non-routable Razor component is [embedded in a page of a Razor Pages app](xref:blazor/components/prerendering-and-integration), the page's authorization conventions indirectly affect the Razor component along with the rest of the page's content. - :::moniker-end +[Razor Pages authorization conventions](xref:security/authorization/razor-pages-authorization) don't apply to routable Razor components. If a non-routable Razor component is [embedded in a page of a Razor Pages app](xref:blazor/components/integration), the page's authorization conventions indirectly affect the Razor component along with the rest of the page's content. + :::moniker range="< aspnetcore-8.0" ASP.NET Core Identity is designed to work in the context of HTTP request and response communication, which generally isn't the Blazor app client-server communication model. ASP.NET Core apps that use ASP.NET Core Identity for user management should use Razor Pages instead of Razor components for Identity-related UI, such as user registration, login, logout, and other user management tasks. Building Razor components that directly handle Identity tasks is possible for several scenarios but isn't recommended or supported by Microsoft. diff --git a/aspnetcore/blazor/security/webassembly/additional-scenarios.md b/aspnetcore/blazor/security/webassembly/additional-scenarios.md index c7d8dfd2db7f..9b3c325a6d0f 100644 --- a/aspnetcore/blazor/security/webassembly/additional-scenarios.md +++ b/aspnetcore/blazor/security/webassembly/additional-scenarios.md @@ -1283,7 +1283,7 @@ To configure a Blazor WebAssembly app to use the [ASP.NET Core gRPC framework](x :::moniker range="< aspnetcore-8.0" > [!NOTE] -> Prerendering is enabled by default in hosted Blazor WebAssembly apps, so you must account for the component rendering first from the server and then from the client. Any prerendered state should flow to the client so that it can be reused. For more information, see . +> Prerendering is enabled by default in hosted Blazor WebAssembly apps, so you must account for the component rendering first from the server and then from the client. Any prerendered state should flow to the client so that it can be reused. For more information, see . :::moniker-end diff --git a/aspnetcore/blazor/security/webassembly/index.md b/aspnetcore/blazor/security/webassembly/index.md index 8d855eb38f8f..1941588a1270 100644 --- a/aspnetcore/blazor/security/webassembly/index.md +++ b/aspnetcore/blazor/security/webassembly/index.md @@ -220,7 +220,7 @@ For examples, see the following resources: :::moniker range="< aspnetcore-8.0" -[Prerendering](xref:blazor/components/prerendering-and-integration) isn't supported for authentication endpoints (`/authentication/` path segment). +[Prerendering](xref:blazor/components/integration) isn't supported for authentication endpoints (`/authentication/` path segment). :::moniker-end diff --git a/aspnetcore/migration/30-to-31.md b/aspnetcore/migration/30-to-31.md index b1654b0e33c2..d56169d503ae 100644 --- a/aspnetcore/migration/30-to-31.md +++ b/aspnetcore/migration/30-to-31.md @@ -112,7 +112,7 @@ ASP.NET Core 3.1 introduces a `Component` Tag Helper. The Tag Helper can replace + ``` -For more information, see . +For more information, see . ## ASP.NET Core Module (ANCM) 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 c4c3e232d3f1..65c72e56e105 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 @@ -24,14 +24,14 @@ Follow the guidance in the *Use non-routable components in pages or views* secti Follow the guidance in the *Configuration* section for either: -* [Blazor Server](xref:blazor/components/prerendering-and-integration?pivots=server): Integrate routable and non-routable Razor components into Razor Pages and MVC apps. -* [Blazor WebAssembly](xref:blazor/components/prerendering-and-integration?pivots=webassembly): Integrate Razor components from a hosted Blazor WebAssembly solution into Razor Pages and MVC apps. +* [Blazor Server](xref:blazor/components/integration?pivots=server): Integrate routable and non-routable Razor components into Razor Pages and MVC apps. +* [Blazor WebAssembly](xref:blazor/components/integration?pivots=webassembly): Integrate Razor components from a hosted Blazor WebAssembly solution into Razor Pages and MVC apps. :::moniker-end :::moniker range="< aspnetcore-5.0" -Follow the guidance in the *Configuration* section of the article. +Follow the guidance in the *Configuration* section of the article. :::moniker-end @@ -343,7 +343,7 @@ The preceding example assumes that the `ParameterComponent` component is in the :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" * -* +* * * * @@ -352,7 +352,7 @@ The preceding example assumes that the `ParameterComponent` component is in the :::moniker range="< aspnetcore-6.0" -* +* * * * diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/persist-component-state.md b/aspnetcore/mvc/views/tag-helpers/built-in/persist-component-state.md index 88f45aa72358..7f243b902a49 100644 --- a/aspnetcore/mvc/views/tag-helpers/built-in/persist-component-state.md +++ b/aspnetcore/mvc/views/tag-helpers/built-in/persist-component-state.md @@ -24,8 +24,8 @@ Follow the guidance in the *Use non-routable components in pages or views* secti Follow the guidance in the *Configuration* section for either: -* [Blazor WebAssembly](xref:blazor/components/prerendering-and-integration?pivots=webassembly) -* [Blazor Server](xref:blazor/components/prerendering-and-integration?pivots=server) +* [Blazor WebAssembly](xref:blazor/components/integration?pivots=webassembly) +* [Blazor Server](xref:blazor/components/integration?pivots=server) :::moniker-end @@ -71,7 +71,7 @@ In `Pages/_Host.cshtml` of Blazor apps that are either WebAssembly prerendered ( Decide what state to persist using the service. [`PersistentComponentState.RegisterOnPersisting`](xref:Microsoft.AspNetCore.Components.PersistentComponentState.RegisterOnPersisting%2A) registers a callback to persist the component state before the app is paused. The state is retrieved when the application resumes. -For more information and examples, see . +For more information and examples, see . :::moniker-end @@ -90,7 +90,7 @@ For more information and examples, see -* +* * * * diff --git a/aspnetcore/mvc/views/view-components.md b/aspnetcore/mvc/views/view-components.md index f274fa1ab29e..76d079a1217a 100644 --- a/aspnetcore/mvc/views/view-components.md +++ b/aspnetcore/mvc/views/view-components.md @@ -350,7 +350,7 @@ A view component consists of two parts: Like controllers, a view component can be a POCO, but most developers take advantage of the methods and properties available by deriving from . -When considering if view components meet an app's specifications, consider using Razor components instead. Razor components also combine markup with C# code to produce reusable UI units. Razor components are designed for developer productivity when providing client-side UI logic and composition. For more information, see . For information on how to incorporate Razor components into an MVC or Razor Pages app, see . +When considering if view components meet an app's specifications, consider using Razor components instead. Razor components also combine markup with C# code to produce reusable UI units. Razor components are designed for developer productivity when providing client-side UI logic and composition. For more information, see . For information on how to incorporate Razor components into an MVC or Razor Pages app, see . ## Create a view component @@ -655,7 +655,7 @@ View components are intended anywhere you have reusable rendering logic that's t A view component consists of two parts: the class (typically derived from ) and the result it returns (typically a view). Like controllers, a view component can be a [POCO](https://stackoverflow.com/questions/250001/poco-definition), but most developers take advantage of the methods and properties available by deriving from `ViewComponent`. -When considering if view components meet an app's specifications, consider using Razor components instead. Razor components also combine markup with C# code to produce reusable UI units. Razor components are designed for developer productivity when providing client-side UI logic and composition. For more information, see . For information on how to incorporate Razor components into an MVC or Razor Pages app, see . +When considering if view components meet an app's specifications, consider using Razor components instead. Razor components also combine markup with C# code to produce reusable UI units. Razor components are designed for developer productivity when providing client-side UI logic and composition. For more information, see . For information on how to incorporate Razor components into an MVC or Razor Pages app, see . ## Creating a view component diff --git a/aspnetcore/release-notes/aspnetcore-3.1.md b/aspnetcore/release-notes/aspnetcore-3.1.md index cd7e57adb8e0..7af7a3eb2a31 100644 --- a/aspnetcore/release-notes/aspnetcore-3.1.md +++ b/aspnetcore/release-notes/aspnetcore-3.1.md @@ -34,7 +34,7 @@ For example, prerender a `Counter` component with an increment amount (`Incremen param-IncrementAmount="10" /> ``` -For more information, see [Integrate components into Razor Pages and MVC apps](xref:blazor/components/prerendering-and-integration?view=aspnetcore-3.1&preserve-view=true). +For more information, see [Integrate components into Razor Pages and MVC apps](xref:blazor/components/integration?view=aspnetcore-3.1&preserve-view=true). ## Support for shared queues in HTTP.sys diff --git a/aspnetcore/release-notes/aspnetcore-6.0.md b/aspnetcore/release-notes/aspnetcore-6.0.md index fd58ee567efc..edd8d15b8380 100644 --- a/aspnetcore/release-notes/aspnetcore-6.0.md +++ b/aspnetcore/release-notes/aspnetcore-6.0.md @@ -160,7 +160,7 @@ Blazor WebAssembly supports ahead-of-time (AOT) compilation, where you can compi ### Persist prerendered state -Blazor supports persisting state in a prerendered page so that the state doesn't need to be recreated when the app is fully loaded. For more information, see . +Blazor supports persisting state in a prerendered page so that the state doesn't need to be recreated when the app is fully loaded. For more information, see . ### Error boundaries diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 5381bb5c5532..00da4e252abb 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -547,7 +547,7 @@ items: - name: QuickGrid component uid: blazor/components/quickgrid - name: Prerender and integrate components - uid: blazor/components/prerendering-and-integration + uid: blazor/components/integration - name: Class libraries uid: blazor/components/class-libraries - name: Class libraries with static SSR diff --git a/aspnetcore/tutorials/choose-web-ui/includes/choose-web-ui3-7.md b/aspnetcore/tutorials/choose-web-ui/includes/choose-web-ui3-7.md index f39a8aba5e3f..905f79fcf100 100644 --- a/aspnetcore/tutorials/choose-web-ui/includes/choose-web-ui3-7.md +++ b/aspnetcore/tutorials/choose-web-ui/includes/choose-web-ui3-7.md @@ -80,15 +80,13 @@ Benefits for MVC or Razor Pages plus Blazor, in addition to MVC or Razor Pages b To get started with ASP.NET Core MVC or Razor Pages plus Blazor, see . -To get started with ASP.NET Core MVC or Razor Pages plus Blazor, see . - ## Next steps For more information, see: * * -* +* * :::moniker-end diff --git a/aspnetcore/whats-new/dotnet-AspNetCore.Docs-mod0.md b/aspnetcore/whats-new/dotnet-AspNetCore.Docs-mod0.md index e0536e8341fe..d51da79cb252 100644 --- a/aspnetcore/whats-new/dotnet-AspNetCore.Docs-mod0.md +++ b/aspnetcore/whats-new/dotnet-AspNetCore.Docs-mod0.md @@ -48,7 +48,7 @@ Welcome to what's new in the ASP.NET Core docs for June 2024. This article lists - Update Apache coverage (drop CentOS mentions) - Fix spacing in Apache configuration example - - Import-Export interop: collocated JS with RCL -- - Use 'reconnection UI' for all references +- - Use 'reconnection UI' for all references - - Interactive SSR RCs in global WASM/Auto projects - - Simplified auth state serialization for BWAs - - Change Tooling article content layout From afff093e5e2f128835405ec2826e509c13f80b56 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 15 Nov 2024 09:04:17 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/components/index.md | 15 --------------- aspnetcore/blazor/components/layouts.md | 10 ---------- aspnetcore/blazor/components/lifecycle.md | 4 ++-- 3 files changed, 2 insertions(+), 27 deletions(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index 941c744b040f..79ffc9fc7466 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1843,8 +1843,6 @@ In the preceding code, the CSS selector, `#app`, indicates that the `App` compon MVC and Razor Pages apps can also use the [Component Tag Helper](xref:Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper) to register statically-rendered Blazor WebAssembly root components: -:::moniker range=">= aspnetcore-6.0" - ```cshtml ``` @@ -1853,22 +1851,9 @@ Statically-rendered components can only be added to the app. They can't be remov For more information, see the following resources: -:::moniker-end - -:::moniker range=">= aspnetcore-8.0" - * * -:::moniker-end - -:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" - -* -* - -:::moniker-end - [1]: [2]: diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 75e250372aac..f643e5460f57 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -385,18 +385,8 @@ The following rendered HTML markup is produced by the preceding nested layout. E ## Share a Razor Pages layout with integrated components -:::moniker range=">= aspnetcore-8.0" - When routable components are integrated into a Razor Pages app, the app's shared layout can be used with the components. For more information, see . -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -When routable components are integrated into a Razor Pages app, the app's shared layout can be used with the components. For more information, see . - -:::moniker-end - :::moniker range=">= aspnetcore-8.0" ## Sections diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md index 39df76e2d641..d992b943709b 100644 --- a/aspnetcore/blazor/components/lifecycle.md +++ b/aspnetcore/blazor/components/lifecycle.md @@ -206,7 +206,7 @@ To prevent developer code in from running twice when prerendering, see the [Stateful reconnection after prerendering](#stateful-reconnection-after-prerendering) section. Although the content in the section focuses on Blazor Server and stateful SignalR *reconnection*, the scenario for prerendering in hosted Blazor WebAssembly solutions () involves similar conditions and approaches to prevent executing developer code twice. To preserve state during the execution of initialization code while prerendering, see . +To prevent developer code in from running twice when prerendering, see the [Stateful reconnection after prerendering](#stateful-reconnection-after-prerendering) section. Although the content in the section focuses on Blazor Server and stateful SignalR *reconnection*, the scenario for prerendering in hosted Blazor WebAssembly solutions () involves similar conditions and approaches to prevent executing developer code twice. To preserve state during the execution of initialization code while prerendering, see . :::moniker-end @@ -612,7 +612,7 @@ The content in this section focuses on Blazor Web Apps and stateful SignalR *rec :::moniker range="< aspnetcore-8.0" -Although the content in this section focuses on Blazor Server and stateful SignalR *reconnection*, the scenario for prerendering in hosted Blazor WebAssembly solutions () involves similar conditions and approaches to prevent executing developer code twice. To preserve state during the execution of initialization code while prerendering, see . +Although the content in this section focuses on Blazor Server and stateful SignalR *reconnection*, the scenario for prerendering in hosted Blazor WebAssembly solutions () involves similar conditions and approaches to prevent executing developer code twice. To preserve state during the execution of initialization code while prerendering, see . :::moniker-end