diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 5ed800690d..151e764a0a 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -491,11 +491,39 @@ In the `Program` file, call . :::moniker range=">= aspnetcore-8.0" -To customize the UI, define a single element with an `id` of `components-reconnect-modal`. The following example places the element in the `App` component. +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. `App.razor`: @@ -503,7 +531,7 @@ To customize the UI, define a single element with an `id` of `components-reconne :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" -To customize the UI, define a single element with an `id` of `components-reconnect-modal`. The following example places the element in the host page. +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 host page. `Pages/_Host.cshtml`: @@ -511,7 +539,7 @@ To customize the UI, define a single element with an `id` of `components-reconne :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" -To customize the UI, define a single element with an `id` of `components-reconnect-modal`. The following example places the element in the layout page. +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 layout page. `Pages/_Layout.cshtml`: @@ -519,7 +547,7 @@ To customize the UI, define a single element with an `id` of `components-reconne :::moniker range="< aspnetcore-6.0" -To customize the UI, define a single element with an `id` of `components-reconnect-modal`. The following example places the element in the host page. +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 host page. `Pages/_Host.cshtml`: @@ -527,7 +555,7 @@ To customize the UI, define a single element with an `id` of `components-reconne ```cshtml
- There was a problem with the connection! + Connection lost.
Attempting to reconnect...
``` @@ -557,6 +585,15 @@ Add the following CSS styles to the site's stylesheet. #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: block; + background-color: white; + padding: 2rem; + border-radius: 0.5rem; + text-align: center; + box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3); + margin: 50px 50px; + position: fixed; + top: 0; + z-index: 10001; } ``` @@ -581,7 +618,7 @@ Customize the delay before the reconnection UI appears by setting the `transitio :::moniker-end -:::moniker range="< aspnetcore-8.0" +:::moniker range=">= aspnetcore-5.0 < aspnetcore-8.0" `wwwroot/css/site.css`: @@ -606,11 +643,9 @@ To display the current reconnect attempt, define an element with an `id` of `com ``` -When the custom reconnect modal appears, it renders content similar to the following based on the preceding code: +When the custom reconnect modal appears, it renders the following content with a reconnection attempt counter: -```html -There was a problem with the connection! (Current reconnect attempt: 3 / 8) -``` +> :::no-loc text="There was a problem with the connection! (Current reconnect attempt: 1 / 8)"::: :::moniker-end diff --git a/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-80-or-earlier.png b/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-80-or-earlier.png new file mode 100644 index 0000000000..ff7e64fc61 Binary files /dev/null and b/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-80-or-earlier.png differ diff --git a/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-90-or-later.png b/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-90-or-later.png new file mode 100644 index 0000000000..a08404aa2f Binary files /dev/null and b/aspnetcore/blazor/fundamentals/signalr/_static/reconnection-ui-90-or-later.png differ diff --git a/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-80-or-earlier.png b/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-80-or-earlier.png new file mode 100644 index 0000000000..cf4b924024 Binary files /dev/null and b/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-80-or-earlier.png differ diff --git a/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-90-or-later.png b/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-90-or-later.png new file mode 100644 index 0000000000..59a2d775a4 Binary files /dev/null and b/aspnetcore/blazor/fundamentals/signalr/_static/retry-ui-90-or-later.png differ