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.

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

Sample snippet updates #31236

Merged
merged 2 commits into from
Dec 12, 2023
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
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,13 @@ The following `ThemeInfo` C# class is placed in a folder named `UIThemeClasses`

`UIThemeClasses/ThemeInfo.cs`:

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

:::code language="csharp" source="~/../blazor-samples/8.0/BlazorSample_WebAssembly/UIThemeClasses/ThemeInfo.cs":::

:::moniker-end

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

:::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/UIThemeClasses/ThemeInfo.cs":::

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,28 +52,42 @@ This demonstration allows you to:

In the following `PeopleExample` component, each iteration of adding a person in `OnTimerCallback` results in Blazor rebuilding the entire collection. The page's focus remains on the *same index* position of `<input>` elements, so the focus shifts each time a person is added. *Shifting the focus away from what the user selected isn't desirable behavior.* After demonstrating the poor behavior with the following component, the [`@key`](xref:mvc/views/razor#key) directive attribute is used to improve the user's experience.

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

:::moniker range=">= aspnetcore-7.0"
`People.razor`:

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

:::moniker-end

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

`PeopleExample.razor`:

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/element-component-model-relationships/PeopleExample.razor":::

:::moniker-end

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

`PeopleExample.razor`:

:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/element-component-model-relationships/PeopleExample.razor":::

:::moniker-end

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

`PeopleExample.razor`:

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/element-component-model-relationships/PeopleExample.razor":::

:::moniker-end

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

`PeopleExample.razor`:

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/element-component-model-relationships/PeopleExample.razor":::

:::moniker-end
Expand Down
18 changes: 16 additions & 2 deletions aspnetcore/blazor/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -1265,28 +1265,42 @@ Strings are normally rendered using DOM text nodes, which means that any markup

The following example shows using the <xref:Microsoft.AspNetCore.Components.MarkupString> type to add a block of static HTML content to the rendered output of a component.

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

:::moniker range=">= aspnetcore-7.0"
`MarkupStrings.razor`:

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

:::moniker-end

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

`MarkupStringExample.razor`:

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/index/MarkupStringExample.razor":::

:::moniker-end

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

`MarkupStringExample.razor`:

:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/index/MarkupStringExample.razor":::

:::moniker-end

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

`MarkupStringExample.razor`:

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/index/MarkupStringExample.razor":::

:::moniker-end

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

`MarkupStringExample.razor`:

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/index/MarkupStringExample.razor":::

:::moniker-end
Expand Down
124 changes: 56 additions & 68 deletions aspnetcore/blazor/components/layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,36 +144,29 @@ The content of the following `Episodes` component is inserted into the `DoctorWh

The following rendered HTML markup is produced by the preceding `DoctorWhoLayout` and `Episodes` component. Extraneous markup doesn't appear in order to focus on the content provided by the two components involved:

* The **Doctor Who&trade; Episode Database** heading (`<h1>...</h1>`) in the header (`<header>...</header>`), navigation bar (`<nav>...</nav>`), and trademark information element (`<div>...</div>`) in the footer (`<footer>...</footer>`) come from the `DoctorWhoLayout` component.
* The **Episodes** heading (`<h2>...</h2>`) and episode list (`<ul>...</ul>`) come from the `Episodes` component.
* The H1 "database" heading (`<h1>...</h1>`) in the header (`<header>...</header>`), navigation bar (`<nav>...</nav>`), and trademark information in the footer (`<footer>...</footer>`) come from the `DoctorWhoLayout` component.
* The H2 "episodes" heading (`<h2>...</h2>`) and episode list (`<ul>...</ul>`) come from the `Episodes` component.

```html
<body>
<div id="app">
<header>
<h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
<a href="main-list">Main Episode List</a>
<a href="search">Search</a>
<a href="new">Add Episode</a>
</nav>

<h2>Episodes</h2>

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

<footer>
Doctor Who is a registered trademark of the BBC.
https://www.doctorwho.tv/
</footer>
</div>
</body>
<header>
<h1 ...>...</h1>
</header>

<nav>
...
</nav>

<h2>...</h2>

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

<footer>
...
</footer>
```

Specifying the layout directly in a component overrides a *default layout*:
Expand Down Expand Up @@ -312,48 +305,43 @@ The `ProductionsLayout` component contains the top-level layout elements, where
The following rendered HTML markup is produced by the preceding nested layout. Extraneous markup doesn't appear in order to focus on the nested content provided by the three components involved:

* The header (`<header>...</header>`), production navigation bar (`<nav>...</nav>`), and footer (`<footer>...</footer>`) elements and their content come from the `ProductionsLayout` component.
* The **Doctor Who&trade; Episode Database** heading (`<h1>...</h1>`), episode navigation bar (`<nav>...</nav>`), and trademark information element (`<div>...</div>`) come from the `DoctorWhoLayout` component.
* The **Episodes** heading (`<h2>...</h2>`) and episode list (`<ul>...</ul>`) come from the `Episodes` component.
* The H1 "database" heading (`<h1>...</h1>`), episode navigation bar (`<nav>...</nav>`), and trademark information (`<div>...</div>`) come from the `DoctorWhoLayout` component.
* The H2 "episodes" heading (`<h2>...</h2>`) and episode list (`<ul>...</ul>`) come from the `Episodes` component.

```html
<body>
<div id="app">
<header>
<h1>Productions</h1>
</header>

<nav>
<a href="main-production-list">Main Production List</a>
<a href="production-search">Search</a>
<a href="new-production">Add Production</a>
</nav>

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
<a href="main-episode-list">Main Episode List</a>
<a href="episode-search">Search</a>
<a href="new-episode">Add Episode</a>
</nav>

<h2>Episodes</h2>

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

<div>
Doctor Who is a registered trademark of the BBC.
https://www.doctorwho.tv/
</div>

<footer>
Footer of Productions Layout
</footer>
</div>
</body>
<header>
...
</header>

<nav>
<a href="main-production-list">Main Production List</a>
<a href="production-search">Search</a>
<a href="new-production">Add Production</a>
</nav>

<h1>...</h1>

<nav>
<a href="main-episode-list">Main Episode List</a>
<a href="episode-search">Search</a>
<a href="new-episode">Add Episode</a>
</nav>

<h2>...</h2>

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

<div>
...
</div>

<footer>
...
</footer>
```

## Share a Razor Pages layout with integrated components
Expand Down
16 changes: 2 additions & 14 deletions aspnetcore/blazor/file-uploads.md
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ else

The following example processes file bytes and doesn't send files to a destination outside of the app. For an example of a Razor component that sends a file to a server or service, see the following sections:

* [Upload files to a server with client-side rendering](#upload-files-to-a-server-with-client-side-rendering)
* [Upload files to a server](#upload-files-to-a-server)
* [Upload files to an external service](#upload-files-to-an-external-service)

:::moniker range=">= aspnetcore-8.0"
Expand Down Expand Up @@ -757,19 +757,7 @@ In the preceding code, <xref:System.IO.Path.GetRandomFileName%2A> is called to g

The server app must register controller services and map controller endpoints. For more information, see <xref:mvc/controllers/routing>.

## Upload files to a server with client-side rendering

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

*This section applies to client-side rendered Razor components in either a Blazor Web App or a standalone Blazor WebAssembly app.*

:::moniker-end

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

*This section applies to hosted Blazor WebAssembly apps.*

:::moniker-end
## Upload files to a server

The following example demonstrates uploading files to a web API controller.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Starship = starship;</code></pre>
&lt;tvshow&gt;
&lt;metadata&gt;
&lt;series&gt;Dr. Who&lt;/series&gt;
&lt;title&gt;The Sun Makers&lt;/title&gt;
&lt;title&gt;The Sunmakers&lt;/title&gt;
&lt;airdate&gt;11/26/1977&lt;/airdate&gt;
&lt;episodes&gt;4&lt;/episodes&gt;
&lt;/metadata&gt;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<tvshow>
<metadata>
<series>Dr. Who</series>
<title>The Sun Makers</title>
<title>The Sunmakers</title>
<airdate>11/26/1977</airdate>
<episodes>4</episodes>
</metadata>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Starship = starship;</code></pre>
&lt;tvshow&gt;
&lt;metadata&gt;
&lt;series&gt;Dr. Who&lt;/series&gt;
&lt;title&gt;The Sun Makers&lt;/title&gt;
&lt;title&gt;The Sunmakers&lt;/title&gt;
&lt;airdate&gt;11/26/1977&lt;/airdate&gt;
&lt;episodes&gt;4&lt;/episodes&gt;
&lt;/metadata&gt;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<tvshow>
<metadata>
<series>Dr. Who</series>
<title>The Sun Makers</title>
<title>The Sunmakers</title>
<airdate>11/26/1977</airdate>
<episodes>4</episodes>
</metadata>
Expand Down