From eb36e8d4294a55fe72fec1978845b6eb1073aed0 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 2 Aug 2021 15:51:18 -0500 Subject: [PATCH 1/5] Blazor control head content --- .../blazor/components/control-head-content.md | 83 +++++++++++++++++++ aspnetcore/6.0/blazor/state-management.md | 2 +- aspnetcore/6.0/blazor/toc.yml | 2 + 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 aspnetcore/6.0/blazor/components/control-head-content.md diff --git a/aspnetcore/6.0/blazor/components/control-head-content.md b/aspnetcore/6.0/blazor/components/control-head-content.md new file mode 100644 index 000000000000..d457cf0715cb --- /dev/null +++ b/aspnetcore/6.0/blazor/components/control-head-content.md @@ -0,0 +1,83 @@ +--- +title: Control <head> content in ASP.NET Core Blazor apps +author: guardrex +description: Learn how to control <head> content in Blazor apps, including how to set the page title from a component. +monikerRange: 'aspnetcore-6.0' +ms.author: riande +ms.custom: mvc +ms.date: 08/02/2021 +no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] +uid: blazor/components/control-head-content +--- +# Control \ content in ASP.NET Core Blazor apps + +Blazor can directly set HTML \ element content of a page rendered by a component, including for the page's title (`` element) and metadata (`<meta>` elements). + +For more information on the `<title>` and `meta` elements, see the following [Mozilla MDN Web Docs](https://developer.mozilla.org/en-US/) resources: + +* [What's in the head? Metadata in HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +* [\<head>: The Document Metadata (Header) element](https://developer.mozilla.org/docs/Web/HTML/Element/head) +* [\<title>: The Document Title element](https://developer.mozilla.org/docs/Web/HTML/Element/title) +* [\<meta>: The metadata element](https://developer.mozilla.org/docs/Web/HTML/Element/meta) + +## `HeadOutlet` component + +The `HeadOutlet` component, renders content provided by `HeadContent` components. + +In an app created from the Blazor WebAssembly project template, the `HeadOutlet` component is added to the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> collection of the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder> in `Program.Main`: + +```csharp +builder.RootComponents.Add<HeadOutlet>("head::after"); +``` + +When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/::after) is specified, the contents of the root component are appended to the existing head contents instead of replacing them. This allows the app to retain static head content in `wwwroot/index.html` without having to repeat it in the app's Razor components. + +In Blazor Server apps created from the Blazor Server project template, a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) renders \<head> content for the `HeadOutlet` component in `Pages/_Layout.cshtml`: + +```cshtml +<head> + ... + <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> +</head> +``` + +## Control \<head> content in a component + +Specify the page's title with the `PageTitle` component. Specify `<head>` element content with the `HeadContent` component. The following example, sets the page's title and description using Razor. + +`Pages/SetTitleAndDescription.razor`: + +```razor +@page "/set-title-and-description" + +<h1>Set title & description</h1> + +<p> + Title: @title +</p> + +<p> + Description: @description +</p> + +<PageTitle>@title</PageTitle> + +<HeadContent> + <meta id="meta-description" name="description" content="@description"> +</HeadContent> + +@code { + private string description = "Description set by component"; + private string title = "Title set by component"; +} +``` + +## Not found page title + +In Blazor apps created from Blazor project templates, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`. + +`App.razor`: + +```razor +<PageTitle>Not found</PageTitle> +``` diff --git a/aspnetcore/6.0/blazor/state-management.md b/aspnetcore/6.0/blazor/state-management.md index e66a578326ef..6f044b1f3dfc 100644 --- a/aspnetcore/6.0/blazor/state-management.md +++ b/aspnetcore/6.0/blazor/state-management.md @@ -307,7 +307,7 @@ To disable prerendering, open the `Pages/_Host.cshtml` file and change the `rend <component type="typeof(App)" render-mode="Server" /> ``` -Prerendering of `<head>` content is disabled in `Pages/_Layout.cshtml`: +[Prerendering of `<head>` content](xref:blazor/components/control-head-content) is disabled in `Pages/_Layout.cshtml`: ```cshtml <component type="typeof(HeadOutlet)" render-mode="Server" /> diff --git a/aspnetcore/6.0/blazor/toc.yml b/aspnetcore/6.0/blazor/toc.yml index d59a7462aae5..9de47e66b301 100644 --- a/aspnetcore/6.0/blazor/toc.yml +++ b/aspnetcore/6.0/blazor/toc.yml @@ -37,6 +37,8 @@ items: href: components/index.md - name: Layouts href: components/layouts.md + - name: Control head content + href: components/control-head-content.md - name: Cascading values and parameters href: components/cascading-values-and-parameters.md - name: Data binding From 22d623b0683ffdd08dfd66988b4051014752bd01 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 3 Aug 2021 05:39:48 -0500 Subject: [PATCH 2/5] Updates --- .../6.0/blazor/components/class-libraries.md | 2 + .../blazor/components/control-head-content.md | 64 ++++++++++--------- .../6.0/blazor/components/css-isolation.md | 4 ++ .../6.0/blazor/components/event-handling.md | 4 ++ .../prerendering-and-integration.md | 6 ++ .../6.0/blazor/fundamentals/handle-errors.md | 2 + aspnetcore/6.0/blazor/fundamentals/routing.md | 4 ++ aspnetcore/6.0/blazor/fundamentals/signalr.md | 12 ++++ aspnetcore/6.0/blazor/fundamentals/startup.md | 2 + .../6.0/blazor/globalization-localization.md | 6 ++ .../6.0/blazor/host-and-deploy/index.md | 4 ++ .../blazor/includes/layout-page-preview-7.md | 5 ++ .../6.0/blazor/includes/prerendering.md | 4 ++ .../call-dotnet-from-javascript.md | 10 +++ .../call-javascript-from-dotnet.md | 16 +++++ .../javascript-interoperability/index.md | 8 +++ aspnetcore/6.0/blazor/project-structure.md | 2 + .../security/content-security-policy.md | 2 + aspnetcore/6.0/blazor/state-management.md | 2 + 19 files changed, 129 insertions(+), 30 deletions(-) create mode 100644 aspnetcore/6.0/blazor/includes/layout-page-preview-7.md diff --git a/aspnetcore/6.0/blazor/components/class-libraries.md b/aspnetcore/6.0/blazor/components/class-libraries.md index fa3b22934258..fd15d518183a 100644 --- a/aspnetcore/6.0/blazor/components/class-libraries.md +++ b/aspnetcore/6.0/blazor/components/class-libraries.md @@ -241,6 +241,8 @@ An alternative to using the `Link` component is to link to the library's stylesh `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```diff + <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" /> ``` diff --git a/aspnetcore/6.0/blazor/components/control-head-content.md b/aspnetcore/6.0/blazor/components/control-head-content.md index d457cf0715cb..a1790ebe9ade 100644 --- a/aspnetcore/6.0/blazor/components/control-head-content.md +++ b/aspnetcore/6.0/blazor/components/control-head-content.md @@ -5,43 +5,17 @@ description: Learn how to control <head> content in Blazor apps, including monikerRange: 'aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 08/02/2021 +ms.date: 08/03/2021 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/components/control-head-content --- # Control \<head> content in ASP.NET Core Blazor apps -Blazor can directly set HTML \<head> element content of a page rendered by a component, including for the page's title (`<title>` element) and metadata (`<meta>` elements). +*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August, 2021. ASP.NET Core 6.0 is scheduled for release later this year.* -For more information on the `<title>` and `meta` elements, see the following [Mozilla MDN Web Docs](https://developer.mozilla.org/en-US/) resources: +Razor components can modify the HTML \<head> element content of a page, including setting the page's title (`<title>` element) and modifying metadata (`<meta>` elements). -* [What's in the head? Metadata in HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) -* [\<head>: The Document Metadata (Header) element](https://developer.mozilla.org/docs/Web/HTML/Element/head) -* [\<title>: The Document Title element](https://developer.mozilla.org/docs/Web/HTML/Element/title) -* [\<meta>: The metadata element](https://developer.mozilla.org/docs/Web/HTML/Element/meta) - -## `HeadOutlet` component - -The `HeadOutlet` component, renders content provided by `HeadContent` components. - -In an app created from the Blazor WebAssembly project template, the `HeadOutlet` component is added to the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> collection of the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder> in `Program.Main`: - -```csharp -builder.RootComponents.Add<HeadOutlet>("head::after"); -``` - -When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/::after) is specified, the contents of the root component are appended to the existing head contents instead of replacing them. This allows the app to retain static head content in `wwwroot/index.html` without having to repeat it in the app's Razor components. - -In Blazor Server apps created from the Blazor Server project template, a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) renders \<head> content for the `HeadOutlet` component in `Pages/_Layout.cshtml`: - -```cshtml -<head> - ... - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> -</head> -``` - -## Control \<head> content in a component +## Control \<head> content in a Razor component Specify the page's title with the `PageTitle` component. Specify `<head>` element content with the `HeadContent` component. The following example, sets the page's title and description using Razor. @@ -72,6 +46,27 @@ Specify the page's title with the `PageTitle` component. Specify `<head>` elemen } ``` +## `HeadOutlet` component + +The `HeadOutlet` component renders content provided by `HeadContent` components. + +In an app created from the Blazor WebAssembly project template, the `HeadOutlet` component is added to the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> collection of the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder> in `Program.Main`: + +```csharp +builder.RootComponents.Add<HeadOutlet>("head::after"); +``` + +When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/::after) is specified, the contents of the root component are appended to the existing head contents instead of replacing them. This allows the app to retain static head content in `wwwroot/index.html` without having to repeat it in the app's Razor components. + +In Blazor Server apps created from the Blazor Server project template, a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) renders \<head> content for the `HeadOutlet` component in `Pages/_Layout.cshtml`: + +```cshtml +<head> + ... + <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> +</head> +``` + ## Not found page title In Blazor apps created from Blazor project templates, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`. @@ -81,3 +76,12 @@ In Blazor apps created from Blazor project templates, the `NotFound` component t ```razor <PageTitle>Not found</PageTitle> ``` + +## Additional resources + +Mozilla MDN Web Docs documentation: + +* [What's in the head? Metadata in HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +* [\<head>: The Document Metadata (Header) element](https://developer.mozilla.org/docs/Web/HTML/Element/head) +* [\<title>: The Document Title element](https://developer.mozilla.org/docs/Web/HTML/Element/title) +* [\<meta>: The metadata element](https://developer.mozilla.org/docs/Web/HTML/Element/meta) diff --git a/aspnetcore/6.0/blazor/components/css-isolation.md b/aspnetcore/6.0/blazor/components/css-isolation.md index 02f9b199e780..be78f8f40cfb 100644 --- a/aspnetcore/6.0/blazor/components/css-isolation.md +++ b/aspnetcore/6.0/blazor/components/css-isolation.md @@ -47,6 +47,8 @@ h1 { CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). The following `<link>` element is added by default to an app created from the Blazor project templates, where the placeholder `{ASSEMBLY NAME}` is the project's assembly name: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet"> ``` @@ -210,6 +212,8 @@ In the following example: `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet"> ``` diff --git a/aspnetcore/6.0/blazor/components/event-handling.md b/aspnetcore/6.0/blazor/components/event-handling.md index 72b5cc7f454d..108f39183477 100644 --- a/aspnetcore/6.0/blazor/components/event-handling.md +++ b/aspnetcore/6.0/blazor/components/event-handling.md @@ -96,6 +96,8 @@ Custom events with custom event arguments are generally enabled with the followi 1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server) immediately after the Blazor `<script>`: + [!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> Blazor.registerCustomEventType('customevent', { @@ -169,6 +171,8 @@ public class CustomPasteEventArgs : EventArgs Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Layout.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script. The following example only handles pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images. +[!INCLUDE[](../includes/layout-page-preview-7.md)] + `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server) immediately after the Blazor script: ```html diff --git a/aspnetcore/6.0/blazor/components/prerendering-and-integration.md b/aspnetcore/6.0/blazor/components/prerendering-and-integration.md index 10d9aecacb43..54491aab7e00 100644 --- a/aspnetcore/6.0/blazor/components/prerendering-and-integration.md +++ b/aspnetcore/6.0/blazor/components/prerendering-and-integration.md @@ -39,6 +39,8 @@ To set up prerendering for a hosted Blazor WebAssembly app: 1. Add `_Host.cshtml` and `_Layout.cshtml` files to the **`Server`** project's `Pages` folder. You can obtain `_Host.cshtml` and `_Layout.cshtml` files from a project created from the Blazor Server template 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 **`Server`** project's `Pages` folder, make the following changes to the `_Layout.cshtml` file: + [!INCLUDE[](../includes/layout-page-preview-7.md)] + * Provide an [`@using`](xref:mvc/views/razor#using) directive for the **`Client`** project (for example, `@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`: @@ -54,6 +56,8 @@ To set up prerendering for a hosted Blazor WebAssembly app: * In the `_Layout.cshtml` file, update the Blazor script source to use the client-side Blazor WebAssembly script: + [!INCLUDE[](../includes/layout-page-preview-7.md)] + ```diff - <script src="_framework/blazor.server.js"></script> + <script src="_framework/blazor.webassembly.js"></script> @@ -671,6 +675,8 @@ To solve these problems, Blazor supports persisting state in a prerendered page ::: zone pivot="server" +[!INCLUDE[](../includes/layout-page-preview-7.md)] + `Pages/_Layout.cshtml`: ```cshtml diff --git a/aspnetcore/6.0/blazor/fundamentals/handle-errors.md b/aspnetcore/6.0/blazor/fundamentals/handle-errors.md index 7ad049eb2fa6..72429598518d 100644 --- a/aspnetcore/6.0/blazor/fundamentals/handle-errors.md +++ b/aspnetcore/6.0/blazor/fundamentals/handle-errors.md @@ -232,6 +232,8 @@ The UI for this error handling experience is part of the [Blazor project templat In a Blazor Server app, customize the experience in the `Pages/_Layout.cshtml` file: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <div id="blazor-error-ui"> <environment include="Staging,Production"> diff --git a/aspnetcore/6.0/blazor/fundamentals/routing.md b/aspnetcore/6.0/blazor/fundamentals/routing.md index 8b4a23a9b529..d9e7aaf92db0 100644 --- a/aspnetcore/6.0/blazor/fundamentals/routing.md +++ b/aspnetcore/6.0/blazor/fundamentals/routing.md @@ -41,6 +41,8 @@ Components support multiple route templates using multiple [`@page` directives]( > [!IMPORTANT] > For URLs to resolve correctly, the app must include a `<base>` tag in its `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server) with the app base path specified in the `href` attribute. For more information, see <xref:blazor/host-and-deploy/index#app-base-path>. +[!INCLUDE[](../includes/layout-page-preview-7.md)] + The <xref:Microsoft.AspNetCore.Components.Routing.Router> doesn't interact with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section. ## Focus an element on navigation @@ -232,6 +234,8 @@ Use <xref:Microsoft.AspNetCore.Components.NavigationManager> to manage URIs and | <xref:Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri%2A> | Converts a relative URI into an absolute URI. | | <xref:Microsoft.AspNetCore.Components.NavigationManager.ToBaseRelativePath%2A> | Given a base URI (for example, a URI previously returned by <xref:Microsoft.AspNetCore.Components.NavigationManager.BaseUri>), converts an absolute URI into a URI relative to the base URI prefix. | +[!INCLUDE[](../includes/layout-page-preview-7.md)] + For the <xref:Microsoft.AspNetCore.Components.NavigationManager.LocationChanged> event, <xref:Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs> provides the following information about navigation events: * <xref:Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs.Location>: The URL of the new location. diff --git a/aspnetcore/6.0/blazor/fundamentals/signalr.md b/aspnetcore/6.0/blazor/fundamentals/signalr.md index 9c5867ca7d3c..d724ad4a6756 100644 --- a/aspnetcore/6.0/blazor/fundamentals/signalr.md +++ b/aspnetcore/6.0/blazor/fundamentals/signalr.md @@ -137,6 +137,8 @@ When the client detects that the connection has been lost, a default UI is displ To customize the UI, define an element with an `id` of `components-reconnect-modal` in the `<body>` of the `_Layout.cshtml` Razor page. +[!INCLUDE[](../includes/layout-page-preview-7.md)] + `Pages/_Layout.cshtml`: ```cshtml @@ -176,6 +178,8 @@ By default, Blazor Server apps prerender the UI on the server before the client Configure the manual start of a Blazor Server app's [SignalR circuit](xref:blazor/hosting-models#circuits) in the `Pages/_Layout.cshtml` file: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + * Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script. * Place a script that calls `Blazor.start` after the `blazor.server.js` script's `<script>` tag and inside the closing `</body>` tag. @@ -189,6 +193,8 @@ On the client builder, pass in the `configureSignalR` configuration object that `Pages/_Layout.cshtml`: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <body> ... @@ -224,6 +230,8 @@ To modify the connection events, register callbacks for the following connection `Pages/_Layout.cshtml`: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <body> ... @@ -248,6 +256,8 @@ To adjust the reconnection retry count and interval, set the number of retries ( `Pages/_Layout.cshtml`: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <body> ... @@ -272,6 +282,8 @@ To hide the reconnection display, set the reconnection handler's `_reconnectionD `Pages/_Layout.cshtml`: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <body> ... diff --git a/aspnetcore/6.0/blazor/fundamentals/startup.md b/aspnetcore/6.0/blazor/fundamentals/startup.md index 58cef6972d72..16b7f99222b7 100644 --- a/aspnetcore/6.0/blazor/fundamentals/startup.md +++ b/aspnetcore/6.0/blazor/fundamentals/startup.md @@ -13,6 +13,8 @@ uid: blazor/fundamentals/startup Configure a manual start in the `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + * Add an `autostart="false"` attribute and value to the `<script>` tag for the Blazor script. * Place a script that calls `Blazor.start` after the Blazor `<script>` tag and inside the closing `</body>` tag. diff --git a/aspnetcore/6.0/blazor/globalization-localization.md b/aspnetcore/6.0/blazor/globalization-localization.md index 0b2ce891fa87..bde54c66aeb5 100644 --- a/aspnetcore/6.0/blazor/globalization-localization.md +++ b/aspnetcore/6.0/blazor/globalization-localization.md @@ -441,6 +441,8 @@ The following example shows how to set the current culture in a cookie that can Add the following namespaces to the top of the `Pages/_Layout.cshtml` file: +[!INCLUDE[](includes/layout-page-preview-7.md)] + ```csharp @using System.Globalization @using Microsoft.AspNetCore.Localization @@ -448,6 +450,8 @@ Add the following namespaces to the top of the `Pages/_Layout.cshtml` file: Immediately after the opening `<body>` tag of `Pages/_Layout.cshtml`, add the following Razor expression: +[!INCLUDE[](includes/layout-page-preview-7.md)] + ```cshtml @{ this.HttpContext.Response.Cookies.Append( @@ -646,6 +650,8 @@ For information on ordering the Localization Middleware in the middleware pipeli If the app should localize resources based on storing a user's culture setting, use a localization culture cookie. Use of a cookie ensures that the WebSocket connection can correctly propagate the culture. If localization schemes are based on the URL path or query string, the scheme might not be able to work with [WebSockets](xref:fundamentals/websockets), thus fail to persist the culture. Therefore, the recommended approach is to use a localization culture cookie. See the [Dynamically set the culture by user preference](#dynamically-set-the-culture-by-user-preference) section of this article to see an example Razor expression for the `Pages/_Layout.cshtml` file that persists the user's culture selection. +[!INCLUDE[](includes/layout-page-preview-7.md)] + ::: zone-end The example of localized resources in this section works with the prior examples in this article where the app's supported cultures are English (`en`) as a default locale and Spanish (`es`) as a user-selectable or browser-specified alternate locale. diff --git a/aspnetcore/6.0/blazor/host-and-deploy/index.md b/aspnetcore/6.0/blazor/host-and-deploy/index.md index 5838bd60fcb2..c386914aef28 100644 --- a/aspnetcore/6.0/blazor/host-and-deploy/index.md +++ b/aspnetcore/6.0/blazor/host-and-deploy/index.md @@ -70,6 +70,8 @@ Blazor WebAssembly (`wwwroot/index.html`): Blazor Server (`Pages/_Layout.cshtml`): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <base href="~/CoolApp/"> ``` @@ -86,6 +88,8 @@ In many hosting scenarios, the relative URL path to the app is the root of the a To set the app's base path, update the `<base>` tag within the `<head>` tag elements of the `Pages/_Layout.cshtml` file (Blazor Server) or `wwwroot/index.html` file (Blazor WebAssembly). Set the `href` attribute value to `/{RELATIVE URL PATH}/` (Blazor WebAssembly) or `~/{RELATIVE URL PATH}/` (Blazor Server). **The trailing slash is required.** The placeholder `{RELATIVE URL PATH}` is the app's full relative URL path. +[!INCLUDE[](../includes/layout-page-preview-7.md)] + For a Blazor WebAssembly app with a non-root relative URL path (for example, `<base href="/CoolApp/">`), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `<base>` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: ```dotnetcli diff --git a/aspnetcore/6.0/blazor/includes/layout-page-preview-7.md b/aspnetcore/6.0/blazor/includes/layout-page-preview-7.md new file mode 100644 index 000000000000..97ab9cd0804e --- /dev/null +++ b/aspnetcore/6.0/blazor/includes/layout-page-preview-7.md @@ -0,0 +1,5 @@ +--- +no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] +--- +> [!NOTE] +> In Blazor Server Preview 6 or earlier of ASP.NET Core 6.0, all root page HTML markup is found in `Pages/_Host.cshtml`. In Preview 7 or later, most root page markup is found in `Pages/_Layout.cshtml`. Preview 7 of ASP.NET Core 6.0 is scheduled for release in August, 2021. ASP.NET Core 6.0 is scheduled for release later this year. diff --git a/aspnetcore/6.0/blazor/includes/prerendering.md b/aspnetcore/6.0/blazor/includes/prerendering.md index 9aeba1a7d503..dd2735efed12 100644 --- a/aspnetcore/6.0/blazor/includes/prerendering.md +++ b/aspnetcore/6.0/blazor/includes/prerendering.md @@ -7,6 +7,8 @@ While an app is prerendering, certain actions, such as calling into JavaScript, For the following example, the `setElementText1` function is placed inside the `<head>` element of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). The function is called with <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A?displayProperty=nameWithType> and doesn't return a value: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.setElementText1 = (element, text) => element.innerText = text; @@ -35,6 +37,8 @@ The following component demonstrates how to use JavaScript interop as part of a For the following example, the `setElementText2` function is placed inside the `<head>` element of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). The function is called with<xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A?displayProperty=nameWithType> and returns a value: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.setElementText2 = (element, text) => { diff --git a/aspnetcore/6.0/blazor/javascript-interoperability/call-dotnet-from-javascript.md b/aspnetcore/6.0/blazor/javascript-interoperability/call-dotnet-from-javascript.md index 5ba9d1c217ce..aebdf9651171 100644 --- a/aspnetcore/6.0/blazor/javascript-interoperability/call-dotnet-from-javascript.md +++ b/aspnetcore/6.0/blazor/javascript-interoperability/call-dotnet-from-javascript.md @@ -62,6 +62,8 @@ The following `returnArrayAsync` JS function, calls the `ReturnArrayAsync` .NET Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.returnArrayAsync = () => { @@ -119,6 +121,8 @@ The following `sayHello1` JS function receives a <xref:Microsoft.JSInterop.DotNe Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.sayHello1 = (dotNetHelper) => { @@ -168,6 +172,8 @@ The following `sayHello1` JS function: Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.sayHello1 = (dotNetHelper) => { @@ -247,6 +253,8 @@ The following `updateMessageCaller` JS function invokes the `UpdateMessageCaller Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.updateMessageCaller = (dotnetHelper) => { @@ -306,6 +314,8 @@ Blazor supports optimized byte array JS interop that avoids encoding/decoding by Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server), provide a `sendByteArray` JS function. The function is called by a button in the component and doesn't return a value: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.sendByteArray = () => { diff --git a/aspnetcore/6.0/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/6.0/blazor/javascript-interoperability/call-javascript-from-dotnet.md index a559519b47ee..515eb3374b2d 100644 --- a/aspnetcore/6.0/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/6.0/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -34,6 +34,8 @@ The following example is based on [`TextDecoder`](https://developer.mozilla.org/ Add the following JS code inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.convertArray = (win1251Array) => { @@ -64,6 +66,8 @@ Use <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A> when: Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server), provide a `displayTickerAlert1` JS function. The function is called with <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A> and doesn't return a value: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.displayTickerAlert1 = (symbol, price) => { @@ -98,6 +102,8 @@ Use <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync%2A> when .NET shou Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server), provide a `displayTickerAlert2` JS function. The following example returns a string for display by the caller: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.displayTickerAlert2 = (symbol, price) => { @@ -367,6 +373,8 @@ For a parent component to make an element reference available to other component Add the following style to the `<head>` of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <style> .red { color: red } @@ -375,6 +383,8 @@ Add the following style to the `<head>` of `wwwroot/index.html` (Blazor WebAssem Add the following script inside closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> function setElementClass(element, className) { @@ -499,6 +509,8 @@ To produce correct styling, add the following stylesheet tag to the host HTML pa In `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server), add the following `<link>` element to the `<head>` element markup: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> @@ -527,6 +539,8 @@ Blazor supports optimized byte array JS interop that avoids encoding/decoding by Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server), provide a `receiveByteArray` JS function. The function is called with <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A> and doesn't return a value: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <script> window.receiveByteArray = (bytes) => { @@ -600,6 +614,8 @@ In the following example: Place the following `<script>` block in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). Alternatively, you can place the JS in an external JS file referenced inside the closing `</body>` tag with `<script src="{SCRIPT PATH AND FILE NAME (.js)}></script>`, where the `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and file name of the script. +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```javascript <script> window.returnObjectReference = () => { diff --git a/aspnetcore/6.0/blazor/javascript-interoperability/index.md b/aspnetcore/6.0/blazor/javascript-interoperability/index.md index d932be0f5f4f..50aad0e639b6 100644 --- a/aspnetcore/6.0/blazor/javascript-interoperability/index.md +++ b/aspnetcore/6.0/blazor/javascript-interoperability/index.md @@ -49,6 +49,8 @@ Load JavaScript (JS) code using any of the following approaches: Place the script (`<script>...</script>`) in the `<head>` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <head> ... @@ -70,6 +72,8 @@ Loading JS from the `<head>` isn't the best approach for the following reasons: Place the script (`<script>...</script>`) inside the closing `</body>` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <body> ... @@ -91,6 +95,8 @@ Place the script (`<script>...</script>`) with a script `src` path inside the c In `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```html <body> ... @@ -138,6 +144,8 @@ For more information, see <xref:blazor/components/class-libraries>. Load JS from an injected script in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server) when the app is initialized: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + * Add `autostart="false"` to the `<script>` tag that loads the Blazor script. * Inject a script into the `<head>` element markup that references a custom JS file after starting Blazor by calling `Blazor.start().then(...)`. Place the script (`<script>...</script>`) inside the closing `</body>` tag after the Blazor script is loaded. diff --git a/aspnetcore/6.0/blazor/project-structure.md b/aspnetcore/6.0/blazor/project-structure.md index ed242290c66d..999b27e4984c 100644 --- a/aspnetcore/6.0/blazor/project-structure.md +++ b/aspnetcore/6.0/blazor/project-structure.md @@ -67,6 +67,8 @@ The Blazor Server template creates the initial files and directory structure for * `FetchData` component (`FetchData.razor`): Implements the Fetch data page. * `Index` component (`Index.razor`): Implements the Home page. +[!INCLUDE[](includes/layout-page-preview-7.md)] + > [!NOTE] > JavaScript (JS) files added to the `Pages/_Layout.cshtml` file should appear before the closing `</body>` tag. The order that custom JS code is loaded from JS files is important in some scenarios. For example, ensure that JS files with interop methods are included before Blazor framework JS files. diff --git a/aspnetcore/6.0/blazor/security/content-security-policy.md b/aspnetcore/6.0/blazor/security/content-security-policy.md index ae4250ec7c8d..0e0b563e209a 100644 --- a/aspnetcore/6.0/blazor/security/content-security-policy.md +++ b/aspnetcore/6.0/blazor/security/content-security-policy.md @@ -98,6 +98,8 @@ The particular script associated with the error is displayed in the console next In the `<head>` content of the `Pages/_Layout.cshtml` host page, apply the directives described in the [Policy directives](#policy-directives) section: +[!INCLUDE[](../includes/layout-page-preview-7.md)] + ```cshtml <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; diff --git a/aspnetcore/6.0/blazor/state-management.md b/aspnetcore/6.0/blazor/state-management.md index 6f044b1f3dfc..3000520f87ef 100644 --- a/aspnetcore/6.0/blazor/state-management.md +++ b/aspnetcore/6.0/blazor/state-management.md @@ -309,6 +309,8 @@ To disable prerendering, open the `Pages/_Host.cshtml` file and change the `rend [Prerendering of `<head>` content](xref:blazor/components/control-head-content) is disabled in `Pages/_Layout.cshtml`: +[!INCLUDE[](includes/layout-page-preview-7.md)] + ```cshtml <component type="typeof(HeadOutlet)" render-mode="Server" /> ``` From 67fd2fe902aadb7df9e3df9c7e4addeddbe2eb38 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 3 Aug 2021 11:39:18 -0500 Subject: [PATCH 3/5] Update aspnetcore/6.0/blazor/components/control-head-content.md Co-authored-by: Mackinnon Buck <mackinnon.buck@gmail.com> --- aspnetcore/6.0/blazor/components/control-head-content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/6.0/blazor/components/control-head-content.md b/aspnetcore/6.0/blazor/components/control-head-content.md index a1790ebe9ade..a340dead1fc8 100644 --- a/aspnetcore/6.0/blazor/components/control-head-content.md +++ b/aspnetcore/6.0/blazor/components/control-head-content.md @@ -37,7 +37,7 @@ Specify the page's title with the `PageTitle` component. Specify `<head>` elemen <PageTitle>@title</PageTitle> <HeadContent> - <meta id="meta-description" name="description" content="@description"> + <meta name="description" content="@description"> </HeadContent> @code { From 2feb5e194672bad09d581c03a0fe60e0f845aa78 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 3 Aug 2021 11:48:23 -0500 Subject: [PATCH 4/5] Updates --- .../blazor/components/control-head-content.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/aspnetcore/6.0/blazor/components/control-head-content.md b/aspnetcore/6.0/blazor/components/control-head-content.md index a340dead1fc8..ef59d4ed0dca 100644 --- a/aspnetcore/6.0/blazor/components/control-head-content.md +++ b/aspnetcore/6.0/blazor/components/control-head-content.md @@ -9,22 +9,22 @@ ms.date: 08/03/2021 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/components/control-head-content --- -# Control \<head> content in ASP.NET Core Blazor apps +# Control `<head>` content in ASP.NET Core Blazor apps *This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August, 2021. ASP.NET Core 6.0 is scheduled for release later this year.* -Razor components can modify the HTML \<head> element content of a page, including setting the page's title (`<title>` element) and modifying metadata (`<meta>` elements). +Razor components can modify the HTML `<head>` element content of a page, including setting the page's title (`<title>` element) and modifying metadata (`<meta>` elements). -## Control \<head> content in a Razor component +## Control `<head>` content in a Razor component -Specify the page's title with the `PageTitle` component. Specify `<head>` element content with the `HeadContent` component. The following example, sets the page's title and description using Razor. +Specify the page's title with the `PageTitle` component. Specify `<head>` element content with the `HeadContent` component. The following example sets the page's title and description using Razor. -`Pages/SetTitleAndDescription.razor`: +`Pages/ControlHeadContent.razor`: ```razor -@page "/set-title-and-description" +@page "/control-head-content" -<h1>Set title & description</h1> +<h1>Control <head> content</h1> <p> Title: @title @@ -56,9 +56,9 @@ In an app created from the Blazor WebAssembly project template, the `HeadOutlet` builder.RootComponents.Add<HeadOutlet>("head::after"); ``` -When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/::after) is specified, the contents of the root component are appended to the existing head contents instead of replacing them. This allows the app to retain static head content in `wwwroot/index.html` without having to repeat it in the app's Razor components. +When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/::after) is specified, the contents of the root component are appended to the existing head contents instead of replacing the content. This allows the app to retain static head content in `wwwroot/index.html` without having to repeat the content in the app's Razor components. -In Blazor Server apps created from the Blazor Server project template, a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) renders \<head> content for the `HeadOutlet` component in `Pages/_Layout.cshtml`: +In Blazor Server apps created from the Blazor Server project template, a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) renders `<head>` content for the `HeadOutlet` component in `Pages/_Layout.cshtml`: ```cshtml <head> From 758dd0fba6873dfae889c2d2dec965a2a181f6a7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 3 Aug 2021 11:53:30 -0500 Subject: [PATCH 5/5] Updates --- aspnetcore/6.0/blazor/toc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/6.0/blazor/toc.yml b/aspnetcore/6.0/blazor/toc.yml index 9de47e66b301..840c82b07e75 100644 --- a/aspnetcore/6.0/blazor/toc.yml +++ b/aspnetcore/6.0/blazor/toc.yml @@ -37,7 +37,7 @@ items: href: components/index.md - name: Layouts href: components/layouts.md - - name: Control head content + - name: Control <head> content href: components/control-head-content.md - name: Cascading values and parameters href: components/cascading-values-and-parameters.md