diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md index b245867aaf61..f92cfd0c77b9 100644 --- a/aspnetcore/blazor/fundamentals/environments.md +++ b/aspnetcore/blazor/fundamentals/environments.md @@ -92,10 +92,14 @@ For general guidance on ASP.NET Core app configuration, see ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . :::moniker range="< aspnetcore-10.0" diff --git a/aspnetcore/blazor/fundamentals/logging.md b/aspnetcore/blazor/fundamentals/logging.md index 5fba6522a7d2..a338af21b088 100644 --- a/aspnetcore/blazor/fundamentals/logging.md +++ b/aspnetcore/blazor/fundamentals/logging.md @@ -670,10 +670,14 @@ For the `configureLogging` log level value, pass the argument as either the stri Example 1: Set the log level with a string value. -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Server: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . Example 2: Set the log level with an integer value. -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Server: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . > [!NOTE] diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index c587c34a3b12..e378d69faeeb 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -885,8 +885,16 @@ Configure the following values for the client: The following example for the `App.razor` file (Blazor Web App) shows the assignment of default values. +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script and the path to use, see . When creating a hub connection in a component, set the (default: 30 seconds) and (default: 15 seconds) on the . Set the (default: 15 seconds) on the built . The following example shows the assignment of default values: @@ -996,14 +1016,262 @@ For more information, see the *Global deployment and connection failures* sectio * * +## Modify the server-side reconnection handler + +The reconnection handler's circuit connection events can be modified for custom behaviors, such as: + +* To notify the user if the connection is dropped. +* To perform logging (from the client) when a circuit is connected. + +To modify the connection events, register callbacks for the following connection changes: + +* Dropped connections use `onConnectionDown`. +* Established/re-established connections use `onConnectionUp`. + +**Both `onConnectionDown` and `onConnectionUp` must be specified.** + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + +Blazor Web App: + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + +```html + + +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + +Blazor Server: + +:::moniker-end + +:::moniker range="< aspnetcore-10.0" + +```html + + +``` + +:::moniker-end + +**In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script and the path to use, see . + +:::moniker range=">= aspnetcore-7.0" + +### Automatically refresh the page when server-side reconnection fails + +The default reconnection behavior requires the user to take manual action to refresh the page after reconnection fails. However, a custom reconnection handler can be used to automatically refresh the page: + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + +`App.razor`: + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" + +`Pages/_Host.cshtml`: + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0" + +```html + + + +``` + +**In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script and the path to use, see . + +Create the following `wwwroot/boot.js` file. + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + +Blazor Web App: + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + +```javascript +(() => { + const maximumRetryCount = 3; + const retryIntervalMilliseconds = 5000; + const reconnectModal = document.getElementById('reconnect-modal'); + + const startReconnectionProcess = () => { + reconnectModal.style.display = 'block'; + + let isCanceled = false; + + (async () => { + for (let i = 0; i < maximumRetryCount; i++) { + reconnectModal.innerText = `Attempting to reconnect: ${i + 1} of ${maximumRetryCount}`; + + await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds)); + + if (isCanceled) { + return; + } + + try { + const result = await Blazor.reconnect(); + if (!result) { + // The server was reached, but the connection was rejected; reload the page. + location.reload(); + return; + } + + // Successfully reconnected to the server. + return; + } catch { + // Didn't reach the server; try again. + } + } + + // Retried too many times; reload the page. + location.reload(); + })(); + + return { + cancel: () => { + isCanceled = true; + reconnectModal.style.display = 'none'; + }, + }; + }; + + let currentReconnectionProcess = null; + + Blazor.start({ + circuit: { + reconnectionHandler: { + onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(), + onConnectionUp: () => { + currentReconnectionProcess?.cancel(); + currentReconnectionProcess = null; + } + } + } + }); +})(); +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + +Blazor Server: + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-10.0" + +```javascript +(() => { + const maximumRetryCount = 3; + const retryIntervalMilliseconds = 5000; + const reconnectModal = document.getElementById('reconnect-modal'); + + const startReconnectionProcess = () => { + reconnectModal.style.display = 'block'; + + let isCanceled = false; + + (async () => { + for (let i = 0; i < maximumRetryCount; i++) { + reconnectModal.innerText = `Attempting to reconnect: ${i + 1} of ${maximumRetryCount}`; + + await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds)); + + if (isCanceled) { + return; + } + + try { + const result = await Blazor.reconnect(); + if (!result) { + // The server was reached, but the connection was rejected; reload the page. + location.reload(); + return; + } + + // Successfully reconnected to the server. + return; + } catch { + // Didn't reach the server; try again. + } + } + + // Retried too many times; reload the page. + location.reload(); + })(); + + return { + cancel: () => { + isCanceled = true; + reconnectModal.style.display = 'none'; + }, + }; + }; + + let currentReconnectionProcess = null; + + Blazor.start({ + reconnectionHandler: { + onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(), + onConnectionUp: () => { + currentReconnectionProcess?.cancel(); + currentReconnectionProcess = null; + } + } + }); +})(); +``` + +For more information on Blazor startup, see . + +:::moniker-end + ## Adjust the server-side reconnection retry count and interval To adjust the reconnection retry count and interval, set the number of retries (`maxRetries`) and period in milliseconds permitted for each retry attempt (`retryIntervalMilliseconds`). -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Server: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script and the path to use, see . :::moniker range=">= aspnetcore-9.0" @@ -1145,8 +1421,16 @@ The server timeout can be increased, and the Keep-Alive interval can remain the In the following [startup configuration](xref:blazor/fundamentals/startup) example ([location of the Blazor script](xref:blazor/project-structure#location-of-the-blazor-script)), a custom value of 60 seconds is used for the server timeout. The Keep-Alive interval (`withKeepAliveInterval`) isn't set and uses its default value of 15 seconds. +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Server: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + When creating a hub connection in a component, set the server timeout (, default: 30 seconds) on the . Set the (default: 15 seconds) on the built . Confirm that the timeouts are at least double the Keep-Alive interval (/) and that the Keep-Alive value matches between server and client. The following example is based on the `Index` component in the [SignalR with Blazor tutorial](xref:blazor/tutorials/signalr-blazor). The server timeout is increased to 60 seconds, and the handshake timeout is increased to 30 seconds. The Keep-Alive interval isn't set and uses its default value of 15 seconds. @@ -1245,56 +1541,6 @@ protected override async Task OnInitializedAsync() :::moniker-end -## Modify the server-side reconnection handler - -The reconnection handler's circuit connection events can be modified for custom behaviors, such as: - -* To notify the user if the connection is dropped. -* To perform logging (from the client) when a circuit is connected. - -To modify the connection events, register callbacks for the following connection changes: - -* Dropped connections use `onConnectionDown`. -* Established/re-established connections use `onConnectionUp`. - -**Both `onConnectionDown` and `onConnectionUp` must be specified.** - -:::moniker range=">= aspnetcore-8.0" - -Blazor Web App: - -```html - - -``` - -Blazor Server: - -:::moniker-end - -```html - - -``` - -**In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script and the path to use, see . - :::moniker range=">= aspnetcore-7.0" ## Programmatic control of reconnection and reload behavior @@ -1545,13 +1791,17 @@ Use a to c Prevent automatically starting the app by adding `autostart="false"` to the Blazor ` -+ +- ++ + ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Server: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```diff -- -+ +- ++ + ``` +:::moniker-end + +**In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . + Add the following call with the hub path to the middleware processing pipeline in the server app's `Program` file. :::moniker range=">= aspnetcore-8.0" diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index 64e34c887b00..8a82903a9d82 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/aspnetcore/blazor/fundamentals/startup.md @@ -41,10 +41,14 @@ For the location of the script, see ` tag. * Place a script that calls `Blazor.start()` after the Blazor ` ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly and Blazor Server: :::moniker-end +:::moniker range="< aspnetcore-10.0" + * Add an `autostart="false"` attribute and value to the Blazor ` ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . :::moniker range=">= aspnetcore-6.0" @@ -415,10 +427,14 @@ The `loadBootResource` function can return a URI string to override the loading The `{TARGET FRAMEWORK}` placeholder is the target framework moniker (for example, `net7.0`). The `{VERSION}` placeholder is the shared framework version (for example, `7.0.0`). -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . To customize more than just the URLs for boot resources, the `loadBootResource` function can call `fetch` directly and return the result. The following example adds a custom HTTP header to the outbound requests. To retain the default integrity checking behavior, pass through the `integrity` parameter. -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . When the `loadBootResource` function returns `null`, Blazor uses the default loading behavior for the resource. For example, the preceding code returns `null` for the `dotnetjs` boot resource (`dotnet.*.js`) because the `dotnetjs` boot resource must either return `null` for default loading behavior or a URI for the source of the `dotnetjs` boot resource. @@ -962,8 +998,16 @@ For the placeholders in the following examples that set an environment variable: * The `{NAME}` placeholder is the environment variable's name. * The `{VALUE}` placeholder is the environment variable's value. +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Blazor Web App: +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + ```html ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly: ```html @@ -990,6 +1038,10 @@ Standalone Blazor WebAssembly: ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + > [!NOTE] > The .NET runtime instance can be accessed using the .NET WebAssembly Runtime API (`Blazor.runtime`). For example, the app's build configuration can be obtained using `Blazor.runtime.runtimeBuildInfo.buildConfiguration`. > diff --git a/aspnetcore/blazor/globalization-localization.md b/aspnetcore/blazor/globalization-localization.md index 882af2d91262..63efeb8856ed 100644 --- a/aspnetcore/blazor/globalization-localization.md +++ b/aspnetcore/blazor/globalization-localization.md @@ -320,10 +320,14 @@ Prevent Blazor autostart by adding `autostart="false"` to [Blazor's ` ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + The value for `applicationCulture` must conform to the [BCP-47 language tag format](https://www.rfc-editor.org/info/bcp47). For more information on Blazor startup, see . An alternative to setting the culture Blazor's start option is to set the culture in C# code. Set and in the `Program` file to the same culture. diff --git a/aspnetcore/blazor/host-and-deploy/webassembly/index.md b/aspnetcore/blazor/host-and-deploy/webassembly/index.md index fb924ab3a45b..40a473914bf3 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly/index.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly/index.md @@ -118,10 +118,14 @@ In the `wwwroot/index.html` file, set `autostart` to `false` on Blazor's `` tag and before the closing `` tag, add the following JavaScript code ` ``` +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" + Standalone Blazor WebAssembly: :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```html ``` +:::moniker-end + For more information on loading boot resources, see . :::moniker range=">= aspnetcore-8.0"