Skip to content

Commit

Permalink
Snippet cross-links 8.0 (#31268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guardrex
guardrex authored Dec 19, 2023
1 parent 7efe769 commit 617a126
Show file tree
Hide file tree
Showing 15 changed files with 935 additions and 239 deletions.
141 changes: 57 additions & 84 deletions aspnetcore/blazor/components/cascading-values-and-parameters.md
View file
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
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

0 comments on commit 617a126

Please sign in to comment.