From abec238df14efede8b9804dc33d86b31320294a6 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 27 Feb 2025 12:03:27 -0500 Subject: [PATCH 1/6] Reconnect UI component --- aspnetcore/blazor/fundamentals/signalr.md | 72 +++++++++++++++++-- .../aspnetcore-10/includes/blazor.md | 11 +++ 2 files changed, 78 insertions(+), 5 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 8b76429ca720..fab76050f35a 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -519,7 +519,63 @@ If reconnection fails, the user is instructed to retry or reload the page: If reconnection succeeds, user state is often lost. Custom code can be added to any component to save and reload user state across connection failures. For more information, see . -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-10.0" + +Customize the UI and reconnection behavior in the `ReconnectModal` component (`Components/Layout/ReconnectModal.razor`), its collocated stylesheet file (`ReconnectModal.razor.css`), and its collocated JavaScript file (`ReconnectModal.razor.js`). These files can be examined in the ASP.NET Core reference source or by inspecting an app created from the Blazor Web App project template with Interactive WebAssembly or Interactive Auto rendering enabled: + +* [`ReconnectModal` component](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor) +* [Stylesheet file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css) +* [JavaScript file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.js) + +[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] + +The `components-reconnect-state-changed` event indicates a reconnection status change: + +* `show`: The reconnection modal is shown. +* `hide`: The reconnection model is closed. +* `retrying`: Reconnect attempts are in progress. +* `failed`: A reconnection attempt has failed. +* `rejected`: A reconnection attempt was received but rejected. + +The following table describes the CSS classes applied to the `components-reconnect-modal` element. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. + +| CSS class | Event | Indicates… | +| --- | --- | --- | +| `components-reconnect-show` | `show` | A lost connection. The client is attempting to reconnect. Show the modal. | +| `components-reconnect-hide` | `hide` | An active connection is re-established to the server. Hide the modal. | +| `components-reconnect-retrying` | `retrying` | The client is attempting to reconnect. | +| `components-reconnect-failed` | `failed` | Reconnection failed, probably due to a network failure. To attempt reconnection, call `Blazor.reconnect()` in JavaScript. | +| `components-reconnect-rejected` | `rejected` | Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call `location.reload()` in JavaScript. This connection state may result when: | + +Additional CSS classes to further control the style of rendered elements is described in the following table. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. + +| CSS class | Event | Indicates… | +| --- | --- | --- | +| `components-reconnect-first-attempt-visible` | `retrying` | Displayed on the first retry attempt. | +| `components-reconnect-repeated-attempt-visible` | `retrying` | Displayed on the subsequent retry attempts. | +| `components-reconnect-failed-visible` | `failed`/`rejected` | Displayed when reconnection attempts have failed or a reconnection attempt has been rejected. | + +To display the maximum number of reconnect retries, define an element with an `id` of `components-reconnect-max-retries`: + +```html + +``` + +To display the current reconnect attempt, define an element with an `id` of `components-reconnect-current-attempt`: + +```html + +``` + +To display the number of seconds to the next reconnection attempt, define an element with an `id` of `components-seconds-to-next-attempt`: + +```html + +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" To customize the UI, define a single element with an `id` of `components-reconnect-modal` in the `` element content. The following example places the element in the `App` component. @@ -551,6 +607,8 @@ To customize the UI, define a single element with an `id` of `components-reconne :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```cshtml
Connection lost.
Attempting to reconnect... @@ -562,7 +620,9 @@ To customize the UI, define a single element with an `id` of `components-reconne Add the following CSS styles to the site's stylesheet. -:::moniker range=">= aspnetcore-8.0" +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" `wwwroot/app.css`: @@ -574,6 +634,8 @@ Add the following CSS styles to the site's stylesheet. :::moniker-end +:::moniker range="< aspnetcore-10.0" + ```css #components-reconnect-modal { display: none; @@ -604,13 +666,13 @@ The following table describes the CSS classes applied to the `components-reconne | `components-reconnect-failed` | Reconnection failed, probably due to a network failure. To attempt reconnection, call `window.Blazor.reconnect()` in JavaScript. | | `components-reconnect-rejected` | Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call `location.reload()` in JavaScript. This connection state may result when: | -:::moniker range=">= aspnetcore-5.0" +:::moniker range=">= aspnetcore-5.0 < aspnetcore-10.0" Customize the delay before the reconnection UI appears by setting the `transition-delay` property in the site's CSS for the modal element. The following example sets the transition delay from 500 ms (default) to 1,000 ms (1 second). :::moniker-end -:::moniker range=">= aspnetcore-8.0" +:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" `wwwroot/app.css`: @@ -622,7 +684,7 @@ Customize the delay before the reconnection UI appears by setting the `transitio :::moniker-end -:::moniker range=">= aspnetcore-5.0" +:::moniker range=">= aspnetcore-5.0 < aspnetcore-10.0" ```css #components-reconnect-modal { diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index f200d91e3f40..e38aa5cae883 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -36,4 +36,15 @@ The [`[Route]` attribute](xref:Microsoft.AspNetCore.Components.RouteAttribute) n Previously, scrolled to the top of the page for same-page navigations. This behavior has been changed in .NET 10 so that the browser no longer scrolls to the top of the page when navigating to the same page. This means the viewport is no longer reset when making updates to the address for the current page, such as changing the query string or fragment. +### Reconnection UI component added to the Blazor Web App template + +The Blazor Web App project template now includes a `ReconnectModal` component, including collocated stylesheet and JavaScript files, for improved developer control over the reconnection UI when the client loses the WebSocket connection to the server. The component isn't required to inline styles programatically, so it doesn't violate stricter Content Security Policy (CSP) settings for the `style-src` policy, thus avoiding CSP violations that faced the reconnection UI in prior releases. + +New reconnection UI features: + +* Apart from indicating the reconnection state by setting a specific CSS class on the element with the `components-reconnect-modal` ID, it also dispatches a custom event in `components-reconnect-state-changed` that can be listened for on the modal element. +* The new reconnection state `retrying` is indicated by both a CSS class and the custom event, so that code can better differentiate the stages of the reconnection process. + +For more information, see . + --> From 408b6199aa9a8e7537515880b9a3fb8e2ccb2df2 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 27 Feb 2025 12:14:53 -0500 Subject: [PATCH 2/6] Updates --- aspnetcore/blazor/fundamentals/signalr.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index fab76050f35a..6df25a60a657 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -666,6 +666,8 @@ The following table describes the CSS classes applied to the `components-reconne | `components-reconnect-failed` | Reconnection failed, probably due to a network failure. To attempt reconnection, call `window.Blazor.reconnect()` in JavaScript. | | `components-reconnect-rejected` | Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call `location.reload()` in JavaScript. This connection state may result when:
  • A crash in the server-side circuit occurs.
  • The client is disconnected long enough for the server to drop the user's state. Instances of the user's components are disposed.
  • The server is restarted, or the app's worker process is recycled.
