Skip to content

Enhance Blazor hosting model configuration content #19778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 9, 2020
Merged

Enhance Blazor hosting model configuration content #19778

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9810e5b
Enhance Blazor start content
guardrex Sep 4, 2020
bed6de6
Updates
guardrex Sep 8, 2020
7b3e5aa
Update
guardrex Sep 9, 2020
bc0b4cc
Updates
guardrex Sep 9, 2020
9d7df62
Update
guardrex Sep 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 76 additions & 18 deletions aspnetcore/blazor/fundamentals/additional-scenarios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,20 +112,62 @@ Blazor Server apps are set up by default to prerender the UI on the server befor

Rendering server components from a static HTML page isn't supported.

## Configure the SignalR client for Blazor Server apps
## Initialize the Blazor circuit

*This section applies to Blazor Server.*

Configure the SignalR client used by Blazor Server apps in the `Pages/_Host.cshtml` file. Place a script that calls `Blazor.start` after the `_framework/blazor.server.js` script and inside the `</body>` tag.
Configure the manual start of a Blazor Server app's [SignalR circuit](xref:blazor/hosting-models#circuits) in the `Pages/_Host.cshtml` file:

### Logging
* Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script.
* Place a script that calls `Blazor.start` after the `blazor.server.js` script's tag and inside the closing `</body>` tag.

To configure SignalR client logging:
When `autostart` is disabled, any aspect of the app that doesn't depend on the circuit works normally. For example, client-side routing is operational. However, any aspect that depends on the circuit isn't operational until `Blazor.start` is called. App behavior is unpredictable without an established circuit. For example, component methods fail to execute while the circuit is disconnected.

* Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script.
* Pass in a configuration object (`configureSignalR`) that calls `configureLogging` with the log level on the client builder.
### Initialize Blazor when the document is ready

To initialize the Blazor app when the document is ready:

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
Blazor.start();
});
</script>
</body>
```

### Chain to the `Promise` that results from a manual start

To perform additional tasks, such as JS interop initialization, use `then` to chain to the `Promise` that results from a manual Blazor app start:

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
<script>
Blazor.start().then(function () {
...
});
</script>
</body>
```

### Configure the SignalR client

#### Logging

To configure SignalR client logging, pass in a configuration object (`configureSignalR`) that calls `configureLogging` with the log level on the client builder:

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
Expand All @@ -148,12 +190,16 @@ The reconnection handler's circuit connection events can be modified for custom
* 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:
To modify the connection events, register callbacks for the following connection changes:

* Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script.
* Register callbacks for connection changes for dropped connections (`onConnectionDown`) and established/re-established connections (`onConnectionUp`). **Both** `onConnectionDown` and `onConnectionUp` must be specified.
* Dropped connections use `onConnectionDown`.
* Established/re-established connections use `onConnectionUp`.

**Both** `onConnectionDown` and `onConnectionUp` must be specified:

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
Expand All @@ -170,12 +216,11 @@ To modify the connection events:

### Adjust the reconnection retry count and interval

To adjust the reconnection retry count and interval:

* Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script.
* Set the number of retries (`maxRetries`) and period in milliseconds permitted for each retry attempt (`retryIntervalMilliseconds`).
To adjust the reconnection retry count and interval, set the number of retries (`maxRetries`) and period in milliseconds permitted for each retry attempt (`retryIntervalMilliseconds`):

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
Expand All @@ -190,21 +235,22 @@ To adjust the reconnection retry count and interval:
</body>
```

### Hide or replace the reconnection display
## Hide or replace the reconnection display

To hide the reconnection display:

* Add an `autostart="false"` attribute to the `<script>` tag for the `blazor.server.js` script.
* Set the reconnection handler's `_reconnectionDisplay` to an empty object (`{}` or `new Object()`).
To hide the reconnection display, set the reconnection handler's `_reconnectionDisplay` to an empty object (`{}` or `new Object()`):

```cshtml
<body>

...

<script autostart="false" src="_framework/blazor.server.js"></script>
<script>
window.addEventListener('beforeunload', function () {
Blazor.defaultReconnectionHandler._reconnectionDisplay = {};
});

Blazor.start();
</script>
</body>
```
Expand All @@ -218,6 +264,18 @@ Blazor.defaultReconnectionHandler._reconnectionDisplay =

The placeholder `{ELEMENT ID}` is the ID of the HTML element to display.

::: moniker range=">= aspnetcore-5.0"

Customize the delay before the reconnection display appears by setting the `transition-delay` property in the app's CSS (`wwwroot/css/site.css`) for the modal element. The following example sets the transition delay from 500 ms (default) to 1,000 ms (1 second):

```css
#components-reconnect-modal {
transition: visibility 0s linear 1000ms;
}
```

::: moniker-end

## Influence HTML `<head>` tag elements

*This section applies to the upcoming ASP.NET Core 5.0 release of Blazor WebAssembly and Blazor Server.*
Expand Down