Skip to content
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

Snippet cross-links 8.0 #31268

Merged
merged 2 commits into from
Dec 19, 2023
Merged

Snippet cross-links 8.0 #31268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c429ae
Snippet cross-links 8.0
guardrex Dec 19, 2023
e031beb
Updates
guardrex Dec 19, 2023
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
141 changes: 57 additions & 84 deletions aspnetcore/blazor/components/cascading-values-and-parameters.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ The following class is used in this section's examples.
// "Dalek" ©Terry Nation https://www.imdb.com/name/nm0622334/
// "Doctor Who" ©BBC https://www.bbc.co.uk/programmes/b006q2x0

namespace BlazorSample;

public class Daleks
{
public int Units { get; set; }
Expand Down Expand Up @@ -65,8 +67,8 @@ The following `Daleks` component displays the cascaded values.
</ul>

<p>
Dalek ©<a href="https://www.imdb.com/name/nm0622334/">Terry Nation</a><br>
Doctor Who ©<a href="https://www.bbc.co.uk/programmes/b006q2x0">BBC</a>
Dalek© <a href="https://www.imdb.com/name/nm0622334/">Terry Nation</a><br>
Doctor Who© <a href="https://www.bbc.co.uk/programmes/b006q2x0">BBC</a>
</p>

@code {
Expand Down Expand Up @@ -97,12 +99,12 @@ An ancestor component provides a cascading value using the Blazor framework's [`

The following example demonstrates the flow of theme information down the component hierarchy to provide a CSS style class to buttons in child components.

The following `ThemeInfo` C# class is placed in a folder named `UIThemeClasses` and specifies the theme information.
The following `ThemeInfo` C# class specifies the theme information.

> [!NOTE]
> For the examples in this section, the app's namespace is `BlazorSample`. When experimenting with the code in your own sample app, change the app's namespace to your sample app's namespace.

`UIThemeClasses/ThemeInfo.cs`:
`ThemeInfo.cs`:

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

Expand Down Expand Up @@ -134,57 +136,14 @@ The following `ThemeInfo` C# class is placed in a folder named `UIThemeClasses`

:::moniker-end

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

Wrap the markup of the `Routes` component in a [`CascadingValue`](xref:Microsoft.AspNetCore.Components.CascadingValue%601) component to specify theme information (`ThemeInfo`) as a cascading value for all of the app's components.

`Components/Routes.razor`:

```razor
@using BlazorSample.UIThemeClasses

<CascadingValue Value="@theme">
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router>
</CascadingValue>

@code {
private ThemeInfo theme = new() { ButtonClass = "btn-success" };
}
```

In the `App` component (`Components/App.razor`), adopt an interactive render mode for the entire app. The following example adopts interactive server-side rendering (interactive SSR):

```razor
<Routes @rendermode="InteractiveServer" />
```

> [!NOTE]
> The alternative to adopting an interactive render mode for the entire app via the `Routes` component is to specify a *root-level cascading value* for the theme information (`ThemeInfo`) as a service. For more information, see the [Root-level cascading values](#root-level-cascading-values) section.
>
> The following example demonstrates passing theme information in the app's `Program` file:
>
> ```csharp
> builder.Services.AddCascadingValue(sp =>
> new ThemeInfo() { ButtonClass = "btn-primary" });
> ```
>
> If you adopt this approach, you don't need to set the render mode for the entire app on the `Routes` component or use a [`CascadingValue`](xref:Microsoft.AspNetCore.Components.CascadingValue%601) component in the `Routes` component to pass the theme information to [cascading parameters](#cascadingparameter-attribute).
>
> For more information, see the [Cascading values/parameters and render mode boundaries](#cascading-valuesparameters-and-render-mode-boundaries) section.

:::moniker-end

:::moniker range="< aspnetcore-8.0"

The following [layout component](xref:blazor/components/layouts) specifies theme information (`ThemeInfo`) as a cascading value for all components that make up the layout body of the <xref:Microsoft.AspNetCore.Components.LayoutComponentBase.Body> property. `ButtonClass` is assigned a value of [`btn-success`](https://getbootstrap.com/docs/5.0/components/buttons/), which is a Bootstrap button style. Any descendent component in the component hierarchy can use the `ButtonClass` property through the `ThemeInfo` cascading value.

`MainLayout.razor`:

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

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Layout/MainLayout.razor":::

:::moniker-end

:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
Expand All @@ -211,51 +170,65 @@ The following [layout component](xref:blazor/components/layouts) specifies theme

:::moniker-end

## `[CascadingParameter]` attribute
:::moniker range=">= aspnetcore-8.0"

To make use of cascading values, descendent components declare cascading parameters using the [`[CascadingParameter]` attribute](xref:Microsoft.AspNetCore.Components.CascadingParameterAttribute). Cascading values are bound to cascading parameters **by type**. Cascading multiple values of the same type is covered in the [Cascade multiple values](#cascade-multiple-values) section later in this article.
Blazor Web Apps provide alternative approaches for cascading values that apply more broadly to the app than furnishing them via a layout:

The following component binds the `ThemeInfo` cascading value to a cascading parameter, optionally using the same name of `ThemeInfo`. The parameter is used to set the CSS class for the **`Increment Counter (Themed)`** button.
* Wrap the markup of the `Routes` component in a [`CascadingValue`](xref:Microsoft.AspNetCore.Components.CascadingValue%601) component to specify the data as a cascading value for all of the app's components.

`ThemedCounter.razor`:
The following example cascades `ThemeInfo` data from the `Routes` component.

:::moniker range=">= aspnetcore-8.0"
`Routes.razor`:

```razor
@page "/themed-counter"
@rendermode InteractiveServer
@using BlazorSample.UIThemeClasses
```razor
<CascadingValue Value="@theme">
<Router ...>
<Found ...>
...
</Found>
</Router>
</CascadingValue>

<h1>Themed Counter</h1>
@code {
private ThemeInfo theme = new() { ButtonClass = "btn-success" };
}
```

<p>Current count: @currentCount</p>
In the `App` component (`Components/App.razor`), adopt an interactive render mode for the entire app. The following example adopts interactive server-side rendering (interactive SSR):

<p>
<button @onclick="IncrementCount">
Increment Counter (Unthemed)
</button>
</p>
```razor
<Routes @rendermode="InteractiveServer" />
```

<p>
<button
class="btn @(ThemeInfo is not null ? ThemeInfo.ButtonClass : string.Empty)"
@onclick="IncrementCount">
Increment Counter (Themed)
</button>
</p>
* Specify a *root-level cascading value* as a service by calling the <xref:Microsoft.Extensions.DependencyInjection.CascadingValueServiceCollectionExtensions.AddCascadingValue%2A> extension method on the service collection builder.

@code {
private int currentCount = 0;
The following example cascades `ThemeInfo` data from the `Program` file.

[CascadingParameter]
protected ThemeInfo? ThemeInfo { get; set; }
`Program.cs`

private void IncrementCount()
{
currentCount++;
}
}
```
```csharp
builder.Services.AddCascadingValue(sp =>
new ThemeInfo() { ButtonClass = "btn-primary" });
```

For more information, see the following sections of this article:

* [Root-level cascading values](#root-level-cascading-values)
* [Cascading values/parameters and render mode boundaries](#cascading-valuesparameters-and-render-mode-boundaries)

:::moniker-end

## `[CascadingParameter]` attribute

To make use of cascading values, descendent components declare cascading parameters using the [`[CascadingParameter]` attribute](xref:Microsoft.AspNetCore.Components.CascadingParameterAttribute). Cascading values are bound to cascading parameters **by type**. Cascading multiple values of the same type is covered in the [Cascade multiple values](#cascade-multiple-values) section later in this article.

The following component binds the `ThemeInfo` cascading value to a cascading parameter, optionally using the same name of `ThemeInfo`. The parameter is used to set the CSS class for the **`Increment Counter (Themed)`** button.

`ThemedCounter.razor`:

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

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/ThemedCounter.razor":::

:::moniker-end

Expand Down
12 changes: 9 additions & 3 deletions aspnetcore/blazor/components/control-head-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ The following example sets the page's title and description using Razor.

`ControlHeadContent.razor`:

:::moniker range=">= aspnetcore-7.0"
:::moniker range=">= aspnetcore-8.0"

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/ControlHeadContent.razor":::

:::moniker-end

:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/control-head-content/ControlHeadContent.razor" highlight="13,15-17":::

Expand Down Expand Up @@ -117,13 +123,13 @@ When the [`::after` pseudo-selector](https://developer.mozilla.org/docs/Web/CSS/

*This section only applies to Blazor WebAssembly apps.*

In Blazor apps created from Blazor WebAssembly project template, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`.
In Blazor apps created from the Blazor WebAssembly Standalone App project template, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`.

:::moniker-end

:::moniker range="< aspnetcore-8.0"

In Blazor apps created from Blazor project templates, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`.
In Blazor apps created from a Blazor project template, the `NotFound` component template in the `App` component (`App.razor`) sets the page title to `Not found`.

:::moniker-end

Expand Down
Loading