| +:::moniker-end + :::moniker range=">= aspnetcore-5.0 < aspnetcore-10.0" Customize the delay before the reconnection UI appears by setting the `transition-delay` property in the site's CSS for the modal element. The following example sets the transition delay from 500 ms (default) to 1,000 ms (1 second). From 2244a1efffc8cfcf4c87f8a15edfff4bc2230af8 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 28 Feb 2025 05:05:58 -0500 Subject: [PATCH 3/6] Updates --- aspnetcore/blazor/fundamentals/signalr.md | 18 +++++++++--------- .../aspnetcore-10/includes/blazor.md | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 6df25a60a657..fe5ff4db6b92 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -534,8 +534,8 @@ The `components-reconnect-state-changed` event indicates a reconnection status c * `show`: The reconnection modal is shown. * `hide`: The reconnection model is closed. * `retrying`: Reconnect attempts are in progress. -* `failed`: A reconnection attempt has failed. -* `rejected`: A reconnection attempt was received but rejected. +* `failed`: A reconnection attempt failed. +* `rejected`: A reconnection attempt was received by the server but rejected. The following table describes the CSS classes applied to the `components-reconnect-modal` element. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. @@ -549,25 +549,25 @@ The following table describes the CSS classes applied to the `components-reconne Additional CSS classes to further control the style of rendered elements is described in the following table. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. -| CSS class | Event | Indicates… | +| CSS class | Event | Displayed on… | | --- | --- | --- | -| `components-reconnect-first-attempt-visible` | `retrying` | Displayed on the first retry attempt. | -| `components-reconnect-repeated-attempt-visible` | `retrying` | Displayed on the subsequent retry attempts. | -| `components-reconnect-failed-visible` | `failed`/`rejected` | Displayed when reconnection attempts have failed or a reconnection attempt has been rejected. | +| `components-reconnect-first-attempt-visible` | `retrying` | The first retry attempt. | +| `components-reconnect-repeated-attempt-visible` | `retrying` | Subsequent retry attempts. | +| `components-reconnect-failed-visible` | `failed`/`rejected` | Reconnection attempts that have failed or been rejected. | -To display the maximum number of reconnect retries, define an element with an `id` of `components-reconnect-max-retries`: +An element with an `id` of `components-reconnect-max-retries` displays the maximum number of reconnect retries: ```html ``` -To display the current reconnect attempt, define an element with an `id` of `components-reconnect-current-attempt`: +An element with an `id` of `components-reconnect-current-attempt` displays the current reconnect attempt: ```html ``` -To display the number of seconds to the next reconnection attempt, define an element with an `id` of `components-seconds-to-next-attempt`: +An element with an `id` of `components-seconds-to-next-attempt` displays the number of seconds to the next reconnection attempt: ```html diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index e38aa5cae883..c95b831bd690 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -36,14 +36,14 @@ The [`[Route]` attribute](xref:Microsoft.AspNetCore.Components.RouteAttribute) n Previously, scrolled to the top of the page for same-page navigations. This behavior has been changed in .NET 10 so that the browser no longer scrolls to the top of the page when navigating to the same page. This means the viewport is no longer reset when making updates to the address for the current page, such as changing the query string or fragment. -### Reconnection UI component added to the Blazor Web App template +### Reconnection UI component added to the Blazor Web App project template -The Blazor Web App project template now includes a `ReconnectModal` component, including collocated stylesheet and JavaScript files, for improved developer control over the reconnection UI when the client loses the WebSocket connection to the server. The component isn't required to inline styles programatically, so it doesn't violate stricter Content Security Policy (CSP) settings for the `style-src` policy, thus avoiding CSP violations that faced the reconnection UI in prior releases. +The Blazor Web App project template now includes a `ReconnectModal` component, including collocated stylesheet and JavaScript files, for improved developer control over the reconnection UI when the client loses the WebSocket connection to the server. The component isn't required to inline styles programatically, so it doesn't violate stricter Content Security Policy (CSP) settings for the `style-src` policy, thus avoiding CSP violations that occurred with the reconnection UI in prior releases. New reconnection UI features: -* Apart from indicating the reconnection state by setting a specific CSS class on the element with the `components-reconnect-modal` ID, it also dispatches a custom event in `components-reconnect-state-changed` that can be listened for on the modal element. -* The new reconnection state `retrying` is indicated by both a CSS class and the custom event, so that code can better differentiate the stages of the reconnection process. +* Apart from indicating the reconnection state by setting a specific CSS class on the reconnection UI element, the new `components-reconnect-state-changed` event is dispatched for reconnection state changes. +* Code can better differentiate the stages of the reconnection process with the new reconnection state "`retrying`," indicated by both the CSS class and the new event. For more information, see . From 3a2593edd480402c913e5191873ff0ee587bf7a1 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 28 Feb 2025 05:15:24 -0500 Subject: [PATCH 4/6] Updates --- aspnetcore/blazor/fundamentals/signalr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index fe5ff4db6b92..4744c1406594 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -553,7 +553,7 @@ Additional CSS classes to further control the style of rendered elements is desc | --- | --- | --- | | `components-reconnect-first-attempt-visible` | `retrying` | The first retry attempt. | | `components-reconnect-repeated-attempt-visible` | `retrying` | Subsequent retry attempts. | -| `components-reconnect-failed-visible` | `failed`/`rejected` | Reconnection attempts that have failed or been rejected. | +| `components-reconnect-failed-visible` | `failed` | A failed reconnection attempt. | An element with an `id` of `components-reconnect-max-retries` displays the maximum number of reconnect retries: From 72be00437986e48ba38a297e66547d8945ec35b1 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 10 Mar 2025 12:03:59 -0400 Subject: [PATCH 5/6] Updates --- aspnetcore/blazor/fundamentals/signalr.md | 47 +++++++++---------- .../aspnetcore-10/includes/blazor.md | 2 +- 2 files changed, 22 insertions(+), 27 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 4744c1406594..82e2046bcc95 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -521,39 +521,26 @@ If reconnection succeeds, user state is often lost. Custom code can be added to :::moniker range=">= aspnetcore-10.0" -Customize the UI and reconnection behavior in the `ReconnectModal` component (`Components/Layout/ReconnectModal.razor`), its collocated stylesheet file (`ReconnectModal.razor.css`), and its collocated JavaScript file (`ReconnectModal.razor.js`). These files can be examined in the ASP.NET Core reference source or by inspecting an app created from the Blazor Web App project template with Interactive WebAssembly or Interactive Auto rendering enabled: +To create UI elements that track reconnection state, the following table describes: -* [`ReconnectModal` component](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor) -* [Stylesheet file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css) -* [JavaScript file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.js) - -[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] - -The `components-reconnect-state-changed` event indicates a reconnection status change: - -* `show`: The reconnection modal is shown. -* `hide`: The reconnection model is closed. -* `retrying`: Reconnect attempts are in progress. -* `failed`: A reconnection attempt failed. -* `rejected`: A reconnection attempt was received by the server but rejected. - -The following table describes the CSS classes applied to the `components-reconnect-modal` element. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. +* A set of `components-reconnect-*` CSS classes (**Css class** column) that are set or unset by Blazor on an element with an `id` of `components-reconnect-modal`. +* The `components-reconnect-state-changed` event value (**Event** column) that indicates a reconnection status change. | CSS class | Event | Indicates… | | --- | --- | --- | -| `components-reconnect-show` | `show` | A lost connection. The client is attempting to reconnect. Show the modal. | -| `components-reconnect-hide` | `hide` | An active connection is re-established to the server. Hide the modal. | +| `components-reconnect-show` | `show` | A lost connection. The client is attempting to reconnect. The reconnection modal is shown. | +| `components-reconnect-hide` | `hide` | An active connection is re-established to the server. The reconnection model is closed. | | `components-reconnect-retrying` | `retrying` | The client is attempting to reconnect. | -| `components-reconnect-failed` | `failed` | Reconnection failed, probably due to a network failure. To attempt reconnection, call `Blazor.reconnect()` in JavaScript. | -| `components-reconnect-rejected` | `rejected` | Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call `location.reload()` in JavaScript. This connection state may result when:
  • A crash in the server-side circuit occurs.
  • The client is disconnected long enough for the server to drop the user's state. Instances of the user's components are disposed.
  • The server is restarted, or the app's worker process is recycled.
