Skip to content

Blazor _Host to _Layout updates #22929

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.

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 3 commits into from
Aug 2, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion aspnetcore/6.0/blazor/components/class-libraries.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ When the `Link` component is used in a child component, the linked asset is also

An alternative to using the `Link` component is to link to the library's stylesheet in the app's `<head>` markup.

`wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server):
`wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server):

```diff
+ <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />
Expand Down
4 changes: 2 additions & 2 deletions aspnetcore/6.0/blazor/components/css-isolation.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ 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 `<head>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server). The following `<link>` 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 `<head>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). The following `<link>` 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:

```html
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
Expand Down Expand Up @@ -208,7 +208,7 @@ In the following example:
* The static web asset base path is `_content/ClassLib`.
* The class library's assembly name is `ClassLib`.

`wwwroot/index.html` (Blazor WebAssembly) or `Pages_Host.cshtml` (Blazor Server):
`wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server):

```html
<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">
Expand Down
6 changes: 3 additions & 3 deletions aspnetcore/6.0/blazor/components/event-handling.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Custom events with custom event arguments are generally enabled with the followi
}
```

1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor `<script>`:
1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server) immediately after the Blazor `<script>`:

```html
<script>
Expand Down Expand Up @@ -167,9 +167,9 @@ public class CustomPasteEventArgs : EventArgs
}
```

Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Host.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script. The following example only handles pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images.
Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Layout.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script. The following example only handles pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images.

`wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor script:
`wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server) immediately after the Blazor script:

```html
<script>
Expand Down
24 changes: 10 additions & 14 deletions aspnetcore/6.0/blazor/components/prerendering-and-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ To set up prerendering for a hosted Blazor WebAssembly app:
- builder.RootComponents.Add<App>("#app");
```

1. Add a `Pages/_Host.cshtml` file to the **`Server`** project's `Pages` folder. You can obtain a `_Host.cshtml` file from a project created from the Blazor Server template with the `dotnet new blazorserver -o BlazorServer` command in a command shell (the `-o BlazorServer` option creates a folder for the project). After placing the `Pages/_Host.cshtml` file into the **`Server`** project of the hosted Blazor WebAssembly solution, make the following changes to the file:
1. Add `_Host.cshtml` and `_Layout.cshtml` files to the **`Server`** project's `Pages` folder. You can obtain `_Host.cshtml` and `_Layout.cshtml` files from a project created from the Blazor Server template with the `dotnet new blazorserver -o BlazorServer` command in a command shell (the `-o BlazorServer` option creates a folder for the project). After placing the files into the **`Server`** project's `Pages` folder, make the following changes to the `_Layout.cshtml` file:

* Provide an [`@using`](xref:mvc/views/razor#using) directive for the **`Client`** project (for example, `@using BlazorHosted.Client`).
* Update the stylesheet links to point to the WebAssembly project's stylesheets. In the following example, the client project's namespace is `BlazorHosted.Client`:
Expand All @@ -52,18 +52,18 @@ To set up prerendering for a hosted Blazor WebAssembly app:
> [!NOTE]
> Leave the `<link>` element that requests the Bootstrap stylesheet (`css/bootstrap/bootstrap.min.css`) in place.

* Update the `render-mode` of the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) to prerender the root `App` component with <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssemblyPrerendered>:
* In the `_Layout.cshtml` file, update the Blazor script source to use the client-side Blazor WebAssembly script:

```diff
- <component type="typeof(App)" render-mode="ServerPrerendered" />
+ <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
- <script src="_framework/blazor.server.js"></script>
+ <script src="_framework/blazor.webassembly.js"></script>
```

* Update the Blazor script source to use the client-side Blazor WebAssembly script:
* In the `_Host.cshtml` file, update the `render-mode` of the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) to prerender the root `App` component with <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.WebAssemblyPrerendered>:

```diff
- <script src="_framework/blazor.server.js"></script>
+ <script src="_framework/blazor.webassembly.js"></script>
- <component type="typeof(App)" render-mode="ServerPrerendered" />
+ <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
```

1. In `Startup.Configure` of the **`Server`** project, change the fallback from the `index.html` file to the `_Host.cshtml` page.
Expand Down Expand Up @@ -653,16 +653,14 @@ For more information, see <xref:blazor/components/index#namespaces>.

Without preserving prerendered state, any state that used during prerendering is lost and must be recreated when the app is fully loaded. If any state is setup asynchronously, the UI may flicker as the the prerendered UI is replaced with temporary placeholders and then fully rendered again.

To solve these problems, Blazor supports persisting state in a prerendered page using the [Preserve Component State Tag Helper](xref:mvc/views/tag-helpers/builtin-th/preserve-component-state-tag-helper) (`<preserve-component-state />`). Add the `<preserve-component-state />` tag inside the closing `</body>` tag of `_Host.cshtml`.
To solve these problems, Blazor supports persisting state in a prerendered page using the [Preserve Component State Tag Helper](xref:mvc/views/tag-helpers/builtin-th/preserve-component-state-tag-helper) (`<preserve-component-state />`). Add the `<preserve-component-state />` tag inside the closing `</body>` tag of `_Layout.cshtml`.

::: zone pivot="webassembly"

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

...

<persist-component-state />
Expand All @@ -673,12 +671,10 @@ To solve these problems, Blazor supports persisting state in a prerendered page

::: zone pivot="server"

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />

...

<persist-component-state />
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/6.0/blazor/fundamentals/handle-errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ When a Blazor app isn't functioning properly during development, receiving detai

The UI for this error handling experience is part of the [Blazor project templates](xref:blazor/project-structure).

In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` file:
In a Blazor Server app, customize the experience in the `Pages/_Layout.cshtml` file:

```cshtml
<div id="blazor-error-ui">
Expand Down
4 changes: 2 additions & 2 deletions aspnetcore/6.0/blazor/fundamentals/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Components support multiple route templates using multiple [`@page` directives](
[!code-razor[](~/6.0/blazor/samples/BlazorSample_WebAssembly/Pages/routing/BlazorRoute.razor?highlight=1-2)]

> [!IMPORTANT]
> For URLs to resolve correctly, the app must include a `<base>` tag in its `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server) with the app base path specified in the `href` attribute. For more information, see <xref:blazor/host-and-deploy/index#app-base-path>.
> For URLs to resolve correctly, the app must include a `<base>` tag in its `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server) with the app base path specified in the `href` attribute. For more information, see <xref:blazor/host-and-deploy/index#app-base-path>.

The <xref:Microsoft.AspNetCore.Components.Routing.Router> doesn't interact with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section.

Expand Down Expand Up @@ -226,7 +226,7 @@ Use <xref:Microsoft.AspNetCore.Components.NavigationManager> to manage URIs and
| Member | Description |
| ------ | ----------- |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.Uri> | Gets the current absolute URI. |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.BaseUri> | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, <xref:Microsoft.AspNetCore.Components.NavigationManager.BaseUri> corresponds to the `href` attribute on the document's `<base>` element in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server). |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.BaseUri> | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, <xref:Microsoft.AspNetCore.Components.NavigationManager.BaseUri> corresponds to the `href` attribute on the document's `<base>` element in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.NavigateTo%2A> | Navigates to the specified URI. If `forceLoad` is `true`:<ul><li>Client-side routing is bypassed.</li><li>The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.</li></ul> |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.LocationChanged> | An event that fires when the navigation location has changed. |
| <xref:Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri%2A> | Converts a relative URI into an absolute URI. |
Expand Down
14 changes: 7 additions & 7 deletions aspnetcore/6.0/blazor/fundamentals/signalr.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ In `Startup.Configure`, Blazor Server apps call <xref:Microsoft.AspNetCore.Build

When the client detects that the connection has been lost, a default UI is displayed to the user while the client attempts to reconnect. If reconnection fails, the user is provided the option to retry.

To customize the UI, define an element with an `id` of `components-reconnect-modal` in the `<body>` of the `_Host.cshtml` Razor page.
To customize the UI, define an element with an `id` of `components-reconnect-modal` in the `<body>` of the `_Layout.cshtml` Razor page.

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<div id="components-reconnect-modal">
Expand Down Expand Up @@ -174,7 +174,7 @@ By default, Blazor Server apps prerender the UI on the server before the client

## Blazor startup

Configure the manual start of a Blazor Server app's [SignalR circuit](xref:blazor/hosting-models#circuits) in the `Pages/_Host.cshtml` file:
Configure the manual start of a Blazor Server app's [SignalR circuit](xref:blazor/hosting-models#circuits) in the `Pages/_Layout.cshtml` file:

* 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 `<script>` tag and inside the closing `</body>` tag.
Expand All @@ -187,7 +187,7 @@ For more information, including how to initialize Blazor when the document is re

On the client builder, pass in the `configureSignalR` configuration object that calls `configureLogging` with the log level.

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
Expand Down Expand Up @@ -222,7 +222,7 @@ To modify the connection events, register callbacks for the following connection

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

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
Expand All @@ -246,7 +246,7 @@ For more information on Blazor startup, see <xref:blazor/fundamentals/startup>.

To adjust the reconnection retry count and interval, set the number of retries (`maxRetries`) and period in milliseconds permitted for each retry attempt (`retryIntervalMilliseconds`).

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
Expand All @@ -270,7 +270,7 @@ For more information on Blazor startup, see <xref:blazor/fundamentals/startup>.

To hide the reconnection display, set the reconnection handler's `_reconnectionDisplay` to an empty object (`{}` or `new Object()`).

`Pages/_Host.cshtml`:
`Pages/_Layout.cshtml`:

```cshtml
<body>
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/6.0/blazor/fundamentals/startup.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ uid: blazor/fundamentals/startup
---
# ASP.NET Core Blazor Startup

