From 31a78bb613d5eb169e019a60fc4884682b69ee00 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 8 Jul 2024 13:45:06 -0400 Subject: [PATCH 01/13] Blazor static asset delivery and fingerprinting --- .../blazor/fundamentals/static-files.md | 174 +++++++++++++++++- 1 file changed, 168 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index c7642abe017f..26750c0e33bc 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -5,7 +5,7 @@ description: Learn how to configure and manage static files for Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 06/11/2024 +ms.date: 07/08/2024 uid: blazor/fundamentals/static-files --- # ASP.NET Core Blazor static files @@ -35,27 +35,189 @@ Configure Map Static Assets Middleware by calling `MapStaticAssets` in the app's * When possible, serves [compressed](xref:performance/response-compression) static assets. * Works with a [Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN) (for example, [Azure CDN](https://azure.microsoft.com/services/cdn/)) to serve the app's static assets closer to the user. * [Minifies](https://developer.mozilla.org/docs/Glossary/Minification) the app's static assets. +* [Fingerprinting assets](https://developer.mozilla.org/docs/Glossary/Fingerprinting) to prevent reusing old versions of files. `MapStaticAssets` operates by combining build and publish processes to collect information about the static assets in the app. This information is utilized by the runtime library to efficiently serve the static assets to browsers. `MapStaticAssets` can replace in most situations. However, `MapStaticAssets` is optimized for serving the assets from known locations in the app at build and publish time. If the app serves assets from other locations, such as disk or embedded resources, should be used. -`MapStaticAssets` provides the following benefits not found with : +`MapStaticAssets` provides the following benefits that aren't available when calling : -* Build-time compression for all the assets in the app: [Gzip](https://tools.ietf.org/html/rfc1952) (`Content-Encoding: gz`) during development and Gzip with [Brotli](https://tools.ietf.org/html/rfc7932) (`Content-Encoding: br`) during publish. -* Content based `ETags` are generated for each static asset, which are [Base64](https://developer.mozilla.org/docs/Glossary/Base64)-encoded strings of the [SHA-256](xref:System.Security.Cryptography.SHA256) hashes of the static assets. This ensures that the browser only redownloads a file if its contents have changed. +* Build-time compression for all the assets in the app, including JavaScript (JS) and stylesheets but excluding image and font assets that are already compressed. [Gzip](https://tools.ietf.org/html/rfc1952) (`Content-Encoding: gz`) compression is used during development. Gzip with [Brotli](https://tools.ietf.org/html/rfc7932) (`Content-Encoding: br`) compression is used during publish. +* [Fingerprinting](https://developer.mozilla.org/docs/Glossary/Fingerprinting) for all assets at build time with a [Base64](https://developer.mozilla.org/docs/Glossary/Base64)-encoded string of the [SHA-256](xref:System.Security.Cryptography.SHA256) hash of each file's content. This prevents reusing an old version of a file, even if the old file is cached. Fingerprinted assets are cached using the [`immutable` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives), which results in the browser never requesting the asset again until it changes. For browsers that don't support the `immutable` directive, a [`max-age` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives) is added. + * Even if an asset isn't fingerprinted, content based `ETags` are generated for each static asset using the fingerprint hash of the file as the `ETag` value. This ensures that the browser only downloads a file if its content changes (or the file is being downloaded for the first time). + * Internally, Blazor maps physical assets to their fingerprints, which allows the app to: + * Find automatically-generated Blazor assets, such as Razor component scoped CSS for Blazor's [CSS isolation feature](xref:blazor/components/css-isolation), and JS assets described by [JS import maps](https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap). + * Generate link tags in the `` content of the page to preload assets. +* During [Visual Studio Hot Reload](/visualstudio/debugger/hot-reload) development testing: + * Integrity information is removed from the assets to avoid issues when a file is changed while the app is running. + * Static assets aren't cached to ensure that the browser always retrieves current content. + +When [Interactive WebAssembly or Interactive Auto render modes](xref:blazor/fundamentals/index#render-modes) are enabled: + +* Blazor creates an endpoint to expose the resource collection as a JS module. +* The URL is emitted to the body of the request as persisted component state when a WebAssembly component is rendered into the page. +* During WebAssembly boot, Blazor retrieves the URL, imports the module, and calls a function to retrieve the asset collection and reconstruct it in memory. The URL is specific to the content and cached forever, so this overhead cost is only paid once per user until the app is updated. +* The resource collection is also exposed at a human-readable URL (`_framework/resource-collection.js`), so JS has access to the resource collection for [enhanced navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) or to implement features of other frameworks and third-party components. + +Map Static Assets Middleware doesn't provide features for minification or other file transformations. Minification is usually handled by custom code or [third-party tooling](xref:blazor/fundamentals/index#community-links-to-blazor-resources). Static File Middleware () is useful in the following situations that `MapStaticAssets` can't handle: * Applying a path prefix to Blazor WebAssembly static asset files, which is covered in the [Prefix for Blazor WebAssembly assets](#prefix-for-blazor-webassembly-assets) section. * Configuring file mappings of extensions to specific content types and setting static file options, which is covered in the [File mappings and static file options](#file-mappings-and-static-file-options) section. - +## Consume assets with Map Static File Middleware + +*This section applies to server-side Blazor apps.* + + + +Assets are consumed via the `Assets` property in , which resolves the fingerprinted URL for a given asset. In the following example, the Blazor project template app styles (`app.css`) and [CSS isolation stylesheet](xref:blazor/components/css-isolation) are consumed in a root component, typically the `App` component (`Components/App.razor`): + +```razor + + + +``` + +> [!NOTE] +> In a future release, a compiler feature will automatically transform tilde-prefixed links into the correct fingerprinted URLs. Examples are demonstrated in the following table. +> +> Current .NET 9 preview release | Future .NET 9 preview release +> --- | --- +> `href="@Assets["bootstrap/bootstrap.min.css"]"` | `href="~/bootstrap/bootstrap.min.css"` +> `href="@Assets["app.css"]"` | `href="~/app.css"` +> `href="@Assets["BlazorWeb-CSharp.styles.css"]"` | `href="~/BlazorWeb-CSharp.styles.css"` + +## Import maps + +*This section applies to server-side Blazor apps.* + +The `ImportMap` component represents an import map element (``) that defines the import map for module scripts. The `ImportMap` component is placed in `` content of the root component, typically the `App` component (`Components/App.razor`). + +```razor + +``` + +If a custom `ImportMapDefinition` isn't assigned to an `ImportMap` component, the import map is generated based on the app's assets. + +The following examples demonstrate custom import map definitions and the import maps that they create. + +Basic import map: + +```csharp +new ImportMapDefinition( + new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + }, + null, + null); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "jquery": "https://cdn.example.com/jquery.js" + } +} +``` + +Scoped import map: + +```csharp +new ImportMapDefinition( + null, + new Dictionary> + { + ["/scoped/"] = new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + } + }, + null); +``` + +The preceding code results in the following import map: + +```json +{ + "scopes": { + "/scoped/": { + "jquery": "https://cdn.example.com/jquery.js" + } + } +} +``` + +Import map with integrity: + +```csharp +new ImportMapDefinition( + new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + }, + null, + new Dictionary + { + { "https://cdn.example.com/jquery.js", "sha384-abc123" }, + }); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "jquery": "https://cdn.example.com/jquery.js" + }, + "integrity": { + "https://cdn.example.com/jquery.js": "sha384-abc123" + } +} +``` + +Combine import map definitions (`ImportMapDefinition`) with `ImportMapDefinition.Combine`. + +Import map created from a `ResourceAssetCollection` that maps static assets to their corresponding unique URLs: + +```csharp +ImportMapDefinition.FromResourceCollection( + new ResourceAssetCollection( + [ + new ResourceAsset( + "jquery.fingerprint.js", + [ + new ResourceAssetProperty("integrity", "sha384-abc123"), + new ResourceAssetProperty("label", "jquery.js"), + ]) + ])); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "./jquery.js": "./jquery.fingerprint.js" + }, + "integrity": { + "jquery.fingerprint.js": "sha384-abc123" + } +} +``` + :::moniker-end :::moniker range="< aspnetcore-9.0" From 9198c56c4fa8af4e718a9fed15768cd86c1097df Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 8 Jul 2024 19:01:20 -0400 Subject: [PATCH 02/13] Updates --- aspnetcore/blazor/fundamentals/static-files.md | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 26750c0e33bc..1ddda54aad13 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -78,9 +78,9 @@ For more information, see . *This section applies to server-side Blazor apps.* - + -Assets are consumed via the `Assets` property in , which resolves the fingerprinted URL for a given asset. In the following example, the Blazor project template app styles (`app.css`) and [CSS isolation stylesheet](xref:blazor/components/css-isolation) are consumed in a root component, typically the `App` component (`Components/App.razor`): +Assets are consumed via the `ComponentBase.Assets` property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) are linked in a root component, typically the `App` component (`Components/App.razor`): ```razor @@ -88,15 +88,6 @@ Assets are consumed via the `Assets` property in ``` -> [!NOTE] -> In a future release, a compiler feature will automatically transform tilde-prefixed links into the correct fingerprinted URLs. Examples are demonstrated in the following table. -> -> Current .NET 9 preview release | Future .NET 9 preview release -> --- | --- -> `href="@Assets["bootstrap/bootstrap.min.css"]"` | `href="~/bootstrap/bootstrap.min.css"` -> `href="@Assets["app.css"]"` | `href="~/app.css"` -> `href="@Assets["BlazorWeb-CSharp.styles.css"]"` | `href="~/BlazorWeb-CSharp.styles.css"` - ## Import maps *This section applies to server-side Blazor apps.* From 3d75ad06eb00338d58a5a54f77f5f9ef88d91852 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 09:58:47 -0400 Subject: [PATCH 03/13] Updates --- .../blazor/components/class-libraries.md | 6 ++- .../blazor/fundamentals/static-files.md | 43 +++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 9e975a3e1515..527ca1dfa3fc 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -173,12 +173,14 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL. ``` -Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). +Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): ```html - + ``` +The static asset location is `_content/ComponentLibrary/additionalStyles.css` and its placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . + :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 1ddda54aad13..5de1576a893e 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -219,6 +219,49 @@ Configure Static File Middleware to serve static assets to clients by calling ` `href` formats + +*This section applies to all versions and Blazor apps.* + +The following tables summarize static file `` `href` formats by release version. + +:::moniker range=">= aspnetcore-6.0" + +For the location of `` content where static file ``s are placed, see . In .NET 6 or later, static asset links can also be supplied using [`` components]() in individual Razor components. + +:::moniker-end + +:::moniker range="< aspnetcore-6.0" + +For the location of `` content where static file ``s are placed, see . + +:::moniker-end + +.NET 9 or later + +App type | `href` format | Example +----------------------------- | ------------------- | --- +Blazor Web App | `@Assets["{LINK}"]` | `` +Standalone Blazor WebAssembly | `{LINK}` | `` + +.NET 8.x + +App type | `href` format | Example +----------------------------- | ------------- | --- +Blazor Web App | `{LINK}` | `` +Standalone Blazor WebAssembly | `{LINK}` | `` + +.NET 7.x or earlier + +App type | `href` format | Example +--------------------------------- | ------------- | --- +Blazor Server† | `{LINK}` | `` +Hosted Blazor WebAssembly‡ | `{LINK}` | `` +Blazor WebAssembly | `{LINK}` | `` + +†Blazor Server is supported in .NET 8 or later but is no longer a project template after .NET 7. +‡We recommend updating Hosted Blazor WebAssembly apps to Blazor Web Apps when adopting .NET 8 or later. + :::moniker range=">= aspnetcore-8.0" ## Static Web Asset Project Mode From a6ff538bb44f509a43985d5713dc0748675c64b2 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:04:34 -0400 Subject: [PATCH 04/13] Updates --- aspnetcore/blazor/components/class-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 527ca1dfa3fc..2689ca4f9b07 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -179,7 +179,7 @@ Link to the library's stylesheet in the app's `` markup ([location of ` ``` -The static asset location is `_content/ComponentLibrary/additionalStyles.css` and its placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . +The static asset location is `_content/ComponentLibrary/additionalStyles.css` and its placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . :::moniker-end From f4f44a0376559fef4a1353c8795aad32f088aa0e Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:06:53 -0400 Subject: [PATCH 05/13] Updates --- aspnetcore/blazor/components/class-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 2689ca4f9b07..7fde3d4faf94 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -179,7 +179,7 @@ Link to the library's stylesheet in the app's `` markup ([location of ` ``` -The static asset location is `_content/ComponentLibrary/additionalStyles.css` and its placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . +The static asset location is `_content/ComponentLibrary/additionalStyles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . :::moniker-end From de3d542af61cc3a6da6b7eabae0b421cdcfca195 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:12:15 -0400 Subject: [PATCH 06/13] Updates --- aspnetcore/blazor/fundamentals/static-files.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 5de1576a893e..4402d9eb03df 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -221,19 +221,19 @@ In releases prior to .NET 8, Blazor framework static files, such as the Blazor s ## Summary of static file `` `href` formats -*This section applies to all versions and Blazor apps.* +*This section applies to all .NET releases and Blazor apps.* -The following tables summarize static file `` `href` formats by release version. +The following tables summarize static file `` `href` formats by .NET release. :::moniker range=">= aspnetcore-6.0" -For the location of `` content where static file ``s are placed, see . In .NET 6 or later, static asset links can also be supplied using [`` components]() in individual Razor components. +For the location of `` content where static file links are placed, see . Static asset links can also be supplied using [`` components](xref:blazor/components/control-head-content) in individual Razor components. :::moniker-end :::moniker range="< aspnetcore-6.0" -For the location of `` content where static file ``s are placed, see . +For the location of `` content where static file links are placed, see . :::moniker-end @@ -242,6 +242,7 @@ For the location of `` content where static file ``s are placed, see App type | `href` format | Example ----------------------------- | ------------------- | --- Blazor Web App | `@Assets["{LINK}"]` | `` +Blazor Server† | `@Assets["{LINK}"]` | `` Standalone Blazor WebAssembly | `{LINK}` | `` .NET 8.x @@ -249,6 +250,7 @@ Standalone Blazor WebAssembly | `{LINK}` | `` +Blazor Server† | `{LINK}` | `` Standalone Blazor WebAssembly | `{LINK}` | `` .NET 7.x or earlier From ced619c22d911e79dc85b0433cdf0bf4046166c4 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:33:08 -0400 Subject: [PATCH 07/13] Updates --- .../blazor/components/class-libraries.md | 4 +++- aspnetcore/blazor/components/css-isolation.md | 6 ++++-- aspnetcore/blazor/components/integration.md | 8 ++------ .../blazor/fundamentals/static-files.md | 20 +++++++++---------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 7fde3d4faf94..3786e3cb77f3 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -234,9 +234,11 @@ The following background image and stylesheet are used by the RCL's `Component1` To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): ```html - + ``` +The static asset location is `_content/ComponentLibrary/styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . + :::moniker-end ## Make routable components available from the RCL diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index 6577b2b1f32d..bb3b0bfc6df2 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -51,12 +51,14 @@ h1 { ## CSS isolation bundling -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 `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` 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: +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 `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added by default to an app created from the Blazor project templates: ```html - + ``` +The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . The placeholder `{ASSEMBLY NAME}` is the project's assembly name. + :::moniker range="< aspnetcore-8.0" The following example is from a hosted Blazor WebAssembly **:::no-loc text="Client":::** app. The app's assembly name is `BlazorSample.Client`, and the `` is added by the Blazor WebAssembly project template when the project is created with the Hosted option (`-ho|--hosted` option using the .NET CLI or **ASP.NET Core Hosted** checkbox using Visual Studio): diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index 91bec4f9fd17..f012cd6275ac 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -100,7 +100,7 @@ Add an `App` component to the app, which serves as the root component, which is - + @@ -112,11 +112,7 @@ Add an `App` component to the app, which serves as the root component, which is ``` -For the `` element in the preceding example, change `BlazorSample` in the stylesheet's file name to match the app's project name. For example, a project named `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name: - -```html - -``` +The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) of the `` element following the guidance in . 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. diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 4402d9eb03df..f2565a4c43a7 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -239,27 +239,27 @@ For the location of `` content where static file links are placed, see ` -Blazor Server† | `@Assets["{LINK}"]` | `` -Standalone Blazor WebAssembly | `{LINK}` | `` +Blazor Web App | `@Assets["{PATH}"]` | `` +Blazor Server† | `@Assets["{PATH}"]` | `` +Standalone Blazor WebAssembly | `{PATH}` | `` .NET 8.x App type | `href` format | Example ----------------------------- | ------------- | --- -Blazor Web App | `{LINK}` | `` -Blazor Server† | `{LINK}` | `` -Standalone Blazor WebAssembly | `{LINK}` | `` +Blazor Web App | `{PATH}` | `` +Blazor Server† | `{PATH}` | `` +Standalone Blazor WebAssembly | `{PATH}` | `` .NET 7.x or earlier App type | `href` format | Example --------------------------------- | ------------- | --- -Blazor Server† | `{LINK}` | `` -Hosted Blazor WebAssembly‡ | `{LINK}` | `` -Blazor WebAssembly | `{LINK}` | `` +Blazor Server† | `{PATH}` | `` +Hosted Blazor WebAssembly‡ | `{PATH}` | `` +Blazor WebAssembly | `{PATH}` | `` †Blazor Server is supported in .NET 8 or later but is no longer a project template after .NET 7. ‡We recommend updating Hosted Blazor WebAssembly apps to Blazor Web Apps when adopting .NET 8 or later. From 615fd1f80f44428029f182e1fde7ccf14bba547b Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:33:41 -0400 Subject: [PATCH 08/13] Updates --- .../blazor/fundamentals/static-files.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index f2565a4c43a7..7658f6e03222 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -247,19 +247,19 @@ Standalone Blazor WebAssembly | `{PATH}` | `` -Blazor Server† | `{PATH}` | `` -Standalone Blazor WebAssembly | `{PATH}` | `` +App type | `href` value | Example +----------------------------- | ------------ | --- +Blazor Web App | `{PATH}` | `` +Blazor Server† | `{PATH}` | `` +Standalone Blazor WebAssembly | `{PATH}` | `` .NET 7.x or earlier -App type | `href` format | Example ---------------------------------- | ------------- | --- -Blazor Server† | `{PATH}` | `` -Hosted Blazor WebAssembly‡ | `{PATH}` | `` -Blazor WebAssembly | `{PATH}` | `` +App type | `href` value | Example +--------------------------------- | ------------ | --- +Blazor Server† | `{PATH}` | `` +Hosted Blazor WebAssembly‡ | `{PATH}` | `` +Blazor WebAssembly | `{PATH}` | `` †Blazor Server is supported in .NET 8 or later but is no longer a project template after .NET 7. ‡We recommend updating Hosted Blazor WebAssembly apps to Blazor Web Apps when adopting .NET 8 or later. From b945731e39ee9a6ef324a21181a6a9c1a4da7c46 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:55:17 -0400 Subject: [PATCH 09/13] Updates --- .../blazor/components/class-libraries.md | 8 ++--- aspnetcore/blazor/components/css-isolation.md | 4 +-- aspnetcore/blazor/components/integration.md | 28 +++++++-------- .../hybrid/tutorials/maui-blazor-web-app.md | 34 +++++++++++++------ 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 3786e3cb77f3..84c41186d561 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -176,10 +176,10 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL. Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): ```html - + ``` -The static asset location is `_content/ComponentLibrary/additionalStyles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . +The static asset location is `_content/ComponentLibrary/additionalStyles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . :::moniker-end @@ -234,10 +234,10 @@ The following background image and stylesheet are used by the RCL's `Component1` To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): ```html - + ``` -The static asset location is `_content/ComponentLibrary/styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . +The static asset location is `_content/ComponentLibrary/styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . :::moniker-end diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index bb3b0bfc6df2..a059ec648c5f 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -54,10 +54,10 @@ 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 `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added by default to an app created from the Blazor project templates: ```html - + ``` -The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) following the guidance in . The placeholder `{ASSEMBLY NAME}` is the project's assembly name. +The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . The placeholder `{ASSEMBLY NAME}` is the project's assembly name. :::moniker range="< aspnetcore-8.0" diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index f012cd6275ac..9ec7a2530631 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -100,7 +100,7 @@ Add an `App` component to the app, which serves as the root component, which is - + @@ -112,7 +112,7 @@ Add an `App` component to the app, which serves as the root component, which is ``` -The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF VALUE}` placeholder) of the `` element following the guidance in . 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. +The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) of the `` element following the guidance in . 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. @@ -742,9 +742,9 @@ Add an `App` component to the `Components` folder with the following content. {APP TITLE} - - - + + + @@ -757,19 +757,19 @@ Add an `App` component to the `Components` folder with the following content. ``` -In the preceding code update the app title and stylesheet file name: +The `{APP TITLE}` placeholder in the `` element is the app's title. For example: -* For the `{APP TITLE}` placeholder in the `<title>` element, set the app's title. For example: +```html +<title>Blazor Sample +``` - ```html - Blazor Sample - ``` +The static asset locations are: -* For the `{APP NAMESPACE}` placeholder in the stylesheet `` element, set the app's namespace. For example: +* `{HREF PATH 1}`: `lib/bootstrap/dist/css/bootstrap.min.css` +* `{HREF PATH 2}`: `css/site.css` +* `{HREF PATH 3}`: `{APP NAMESPACE}.styles.css` (The `{APP NAMESPACE}` placeholder is the app's namespace.) - ```html - - ``` +The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . Where services are registered, add services for Razor components and services to support rendering Interactive Server components. diff --git a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md index 4b09a44e3fc2..79e6857f155a 100644 --- a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md +++ b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md @@ -123,20 +123,27 @@ Also in the `MainPage.xaml` file, update the -- +- +- ``` -Replace the preceding lines with the following markup. In the following example, the RCL's static asset path is `_content/MauiBlazorWeb.Shared/`: +Replace the preceding lines with the following markup: ```razor - - + + ``` +The RCL's static asset path is `_content/MauiBlazorWeb.Shared/`. The full static asset locations are: + +* `{HREF PATH 1}`: `_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css` +* `{HREF PATH 2}`: `_content/MauiBlazorWeb.Shared/css/app.css` + +The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . + In the Blazor Web App, open the `_Imports.razor` file and add the following two `@using` statements for the RCL. In the following example, the RCL's namespace is `MauiBlazorWeb.Shared`: ```razor @@ -144,19 +151,26 @@ In the Blazor Web App, open the `_Imports.razor` file and add the following two @using MauiBlazorWeb.Shared.Components ``` -In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet: +In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet `` for `app.css`: ```diff -- +- ``` Replace the preceding line with the RCL's static asset stylesheet references. In the following example, the RCL's static asset path is `_content/MauiBlazorWeb.Shared/`: ``` - - + + ``` +The RCL's static asset path is `_content/MauiBlazorWeb.Shared/`. The full static asset locations are: + +* `{HREF PATH 1}`: `_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css` +* `{HREF PATH 2}`: `_content/MauiBlazorWeb.Shared/css/app.css` + +The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . + In the Blazor Web App project, delete the following folder and files: * `Components/Layout` folder From 9f92162ee1a14ee67b11eb7ceb401f189ffda56d Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:02:35 -0400 Subject: [PATCH 10/13] Updates --- .../blazor/fundamentals/static-files.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 7658f6e03222..7e01d2730d7c 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -239,27 +239,27 @@ For the location of `` content where static file links are placed, see ` -Blazor Server† | `@Assets["{PATH}"]` | `` -Standalone Blazor WebAssembly | `{PATH}` | `` +App type | `href` value | Examples +--- | --- | --- +Blazor Web App | `@Assets["{PATH}"]` | ``
`` +Blazor Server† | `@Assets["{PATH}"]` | ``
`` +Standalone Blazor WebAssembly | `{PATH}` | ``
`` .NET 8.x -App type | `href` value | Example ------------------------------ | ------------ | --- -Blazor Web App | `{PATH}` | `` -Blazor Server† | `{PATH}` | `` -Standalone Blazor WebAssembly | `{PATH}` | `` +App type | `href` value | Examples +--- | --- | --- +Blazor Web App | `{PATH}` | ``
`` +Blazor Server† | `{PATH}` | ``
`` +Standalone Blazor WebAssembly | `{PATH}` | ``
`` .NET 7.x or earlier -App type | `href` value | Example ---------------------------------- | ------------ | --- -Blazor Server† | `{PATH}` | `` -Hosted Blazor WebAssembly‡ | `{PATH}` | `` -Blazor WebAssembly | `{PATH}` | `` +App type | `href` value | Examples +--- | --- | --- +Blazor Server† | `{PATH}` | ``
`` +Hosted Blazor WebAssembly‡ | `{PATH}` | ``
`` +Blazor WebAssembly | `{PATH}` | ``
`` †Blazor Server is supported in .NET 8 or later but is no longer a project template after .NET 7. ‡We recommend updating Hosted Blazor WebAssembly apps to Blazor Web Apps when adopting .NET 8 or later. From a4c13e3c75c88c536a712299d545ff383de83209 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:43:23 -0400 Subject: [PATCH 11/13] Updates --- aspnetcore/blazor/components/css-isolation.md | 24 +++++- aspnetcore/blazor/components/integration.md | 78 ++++++++++++++++--- .../hybrid/tutorials/maui-blazor-web-app.md | 63 ++++++++++----- 3 files changed, 133 insertions(+), 32 deletions(-) diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index a059ec648c5f..68c151ccf0ff 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -53,11 +53,31 @@ 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 `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added by default to an app created from the Blazor project templates: +:::moniker range=">= aspnetcore-9.0" + +Blazor Web Apps: + +```html + +``` + +Standalone Blazor WebAssembly apps: + +```html + +``` + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + ```html - + ``` -The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . The placeholder `{ASSEMBLY NAME}` is the project's assembly name. +:::moniker-end + +The placeholder `{ASSEMBLY NAME}` is the project's assembly name. :::moniker range="< aspnetcore-8.0" diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index 9ec7a2530631..0b240f653cee 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -92,6 +92,8 @@ Add an `App` component to the app, which serves as the root component, which is `Components/App.razor`: +:::moniker range=">= aspnetcore-9.0" + ```razor @@ -100,7 +102,7 @@ Add an `App` component to the app, which serves as the root component, which is - + @@ -112,7 +114,33 @@ Add an `App` component to the app, which serves as the root component, which is ``` -The static asset location is `{ASSEMBLY NAME}.styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) of the `` element following the guidance in . 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. +:::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. @@ -735,6 +763,34 @@ Add an `App` component to the `Components` folder with the following content. `Components/App.razor`: +:::moniker range=">= aspnetcore-9.0" + +```razor + + + + + + {APP TITLE} + + + + + + + + + + + + + +``` + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + ```razor @@ -742,9 +798,9 @@ Add an `App` component to the `Components` folder with the following content. {APP TITLE} - - - + + + @@ -757,19 +813,17 @@ Add an `App` component to the `Components` folder with the following content. ``` +:::moniker-end + + + The `{APP TITLE}` placeholder in the `` element is the app's title. For example: ```html <title>Blazor Sample ``` -The static asset locations are: - -* `{HREF PATH 1}`: `lib/bootstrap/dist/css/bootstrap.min.css` -* `{HREF PATH 2}`: `css/site.css` -* `{HREF PATH 3}`: `{APP NAMESPACE}.styles.css` (The `{APP NAMESPACE}` placeholder is the app's namespace.) - -The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . +The `{APP NAMESPACE}` placeholder is the app's namespace. Where services are registered, add services for Razor components and services to support rendering Interactive Server components. diff --git a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md index 79e6857f155a..0d349621408f 100644 --- a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md +++ b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md @@ -123,26 +123,41 @@ Also in the `MainPage.xaml` file, update the -- +- +- ``` Replace the preceding lines with the following markup: ```razor - - + + ``` -The RCL's static asset path is `_content/MauiBlazorWeb.Shared/`. The full static asset locations are: +:::moniker-end -* `{HREF PATH 1}`: `_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css` -* `{HREF PATH 2}`: `_content/MauiBlazorWeb.Shared/css/app.css` +:::moniker range="< aspnetcore-9.0" -The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . +Remove the following stylesheet lines: + +```diff +- +- +``` + +Replace the preceding lines with the following markup: + +```razor + + +``` + +:::moniker-end In the Blazor Web App, open the `_Imports.razor` file and add the following two `@using` statements for the RCL. In the following example, the RCL's namespace is `MauiBlazorWeb.Shared`: @@ -151,25 +166,37 @@ In the Blazor Web App, open the `_Imports.razor` file and add the following two @using MauiBlazorWeb.Shared.Components ``` -In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet `` for `app.css`: +:::moniker range=">= aspnetcore-9.0" + +In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet ``: ```diff -- +- ``` -Replace the preceding line with the RCL's static asset stylesheet references. In the following example, the RCL's static asset path is `_content/MauiBlazorWeb.Shared/`: +Replace the removed line with the following stylesheet link using the RCL's static asset path of `_content/MauiBlazorWeb.Shared/`: +```html + ``` - - + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + +In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet ``: + +```diff +- ``` -The RCL's static asset path is `_content/MauiBlazorWeb.Shared/`. The full static asset locations are: +Replace the removed line with the following stylesheet link using the RCL's static asset path of `_content/MauiBlazorWeb.Shared/`: -* `{HREF PATH 1}`: `_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css` -* `{HREF PATH 2}`: `_content/MauiBlazorWeb.Shared/css/app.css` +```html + +``` -The static asset locations are placed in the `href` values (`{HREF PATH ...}` placeholders) following the guidance in . +:::moniker-end In the Blazor Web App project, delete the following folder and files: From 215d7d12674b75f8d4e41e47fc60eb516ce517e7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:56:00 -0400 Subject: [PATCH 12/13] Updates --- .../blazor/components/class-libraries.md | 26 +++++++-- .../hybrid/tutorials/maui-blazor-web-app.md | 55 +++---------------- 2 files changed, 28 insertions(+), 53 deletions(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 84c41186d561..59d47d7cacaa 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -175,11 +175,29 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL. Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): +:::moniker-end + +:::moniker range=">= aspnetcore-9.0" + +Blazor Web Apps: + +```html + +``` + +Standalone Blazor WebAssembly apps: + ```html - + ``` -The static asset location is `_content/ComponentLibrary/additionalStyles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . +:::moniker-end + +:::moniker range=">= aspnetcore-6.0 < aspnetcore-9.0" + +```html + +``` :::moniker-end @@ -234,11 +252,9 @@ The following background image and stylesheet are used by the RCL's `Component1` To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): ```html - + ``` -The static asset location is `_content/ComponentLibrary/styles.css`, which is placed in the `href` value (`{HREF PATH}` placeholder) following the guidance in . - :::moniker-end ## Make routable components available from the RCL diff --git a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md index 0d349621408f..4b09a44e3fc2 100644 --- a/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md +++ b/aspnetcore/blazor/hybrid/tutorials/maui-blazor-web-app.md @@ -123,42 +123,20 @@ Also in the `MainPage.xaml` file, update the -- -``` - -Replace the preceding lines with the following markup: - -```razor - - -``` - -:::moniker-end - -:::moniker range="< aspnetcore-9.0" - -Remove the following stylesheet lines: +Remove the following lines: ```diff - - ``` -Replace the preceding lines with the following markup: +Replace the preceding lines with the following markup. In the following example, the RCL's static asset path is `_content/MauiBlazorWeb.Shared/`: ```razor ``` -:::moniker-end - In the Blazor Web App, open the `_Imports.razor` file and add the following two `@using` statements for the RCL. In the following example, the RCL's namespace is `MauiBlazorWeb.Shared`: ```razor @@ -166,37 +144,18 @@ In the Blazor Web App, open the `_Imports.razor` file and add the following two @using MauiBlazorWeb.Shared.Components ``` -:::moniker range=">= aspnetcore-9.0" - -In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet ``: - -```diff -- -``` - -Replace the removed line with the following stylesheet link using the RCL's static asset path of `_content/MauiBlazorWeb.Shared/`: - -```html - -``` - -:::moniker-end - -:::moniker range="< aspnetcore-9.0" - -In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet ``: +In the Blazor Web App project, open the `App` component (`Components/App.razor`). Remove the `app.css` stylesheet: ```diff - ``` -Replace the removed line with the following stylesheet link using the RCL's static asset path of `_content/MauiBlazorWeb.Shared/`: +Replace the preceding line with the RCL's static asset stylesheet references. In the following example, the RCL's static asset path is `_content/MauiBlazorWeb.Shared/`: -```html - ``` - -:::moniker-end + + +``` In the Blazor Web App project, delete the following folder and files: From 0ef32531574494afafd6022df8f489e8ce96cc7c Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 9 Jul 2024 12:26:50 -0400 Subject: [PATCH 13/13] Updates --- aspnetcore/blazor/components/css-isolation.md | 4 ++-- aspnetcore/blazor/components/integration.md | 4 +--- aspnetcore/blazor/fundamentals/environments.md | 2 +- .../blazor/host-and-deploy/webassembly-caching/index.md | 2 +- aspnetcore/blazor/host-and-deploy/webassembly.md | 2 +- aspnetcore/blazor/security/includes/troubleshoot-server.md | 4 ++-- aspnetcore/blazor/security/includes/troubleshoot-wasm.md | 4 ++-- aspnetcore/blazor/security/server/additional-scenarios.md | 4 ++-- .../blazor/security/webassembly/additional-scenarios.md | 4 ++-- .../webassembly/hosted-with-azure-active-directory-b2c.md | 2 +- .../security/webassembly/hosted-with-identity-server.md | 4 ++-- .../security/webassembly/hosted-with-microsoft-entra-id.md | 2 +- .../blazor/security/webassembly/standalone-with-identity.md | 4 ++-- 13 files changed, 20 insertions(+), 22 deletions(-) diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index 68c151ccf0ff..1a7f2cf45e32 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -77,7 +77,7 @@ Standalone Blazor WebAssembly apps: :::moniker-end -The placeholder `{ASSEMBLY NAME}` is the project's assembly name. +The `{ASSEMBLY NAME}` placeholder is the project's assembly name. :::moniker range="< aspnetcore-8.0" @@ -112,7 +112,7 @@ At build time, a project bundle is created with the convention `obj/{CONFIGURATI ## Child component support -By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the placeholder `{COMPONENT NAME}` is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. +By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. The following example shows a parent component called `Parent` with a child component called `Child`. diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index 0b240f653cee..adfebffb2ce2 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -815,7 +815,7 @@ Add an `App` component to the `Components` folder with the following content. :::moniker-end - +The `{APP NAMESPACE}` placeholder is the app's namespace. The `{APP TITLE}` placeholder in the `` element is the app's title. For example: @@ -823,8 +823,6 @@ The `{APP TITLE}` placeholder in the `<title>` element is the app's title. For e <title>Blazor Sample ``` -The `{APP NAMESPACE}` placeholder is the app's namespace. - 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: diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md index 245963313cdb..b9cd07814c95 100644 --- a/aspnetcore/blazor/fundamentals/environments.md +++ b/aspnetcore/blazor/fundamentals/environments.md @@ -128,7 +128,7 @@ For more information on Blazor startup, see . Blazor WebAssembly apps can set the environment with the `blazor-environment` header. -In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the placeholder `{TARGET FRAMEWORK}` is the target framework: +In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the `{TARGET FRAMEWORK}` placeholder is the target framework: ```xml diff --git a/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md b/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md index 4077efbdcc32..ba97dc8f540a 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md @@ -92,7 +92,7 @@ Placeholders: * `{PUBLISH OUTPUT FOLDER}`: The path to the app's `publish` folder or location where the app is published for deployment. > [!NOTE] -> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The placeholder `{USER}` is the user's path segment. +> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The `{USER}` placeholder is the user's path segment. > > ``` > C:\Users\{USER}\Documents\GitHub\AspNetCore.Docs\aspnetcore\blazor\host-and-deploy\webassembly\_samples\integrity.ps1 diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 2447c1b04e71..e49f096f05d0 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -1148,7 +1148,7 @@ Placeholders: * `{PUBLISH OUTPUT FOLDER}`: The path to the app's `publish` folder or location where the app is published for deployment. > [!NOTE] -> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The placeholder `{USER}` is the user's path segment. +> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The `{USER}` placeholder is the user's path segment. > > ``` > C:\Users\{USER}\Documents\GitHub\AspNetCore.Docs\aspnetcore\blazor\host-and-deploy\webassembly\_samples\integrity.ps1 diff --git a/aspnetcore/blazor/security/includes/troubleshoot-server.md b/aspnetcore/blazor/security/includes/troubleshoot-server.md index 0ec5c40d2a9a..fdb2019bf716 100644 --- a/aspnetcore/blazor/security/includes/troubleshoot-server.md +++ b/aspnetcore/blazor/security/includes/troubleshoot-server.md @@ -74,8 +74,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button. diff --git a/aspnetcore/blazor/security/includes/troubleshoot-wasm.md b/aspnetcore/blazor/security/includes/troubleshoot-wasm.md index 84e31fdcfc00..c8096498314c 100644 --- a/aspnetcore/blazor/security/includes/troubleshoot-wasm.md +++ b/aspnetcore/blazor/security/includes/troubleshoot-wasm.md @@ -74,8 +74,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button. diff --git a/aspnetcore/blazor/security/server/additional-scenarios.md b/aspnetcore/blazor/security/server/additional-scenarios.md index defe3d07d94b..913155d0d654 100644 --- a/aspnetcore/blazor/security/server/additional-scenarios.md +++ b/aspnetcore/blazor/security/server/additional-scenarios.md @@ -58,7 +58,7 @@ builder.Services.Configure( [!INCLUDE[](~/includes/package-reference.md)] -Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the placeholder `{SCOPE}` is the additional scope to add. +Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the `{SCOPE}` placeholder is the additional scope to add. Define a token provider service that can be used within the Blazor app to resolve the tokens from [dependency injection (DI)](xref:blazor/fundamentals/dependency-injection). @@ -218,7 +218,7 @@ services.Configure(AzureADDefaults.OpenIdScheme, options = :::moniker range="< aspnetcore-8.0" -Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the placeholder `{SCOPE}` is the additional scope to add. +Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the `{SCOPE}` placeholder is the additional scope to add. Define a **scoped** token provider service that can be used within the Blazor app to resolve the tokens from [dependency injection (DI)](xref:blazor/fundamentals/dependency-injection). diff --git a/aspnetcore/blazor/security/webassembly/additional-scenarios.md b/aspnetcore/blazor/security/webassembly/additional-scenarios.md index 209d44ed9804..02261b56bea6 100644 --- a/aspnetcore/blazor/security/webassembly/additional-scenarios.md +++ b/aspnetcore/blazor/security/webassembly/additional-scenarios.md @@ -438,7 +438,7 @@ public class WeatherForecastClient :::moniker-end -In the preceding example, the `WeatherForecast` type is a static class that holds weather forecast data. The placeholder `{ASSEMBLY NAME}` is the app's assembly name (for example, `using static BlazorSample.Data;`). +In the preceding example, the `WeatherForecast` type is a static class that holds weather forecast data. The `{ASSEMBLY NAME}` placeholder is the app's assembly name (for example, `using static BlazorSample.Data;`). In the following example, is an extension in . Add the package to an app that doesn't already reference it. @@ -1370,7 +1370,7 @@ In the **:::no-loc text="Server":::** project's `Pages/_Host.cshtml` file, repla In the preceding example: -* The placeholder `{CLIENT APP ASSEMBLY NAME}` is the client app's assembly name (for example `BlazorSample.Client`). +* The `{CLIENT APP ASSEMBLY NAME}` placeholder is the client app's assembly name (for example `BlazorSample.Client`). * The conditional check for the `/authentication` path segment: * Avoids prerendering (`render-mode="WebAssembly"`) for authentication paths. * Prerenders (`render-mode="WebAssemblyPrerendered"`) for non-authentication paths. diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md b/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md index d56aab42522a..755e88966053 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md @@ -308,7 +308,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. Support for authenticating users is registered in the service container with the extension method provided by the [`Microsoft.Authentication.WebAssembly.Msal`](https://www.nuget.org/packages/Microsoft.Authentication.WebAssembly.Msal) package. This method sets up the services required for the app to interact with the Identity Provider (IP). diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md b/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md index e776bc5b65aa..de8f0d0c4497 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md @@ -240,7 +240,7 @@ In the app settings file (`appsettings.json`) at the project root, the `Identity } ``` -The placeholder `{ASSEMBLY NAME}` is the **:::no-loc text="Client":::** app's assembly name (for example, `BlazorSample.Client`). +The `{ASSEMBLY NAME}` placeholder is the **:::no-loc text="Client":::** app's assembly name (for example, `BlazorSample.Client`). ### Authentication package @@ -267,7 +267,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. > [!NOTE] > If you're configuring a Blazor WebAssembly app to use an existing Identity Server instance that isn't part of a hosted Blazor solution, change the base address registration from (`builder.HostEnvironment.BaseAddress`) to the server app's API authorization endpoint URL. diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md b/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md index a2adc3d19254..b3ab4174d131 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md @@ -322,7 +322,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. Support for authenticating users is registered in the service container with the extension method provided by the [`Microsoft.Authentication.WebAssembly.Msal`](https://www.nuget.org/packages/Microsoft.Authentication.WebAssembly.Msal) package. This method sets up the services required for the app to interact with the Identity Provider (IP). diff --git a/aspnetcore/blazor/security/webassembly/standalone-with-identity.md b/aspnetcore/blazor/security/webassembly/standalone-with-identity.md index 6f8bba72128a..1e1c761ab445 100644 --- a/aspnetcore/blazor/security/webassembly/standalone-with-identity.md +++ b/aspnetcore/blazor/security/webassembly/standalone-with-identity.md @@ -335,8 +335,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button.