| +| `components-reconnect-failed` | `failed` | Reconnection failed, probably due to a network failure. | +| `components-reconnect-rejected` | `rejected` | Reconnection rejected. | -Additional CSS classes to further control the style of rendered elements is described in the following table. The **Event** column represents the value of the matching `components-reconnect-state-changed` JavaScript event. +When the reconnection state change in `components-reconnect-state-changed` is `failed`, call `Blazor.reconnect()` in JavaScript to attempt reconnection. -| CSS class | Event | Displayed on… | -| --- | --- | --- | -| `components-reconnect-first-attempt-visible` | `retrying` | The first retry attempt. | -| `components-reconnect-repeated-attempt-visible` | `retrying` | Subsequent retry attempts. | -| `components-reconnect-failed-visible` | `failed` | A failed reconnection attempt. | +When the reconnection state change is `rejected`, the server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call `location.reload()` in JavaScript. This connection state may result when: + +* A crash in the server-side circuit occurs. +* The client is disconnected long enough for the server to drop the user's state. Instances of the user's components are disposed. +* The server is restarted, or the app's worker process is recycled. An element with an `id` of `components-reconnect-max-retries` displays the maximum number of reconnect retries: @@ -573,6 +560,14 @@ An element with an `id` of `components-seconds-to-next-attempt` displays the num ``` +The Blazor Web App project template includes a `ReconnectModal` component (`Components/Layout/ReconnectModal.razor`) with collocated stylesheet and JavaScript files (`ReconnectModal.razor.css`, `ReconnectModal.razor.js`) that can be customized as needed. These files can be examined in the ASP.NET Core reference source or by inspecting an app created from the Blazor Web App project template with Interactive WebAssembly or Interactive Auto rendering enabled: + +* [`ReconnectModal` component](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor) +* [Stylesheet file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css) +* [JavaScript file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.js) + +[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] + :::moniker-end :::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0" diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index c95b831bd690..b5905b36a7e8 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -38,7 +38,7 @@ Previously, Date: Mon, 10 Mar 2025 13:19:42 -0400 Subject: [PATCH 6/6] Updates --- aspnetcore/blazor/fundamentals/signalr.md | 24 +++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 82e2046bcc95..2bb1bcc716b2 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -524,7 +524,7 @@ If reconnection succeeds, user state is often lost. Custom code can be added to To create UI elements that track reconnection state, the following table describes: * A set of `components-reconnect-*` CSS classes (**Css class** column) that are set or unset by Blazor on an element with an `id` of `components-reconnect-modal`. -* The `components-reconnect-state-changed` event value (**Event** column) that indicates a reconnection status change. +* A `components-reconnect-state-changed` event (**Event** column) that indicates a reconnection status change. | CSS class | Event | Indicates… | | --- | --- | --- | @@ -542,6 +542,26 @@ When the reconnection state change is `rejected`, the server was reached but ref * The client is disconnected long enough for the server to drop the user's state. Instances of the user's components are disposed. * The server is restarted, or the app's worker process is recycled. +The developer adds an event listener on the reconnect modal element to monitor and react to reconnection state changes, as seen in the following example: + +```javascript +const reconnectModal = document.getElementById("components-reconnect-modal"); +reconnectModal.addEventListener("components-reconnect-state-changed", + handleReconnectStateChanged); + +function handleReconnectStateChanged(event) { + if (event.detail.state === "show") { + reconnectModal.showModal(); + } else if (event.detail.state === "hide") { + reconnectModal.close(); + } else if (event.detail.state === "failed") { + Blazor.reconnect(); + } else if (event.detail.state === "rejected") { + location.reload(); + } +} +``` + An element with an `id` of `components-reconnect-max-retries` displays the maximum number of reconnect retries: ```html @@ -560,7 +580,7 @@ An element with an `id` of `components-seconds-to-next-attempt` displays the num ``` -The Blazor Web App project template includes a `ReconnectModal` component (`Components/Layout/ReconnectModal.razor`) with collocated stylesheet and JavaScript files (`ReconnectModal.razor.css`, `ReconnectModal.razor.js`) that can be customized as needed. These files can be examined in the ASP.NET Core reference source or by inspecting an app created from the Blazor Web App project template with Interactive WebAssembly or Interactive Auto rendering enabled: +The Blazor Web App project template includes a `ReconnectModal` component (`Components/Layout/ReconnectModal.razor`) with collocated stylesheet and JavaScript files (`ReconnectModal.razor.css`, `ReconnectModal.razor.js`) that can be customized as needed. These files can be examined in the ASP.NET Core reference source or by inspecting an app created from the Blazor Web App project template. The component is added to the project when the project is created in Visual Studio with **Interactive render mode** set to **Server** or **Auto** or created with the .NET CLI with the option `--interactivity server` (default) or `--interactivity auto`. * [`ReconnectModal` component](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor) * [Stylesheet file](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css)