Configure a manual start in the `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server):
Configure a manual start in the `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server):

* Add an `autostart="false"` attribute and value to the `<script>` tag for the Blazor script.
* Place a script that calls `Blazor.start` after the Blazor `<script>` tag and inside the closing `</body>` tag.
Expand Down
6 changes: 3 additions & 3 deletions aspnetcore/6.0/blazor/globalization-localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -439,14 +439,14 @@ For information on ordering the Localization Middleware in the middleware pipeli

The following example shows how to set the current culture in a cookie that can be read by the Localization Middleware.

Add the following namespaces to the top of the `Pages/_Host.cshtml` file:
Add the following namespaces to the top of the `Pages/_Layout.cshtml` file:

```csharp
@using System.Globalization
@using Microsoft.AspNetCore.Localization
```

Immediately after the opening `<body>` tag of `Pages/_Host.cshtml`, add the following Razor expression:
Immediately after the opening `<body>` tag of `Pages/_Layout.cshtml`, add the following Razor expression:

```cshtml
@{
Expand Down Expand Up @@ -644,7 +644,7 @@ app.UseRequestLocalization(localizationOptions);

For information on ordering the Localization Middleware in the middleware pipeline of `Startup.Configure`, see <xref:fundamentals/middleware/index#middleware-order>.

If the app should localize resources based on storing a user's culture setting, use a localization culture cookie. Use of a cookie ensures that the WebSocket connection can correctly propagate the culture. If localization schemes are based on the URL path or query string, the scheme might not be able to work with [WebSockets](xref:fundamentals/websockets), thus fail to persist the culture. Therefore, the recommended approach is to use a localization culture cookie. See the [Dynamically set the culture by user preference](#dynamically-set-the-culture-by-user-preference) section of this article to see an example Razor expression for the `Pages/_Host.cshtml` file that persists the user's culture selection.
If the app should localize resources based on storing a user's culture setting, use a localization culture cookie. Use of a cookie ensures that the WebSocket connection can correctly propagate the culture. If localization schemes are based on the URL path or query string, the scheme might not be able to work with [WebSockets](xref:fundamentals/websockets), thus fail to persist the culture. Therefore, the recommended approach is to use a localization culture cookie. See the [Dynamically set the culture by user preference](#dynamically-set-the-culture-by-user-preference) section of this article to see an example Razor expression for the `Pages/_Layout.cshtml` file that persists the user's culture selection.

::: zone-end

Expand Down
6 changes: 3 additions & 3 deletions aspnetcore/6.0/blazor/host-and-deploy/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@ The *app base path* is the app's root URL path. Consider the following ASP.NET C

Without specifying additional configuration for `CoolApp`, the sub-app in this scenario has no knowledge of where it resides on the server. For example, the app can't construct correct relative URLs to its resources without knowing that it resides at the relative URL path `/CoolApp/`.

To provide configuration for the Blazor app's base path of `https://www.contoso.com/CoolApp/`, the `<base>` tag's `href` attribute is set to the relative root path in the `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server).
To provide configuration for the Blazor app's base path of `https://www.contoso.com/CoolApp/`, the `<base>` tag's `href` attribute is set to the relative root path in the `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server).

Blazor WebAssembly (`wwwroot/index.html`):

```html
<base href="/CoolApp/">
```

Blazor Server (`Pages/_Host.cshtml`):
Blazor Server (`Pages/_Layout.cshtml`):

```html
<base href="~/CoolApp/">
Expand All @@ -84,7 +84,7 @@ By providing the relative URL path, a component that isn't in the root directory

In many hosting scenarios, the relative URL path to the app is the root of the app. In these cases, the app's relative URL base path is a forward slash (`<base href="/" />`), which is the default configuration for a Blazor app. In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app.

To set the app's base path, update the `<base>` tag within the `<head>` tag elements of the `Pages/_Host.cshtml` file (Blazor Server) or `wwwroot/index.html` file (Blazor WebAssembly). Set the `href` attribute value to `/{RELATIVE URL PATH}/` (Blazor WebAssembly) or `~/{RELATIVE URL PATH}/` (Blazor Server). **The trailing slash is required.** The placeholder `{RELATIVE URL PATH}` is the app's full relative URL path.
To set the app's base path, update the `<base>` tag within the `<head>` tag elements of the `Pages/_Layout.cshtml` file (Blazor Server) or `wwwroot/index.html` file (Blazor WebAssembly). Set the `href` attribute value to `/{RELATIVE URL PATH}/` (Blazor WebAssembly) or `~/{RELATIVE URL PATH}/` (Blazor Server). **The trailing slash is required.** The placeholder `{RELATIVE URL PATH}` is the app's full relative URL path.

For a Blazor WebAssembly app with a non-root relative URL path (for example, `<base href="/CoolApp/">`), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `<base>` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option:

Expand Down
Loading