From be1a8f6a9d03e3211a8f4f6ff3f23ce61816b4e2 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 20 Dec 2023 10:10:08 -0500 Subject: [PATCH 1/2] Snippet cross-links 8.0 (2) --- aspnetcore/blazor/advanced-scenarios.md | 3 +- aspnetcore/blazor/blazor-ef-core.md | 2 + .../cascading-values-and-parameters.md | 5 +- .../blazor/components/control-head-content.md | 2 + aspnetcore/blazor/components/data-binding.md | 4 + .../blazor/components/dynamiccomponent.md | 4 + .../element-component-model-relationships.md | 6 + .../blazor/components/event-handling.md | 5 +- .../blazor/components/generic-type-support.md | 2 + aspnetcore/blazor/components/index.md | 4 + aspnetcore/blazor/components/integration.md | 4 + aspnetcore/blazor/components/layouts.md | 4 + aspnetcore/blazor/components/lifecycle.md | 6 +- .../components/overwriting-parameters.md | 6 + aspnetcore/blazor/components/prerender.md | 10 +- aspnetcore/blazor/components/quickgrid.md | 7 +- aspnetcore/blazor/components/rendering.md | 4 +- aspnetcore/blazor/components/sections.md | 6 + ...lat-attributes-and-arbitrary-parameters.md | 2 + .../components/synchronization-context.md | 2 + .../blazor/components/templated-components.md | 6 + .../blazor/components/virtualization.md | 5 +- aspnetcore/blazor/debug.md | 6 +- aspnetcore/blazor/file-downloads.md | 4 +- aspnetcore/blazor/file-uploads.md | 22 +-- aspnetcore/blazor/forms/binding.md | 13 +- aspnetcore/blazor/forms/index.md | 22 +-- aspnetcore/blazor/forms/input-components.md | 55 +++--- aspnetcore/blazor/forms/troubleshoot.md | 3 +- aspnetcore/blazor/forms/validation.md | 12 +- .../fundamentals/dependency-injection.md | 25 --- .../blazor/fundamentals/environments.md | 2 + aspnetcore/blazor/fundamentals/index.md | 21 ++- aspnetcore/blazor/fundamentals/logging.md | 1 - aspnetcore/blazor/fundamentals/signalr.md | 2 + aspnetcore/blazor/fundamentals/startup.md | 4 + .../blazor/globalization-localization.md | 6 +- aspnetcore/blazor/images.md | 2 - ...cation-client-and-server-net31-or-later.md | 32 ++-- ...ocation-client-and-server-net6-or-later.md | 26 ++- ...ocation-client-and-server-net7-or-later.md | 20 ++- ...ocation-client-and-server-net8-or-later.md | 12 +- aspnetcore/blazor/includes/location-client.md | 10 +- aspnetcore/blazor/includes/location-server.md | 6 +- .../call-dotnet-from-javascript.md | 10 -- .../call-javascript-from-dotnet.md | 14 +- .../import-export-interop.md | 2 + .../javascript-interoperability/index.md | 46 +---- aspnetcore/blazor/performance.md | 158 +----------------- aspnetcore/blazor/security/index.md | 4 - aspnetcore/blazor/security/server/index.md | 3 - aspnetcore/blazor/state-management.md | 6 +- 52 files changed, 260 insertions(+), 388 deletions(-) diff --git a/aspnetcore/blazor/advanced-scenarios.md b/aspnetcore/blazor/advanced-scenarios.md index d9951238551c..3940423187e9 100644 --- a/aspnetcore/blazor/advanced-scenarios.md +++ b/aspnetcore/blazor/advanced-scenarios.md @@ -17,6 +17,8 @@ This article describes the advanced scenario for building Blazor render trees ma > [!WARNING] > Use of to create components is an *advanced scenario*. A malformed component (for example, an unclosed markup tag) can result in undefined behavior. Undefined behavior includes broken content rendering, loss of app features, and ***compromised security***. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Manually build a render tree (`RenderTreeBuilder`) provides methods for manipulating components and elements, including building components manually in C# code. @@ -37,7 +39,6 @@ In methods wi ```razor @page "/built-content" -@rendermode InteractiveServer

Build a component

diff --git a/aspnetcore/blazor/blazor-ef-core.md b/aspnetcore/blazor/blazor-ef-core.md index 60c62d5fcb1d..46dcc2d2fb1d 100644 --- a/aspnetcore/blazor/blazor-ef-core.md +++ b/aspnetcore/blazor/blazor-ef-core.md @@ -19,6 +19,8 @@ Server-side Blazor is a stateful app framework. The app maintains an ongoing con > [!NOTE] > This article addresses EF Core in server-side Blazor apps. Blazor WebAssembly apps run in a WebAssembly sandbox that prevents most direct database connections. Running EF Core in Blazor WebAssembly is beyond the scope of this article. +[!INCLUDE[](~/blazor/includes/location-server.md)] + ## Sample app The sample app was built as a reference for server-side Blazor apps that use EF Core. The sample app includes a grid with sorting and filtering, delete, add, and update operations. The sample demonstrates use of EF Core to handle optimistic concurrency. diff --git a/aspnetcore/blazor/components/cascading-values-and-parameters.md b/aspnetcore/blazor/components/cascading-values-and-parameters.md index c56e50db71b0..edcb2af2e831 100644 --- a/aspnetcore/blazor/components/cascading-values-and-parameters.md +++ b/aspnetcore/blazor/components/cascading-values-and-parameters.md @@ -19,6 +19,8 @@ This article explains how to flow data from an ancestor Razor component to desce > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from the `CascadingType?`, `@ActiveTab?`, `RenderFragment?`, `ITab?`, `TabSet?`, and `string?` types in the article's examples. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + :::moniker range=">= aspnetcore-8.0" ## Root-level cascading values @@ -57,7 +59,6 @@ The following `Daleks` component displays the cascaded values. ```razor @page "/daleks" -@rendermode InteractiveServer

Root-level cascading value registration example

@@ -194,6 +195,8 @@ Blazor Web Apps provide alternative approaches for cascading values that apply m } ``` + + 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 diff --git a/aspnetcore/blazor/components/control-head-content.md b/aspnetcore/blazor/components/control-head-content.md index cec7644362a2..3cd733bcf225 100644 --- a/aspnetcore/blazor/components/control-head-content.md +++ b/aspnetcore/blazor/components/control-head-content.md @@ -14,6 +14,8 @@ uid: blazor/components/control-head-content Razor components can modify the HTML `` element content of a page, including setting the page's title (`` element) and modifying metadata (`<meta>` elements). +[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] + ## Control `<head>` content in a Razor component Specify the page's title with the <xref:Microsoft.AspNetCore.Components.Web.PageTitle> component, which enables rendering an HTML `<title>` element to a [`HeadOutlet` component](#headoutlet-component). diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md index 5328e5933e20..e15581a88600 100644 --- a/aspnetcore/blazor/components/data-binding.md +++ b/aspnetcore/blazor/components/data-binding.md @@ -14,6 +14,10 @@ uid: blazor/components/data-binding This article explains data binding features for Razor components and DOM elements in Blazor apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Binding features + Razor components provide data binding features with the [`@bind`](xref:mvc/views/razor#bind) Razor directive attribute with a field, property, or Razor expression value. The following example binds: diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md index 16dd256da618..00373f4bb9ab 100644 --- a/aspnetcore/blazor/components/dynamiccomponent.md +++ b/aspnetcore/blazor/components/dynamiccomponent.md @@ -16,6 +16,10 @@ By [Dave Brock](https://twitter.com/daveabrock) Use the built-in <xref:Microsoft.AspNetCore.Components.DynamicComponent> component to render components by type. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] + +## Dynamic components + A <xref:Microsoft.AspNetCore.Components.DynamicComponent> is useful for rendering components without iterating through possible types or using conditional logic. For example, <xref:Microsoft.AspNetCore.Components.DynamicComponent> can render a component based on a user selection from a dropdown list. In the following example: diff --git a/aspnetcore/blazor/components/element-component-model-relationships.md b/aspnetcore/blazor/components/element-component-model-relationships.md index d0718ae31ab2..4bc11d8c9027 100644 --- a/aspnetcore/blazor/components/element-component-model-relationships.md +++ b/aspnetcore/blazor/components/element-component-model-relationships.md @@ -10,6 +10,12 @@ uid: blazor/components/key --- # Retain element, component, and model relationships in ASP.NET Core Blazor +This article explains how to use the `@key` directive attribute to retain element, component, and model relationships when rendering and the elements or components subsequently change. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Use of the `@key` directive attribute + When rendering a list of elements or components and the elements or components subsequently change, Blazor must decide which of the previous elements or components are retained and how model objects should map to them. Normally, this process is automatic and sufficient for general rendering, but there are often cases where controlling the process using the [`@key`](xref:mvc/views/razor#key) directive attribute is required. Consider the following example that demonstrates a collection mapping problem that's solved by using [`@key`](xref:mvc/views/razor#key). diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md index 4cec6c5f6d94..ca2a4579dfc2 100644 --- a/aspnetcore/blazor/components/event-handling.md +++ b/aspnetcore/blazor/components/event-handling.md @@ -14,6 +14,10 @@ uid: blazor/components/event-handling This article explains Blazor's event handling features, including event argument types, event callbacks, and managing default browser events. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Delegate event handlers + Specify delegate event handlers in Razor component markup with [`@on{DOM EVENT}="{DELEGATE}"`](xref:mvc/views/razor#onevent) Razor syntax: * The `{DOM EVENT}` placeholder is a [DOM event](https://developer.mozilla.org/docs/Web/Events) (for example, `click`). @@ -659,7 +663,6 @@ The following parent-child example demonstrates the technique. ```razor @page "/parent-child-2" -@rendermode InteractiveServer <Child2 OnClickCallback="@(async (value) => { await Task.Yield(); messageText = value; })" /> diff --git a/aspnetcore/blazor/components/generic-type-support.md b/aspnetcore/blazor/components/generic-type-support.md index 730879c7a9f2..1652a18ecc47 100644 --- a/aspnetcore/blazor/components/generic-type-support.md +++ b/aspnetcore/blazor/components/generic-type-support.md @@ -14,6 +14,8 @@ uid: blazor/components/generic-type-support This article describes generic type support in Razor components. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Generic type parameter support The [`@typeparam`](xref:mvc/views/razor#typeparam) directive declares a [generic type parameter](/dotnet/csharp/programming-guide/generics/generic-type-parameters) for the generated component class: diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index addc00529048..ee4edfabd819 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -14,6 +14,10 @@ uid: blazor/components/index This article explains how to create and use Razor components in Blazor apps, including guidance on Razor syntax, component naming, namespaces, and component parameters. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Razor components + Blazor apps are built using *Razor components*, informally known as *Blazor components* or only *components*. A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects, and used in MVC and Razor Pages apps. Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way. diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index 08cbe3810d97..0fffdd55fef6 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -18,6 +18,10 @@ uid: blazor/components/integration This article explains Razor component integration scenarios for ASP.NET Core apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net8-or-later.md)] + +## Razor component integration + Razor components can be integrated into Razor Pages, MVC, and other types of ASP.NET Core apps. Razor components can also be integrated into any web app, including apps not based on ASP.NET Core, as [custom HTML elements](xref:blazor/components/js-spa-frameworks#blazor-custom-elements). Use the guidance in the following sections depending on the project's requirements: diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 3002cefa25e3..fa66045db036 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -14,6 +14,10 @@ uid: blazor/components/layouts This article explains how to create reusable layout components for Blazor apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Usefulness of Blazor layouts + Some app elements, such as menus, copyright messages, and company logos, are usually part of app's overall presentation. Placing a copy of the markup for these elements into all of the components of an app isn't efficient. Every time that one of these elements is updated, every component that uses the element must be updated. This approach is costly to maintain and can lead to inconsistent content if an update is missed. *Layouts* solve these problems. A Blazor layout is a Razor component that shares markup with components that reference it. Layouts can use [data binding](xref:blazor/components/data-binding), [dependency injection](xref:blazor/fundamentals/dependency-injection), and other features of components. diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md index 7d17a33cbe48..8f3353dd0318 100644 --- a/aspnetcore/blazor/components/lifecycle.md +++ b/aspnetcore/blazor/components/lifecycle.md @@ -14,14 +14,16 @@ uid: blazor/components/lifecycle This article explains the ASP.NET Core Razor component lifecycle and how to use lifecycle events. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Lifecycle events + The Razor component processes Razor component lifecycle events in a set of synchronous and asynchronous lifecycle methods. The lifecycle methods can be overridden to perform additional operations in components during component initialization and rendering. This article simplifies component lifecycle event processing in order to clarify complex framework logic. You may need to access the [`ComponentBase` reference source](https://github.com/dotnet/aspnetcore/blob/main/src/Components/Components/src/ComponentBase.cs) to integrate custom event processing with Blazor's lifecycle event processing. Code comments in the reference source include additional remarks on lifecycle event processing that don't appear in this article or in the [API documentation](/dotnet/api/). Blazor's lifecycle event processing has changed over time and is subject to change without notice each release. [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] -## Lifecycle events - The following simplified diagrams illustrate Razor component lifecycle event processing. The C# methods associated with the lifecycle events are defined with examples in the following sections of this article. Component lifecycle events: diff --git a/aspnetcore/blazor/components/overwriting-parameters.md b/aspnetcore/blazor/components/overwriting-parameters.md index a17ec8b54c5d..8c3e16f4d3ef 100644 --- a/aspnetcore/blazor/components/overwriting-parameters.md +++ b/aspnetcore/blazor/components/overwriting-parameters.md @@ -10,6 +10,12 @@ uid: blazor/components/overwriting-parameters --- # Avoid overwriting parameters in ASP.NET Core Blazor +This article explains how to avoid overwriting parameters in Blazor apps during rerendering. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Overwritten parameters + The Blazor framework generally imposes safe parent-to-child parameter assignment: * Parameters aren't overwritten unexpectedly. diff --git a/aspnetcore/blazor/components/prerender.md b/aspnetcore/blazor/components/prerender.md index 8f4fecb19b2a..99ebc1ed6772 100644 --- a/aspnetcore/blazor/components/prerender.md +++ b/aspnetcore/blazor/components/prerender.md @@ -25,17 +25,18 @@ This article explains Razor component prerendering scenarios for server-rendered *Prerendering* is the process of initially rendering page content on the server without enabling event handlers for rendered controls. The server outputs the HTML UI of the page as soon as possible in response to the initial request, which makes the app feel more responsive to users. Prerendering can also improve [Search Engine Optimization (SEO)](https://developer.mozilla.org/docs/Glossary/SEO) by rendering content for the initial HTTP response that search engines use to calculate page rank. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net8-or-later.md)] + ## Persist prerendered state Without persisting prerendered state, state used during prerendering is lost and must be recreated when the app is fully loaded. If any state is created asynchronously, the UI may flicker as the prerendered UI is replaced when the component is rerendered. Consider the following `PrerenderedCounter1` counter component. The component sets an initial random counter value during prerendering in [`OnInitialized` lifecycle method](xref:blazor/components/lifecycle#component-initialization-oninitializedasync). After the SignalR connection to the client is established, the component rerenders, and the initial count value is replaced when `OnInitialized` executes a second time. -`Components/Pages/PrerenderedCounter1.razor`: +`PrerenderedCounter1.razor`: ```razor @page "/prerendered-counter-1" -@rendermode InteractiveServer @inject ILogger<PrerenderedCounter1> Logger <PageTitle>Prerendered Counter 1</PageTitle> @@ -121,13 +122,12 @@ The following example demonstrates the general pattern: } ``` -The following counter component example persists counter state during prerendering and retrieves the state to initialize the component. +The following counter component example persists counter state during prerendering and retrieves the state to initialize the component. -`Components/Pages/PrerenderedCounter2.razor`: +`PrerenderedCounter2.razor`: ```razor @page "/prerendered-counter-2" -@rendermode InteractiveServer @implements IDisposable @inject ILogger<PrerenderedCounter2> Logger @inject PersistentComponentState ApplicationState diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index f90226984684..e8c96f8e6b49 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -18,6 +18,8 @@ uid: blazor/components/quickgrid The `QuickGrid` component is a Razor component for quickly and efficiently displaying data in tabular form. `QuickGrid` provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. `QuickGrid` is highly optimized and uses advanced techniques to achieve optimal rendering performance. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net7-or-later.md)] + ## Package Add a package reference for the [`Microsoft.AspNetCore.Components.QuickGrid`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid) package. @@ -52,11 +54,12 @@ To implement a `QuickGrid` component: For example, add the following component to render a grid. +The component assumes that the Interactive Server render mode (`InteractiveServer`) is inherited from a parent component or applied globally to the app, which enables interactive features. For the following example, the only interactive feature is sortable columns. + `QuickGridExample.razor`: ```razor @page "/quickgrid-example" -@rendermode InteractiveServer @using Microsoft.AspNetCore.Components.QuickGrid <QuickGrid Items="@people"> @@ -80,8 +83,6 @@ For example, add the following component to render a grid. } ``` -The preceding example specifies interactive server-side rendering (interactive SSR) with `@rendermode InteractiveServer`, which enables the `QuickGrid`'s interactive features. In this case, the only interactive feature is sortable columns. - For an example that uses an <xref:System.Linq.IQueryable> with Entity Framework Core as the queryable data source, see the [`SampleQuickGridComponent` component in the ASP.NET Core Basic Test App (`dotnet/aspnetcore` GitHub repository)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor). [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] diff --git a/aspnetcore/blazor/components/rendering.md b/aspnetcore/blazor/components/rendering.md index 93d373fef4bd..035e54ecccb1 100644 --- a/aspnetcore/blazor/components/rendering.md +++ b/aspnetcore/blazor/components/rendering.md @@ -14,10 +14,12 @@ uid: blazor/components/rendering This article explains Razor component rendering in ASP.NET Core Blazor apps, including when to call <xref:Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged%2A> to manually trigger a component to render. -Components *must* render when they're first added to the component hierarchy by a parent component. This is the only time that a component must render. Components *may* render at other times according to their own logic and conventions. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] ## Rendering conventions for `ComponentBase` +Components *must* render when they're first added to the component hierarchy by a parent component. This is the only time that a component must render. Components *may* render at other times according to their own logic and conventions. + By default, Razor components inherit from the <xref:Microsoft.AspNetCore.Components.ComponentBase> base class, which contains logic to trigger rerendering at the following times: * After applying an updated set of [parameters](xref:blazor/components/data-binding#binding-with-component-parameters) from a parent component. diff --git a/aspnetcore/blazor/components/sections.md b/aspnetcore/blazor/components/sections.md index 45c76fc0d727..c92f99424808 100644 --- a/aspnetcore/blazor/components/sections.md +++ b/aspnetcore/blazor/components/sections.md @@ -16,6 +16,12 @@ uid: blazor/components/sections --> +This article explains how to control the content in a Razor component from a child Razor component. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net8-or-later.md)] + +## Blazor sections + To control the content in a Razor component from a child Razor component, Blazor supports *sections* using the following built-in components: * <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet>: Renders content provided by <xref:Microsoft.AspNetCore.Components.Sections.SectionContent> components with matching <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet.SectionName%2A> or <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet.SectionId%2A> arguments. Two or more <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet> components can't have the same <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet.SectionName%2A> or <xref:Microsoft.AspNetCore.Components.Sections.SectionOutlet.SectionId%2A>. diff --git a/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md b/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md index 2aa0aed5ce61..612bc42759ef 100644 --- a/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md +++ b/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md @@ -12,6 +12,8 @@ uid: blazor/components/attribute-splatting Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then *splatted* onto an element when the component is rendered using the [`@attributes`](xref:mvc/views/razor#attributes) Razor directive attribute. This scenario is useful for defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an `<input>` that supports many parameters. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Attribute splatting In the following `Splat` component: diff --git a/aspnetcore/blazor/components/synchronization-context.md b/aspnetcore/blazor/components/synchronization-context.md index fa6c69e79759..c96a4521670c 100644 --- a/aspnetcore/blazor/components/synchronization-context.md +++ b/aspnetcore/blazor/components/synchronization-context.md @@ -14,6 +14,8 @@ Blazor uses a synchronization context (<xref:System.Threading.SynchronizationCon Blazor's server-side synchronization context attempts to emulate a single-threaded environment so that it closely matches the WebAssembly model in the browser, which is single threaded. At any given point in time, work is performed on exactly one thread, which yields the impression of a single logical thread. No two operations execute concurrently. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Avoid thread-blocking calls Generally, don't call the following methods in components. The following methods block the execution thread and thus block the app from resuming work until the underlying <xref:System.Threading.Tasks.Task> is complete: diff --git a/aspnetcore/blazor/components/templated-components.md b/aspnetcore/blazor/components/templated-components.md index 8749bfee3692..bac2f399494b 100644 --- a/aspnetcore/blazor/components/templated-components.md +++ b/aspnetcore/blazor/components/templated-components.md @@ -12,6 +12,12 @@ uid: blazor/components/templated-components [!INCLUDE[](~/includes/not-latest-version.md)] +This article explains how templated components can accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Templated components + Templated components are components that receive one or more UI templates as parameters, which can be utilized in the rendering logic of the component. By using templated components, you can create higher-level components that are more reusable. A couple of examples include: * A table component that allows a user to specify templates for the table's header, rows, and footer. diff --git a/aspnetcore/blazor/components/virtualization.md b/aspnetcore/blazor/components/virtualization.md index 51a82fe82777..14eb4d4c4958 100644 --- a/aspnetcore/blazor/components/virtualization.md +++ b/aspnetcore/blazor/components/virtualization.md @@ -14,6 +14,10 @@ uid: blazor/components/virtualization This article explains how to use component virtualization in ASP.NET Core Blazor apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net5-or-later.md)] + +## Virtualization + Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support with the <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601> component. Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time. Use the <xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601> component when: @@ -195,7 +199,6 @@ EmptyContent.razor: ```razor @page "/empty-content" -@rendermode InteractiveServer <h1>Empty Content Example</h1> diff --git a/aspnetcore/blazor/debug.md b/aspnetcore/blazor/debug.md index 0d6c244c9890..748ef25df00a 100644 --- a/aspnetcore/blazor/debug.md +++ b/aspnetcore/blazor/debug.md @@ -181,13 +181,12 @@ Hosted Blazor WebAssembly: Breakpoints can also be hit in the server project. 1. Stop the debugger. -1. Add the following component to the server app. +1. Add the following component to the server app. The component assumes that the Interactive Server render mode (`InteractiveServer`) is inherited from a parent component or applied globally to the app. `Components/Pages/Counter2.razor`: ```razor @page "/counter-2" - @rendermode InteractiveServer <PageTitle>Counter 2</PageTitle> @@ -230,13 +229,12 @@ Breakpoints are **not** hit during app startup before the debug proxy is running Breakpoints can also be hit in the server project. 1. Stop the debugger. -1. Add the following component to the server app. +1. Add the following component to the server app. The component assumes that the Interactive Server render mode (`InteractiveServer`) is inherited from a parent component or applied globally to the app. `Components/Pages/Counter2.razor`: ```razor @page "/counter-2" - @rendermode InteractiveServer <PageTitle>Counter 2</PageTitle> diff --git a/aspnetcore/blazor/file-downloads.md b/aspnetcore/blazor/file-downloads.md index 60e93b65015b..19122a9e6c03 100644 --- a/aspnetcore/blazor/file-downloads.md +++ b/aspnetcore/blazor/file-downloads.md @@ -16,6 +16,8 @@ This article explains how to download files in Blazor apps. [!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] +## File downloads + Files can be downloaded from the app's own static assets or from any other location: * ASP.NET Core apps use [Static File Middleware](xref:fundamentals/static-files) to serve files to clients of server-side apps. @@ -93,7 +95,6 @@ The following component: ```razor @page "/file-download-1" -@rendermode InteractiveServer @using System.IO @inject IJSRuntime JS @@ -202,7 +203,6 @@ Change the port in the following example to match the localhost development port ```razor @page "/file-download-2" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>File Download Example 2</h1> diff --git a/aspnetcore/blazor/file-uploads.md b/aspnetcore/blazor/file-uploads.md index 02e56786ec12..caf144468535 100644 --- a/aspnetcore/blazor/file-uploads.md +++ b/aspnetcore/blazor/file-uploads.md @@ -16,6 +16,8 @@ This article explains how to upload files in Blazor with the <xref:Microsoft.Asp [!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +## File uploads + > [!WARNING] > Always follow security best practices when permitting users to upload files. For more information, see <xref:mvc/models/file-uploads#security-considerations>. @@ -149,7 +151,6 @@ Because the example uses the app's [environment](xref:blazor/fundamentals/enviro ```razor @page "/file-upload-1" -@rendermode InteractiveServer @inject ILogger<FileUpload1> Logger @inject IHostEnvironment Environment @@ -276,13 +277,14 @@ The following example processes file bytes and doesn't send files to a destinati * [Upload files to a server](#upload-files-to-a-server) * [Upload files to an external service](#upload-files-to-an-external-service) +The component assumes that the Interactive WebAssembly render mode (`InteractiveWebAssembly`) is inherited from a parent component or applied globally to the app. + :::moniker range=">= aspnetcore-8.0" `FileUpload1.razor`: ```razor @page "/file-upload-1" -@rendermode InteractiveWebAssembly @inject ILogger<FileUpload1> Logger <h3>Upload Files</h3> @@ -454,7 +456,6 @@ The following `FileUpload2` component: ```razor @page "/file-upload-2" -@rendermode InteractiveServer @using System.Net.Http.Headers @using System.Text.Json @inject IHttpClientFactory ClientFactory @@ -799,20 +800,15 @@ A security best practice for production apps is to avoid sending error messages :::moniker range=">= aspnetcore-8.0" -<!-- UPDATE 8.0 Ask the PU about the service - registrations because it seems odd to - be required to register an HttpClient - in the BWA's main project. Why can't - only the .Client project register it - like a standalone WASM app does? --> - In the Blazor Web App main project, add <xref:System.Net.Http.IHttpClientFactory> and related services in the project's `Program` file: ```csharp builder.Services.AddHttpClient(); ``` -For more information, see <xref:fundamentals/http-requests>. +The `HttpClient` services must be added to the main project because the client-side component is prerendered on the server. If you [disable prerendering for the following component](xref:blazor/components/render-modes#prerendering), you aren't required to provide the `HttpClient` services in the main app and don't need to add the preceding line to the main project. + +For more information on adding `HttpClient` services to an ASP.NET Core app, see <xref:fundamentals/http-requests>. The client project of a Blazor Web App must also register an <xref:System.Net.Http.HttpClient> for HTTP POST requests to a backend web API controller. Confirm or add the following to the client project's `Program` file: @@ -821,7 +817,7 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); ``` -Add the WebAssembly component rendering attribute to the top of the following component in a Blazor Web App: +Specify the Interactive WebAssembly render mode attribute at the top of the following component in a Blazor Web App: ```razor @rendermode InteractiveWebAssembly @@ -1162,7 +1158,6 @@ To use the following example in a test app: ```razor @page "/file-upload-3" -@rendermode InteractiveServer @inject ILogger<FileUpload3> Logger @inject IHostEnvironment Environment @@ -1352,7 +1347,6 @@ The following `FileUpload4` component shows the complete example. ```razor @page "/file-upload-4" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>File Upload Example</h1> diff --git a/aspnetcore/blazor/forms/binding.md b/aspnetcore/blazor/forms/binding.md index aa6deb53e6e8..44c01386407d 100644 --- a/aspnetcore/blazor/forms/binding.md +++ b/aspnetcore/blazor/forms/binding.md @@ -12,6 +12,12 @@ uid: blazor/forms/binding [!INCLUDE[](~/includes/not-latest-version.md)] +This article explains how to use binding in Blazor forms. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## `EditForm`/`EditContext` model + An <xref:Microsoft.AspNetCore.Components.Forms.EditForm> creates an <xref:Microsoft.AspNetCore.Components.Forms.EditContext> based on the assigned object as a [cascading value](xref:blazor/components/cascading-values-and-parameters) for other components in the form. The <xref:Microsoft.AspNetCore.Components.Forms.EditContext> tracks metadata about the edit process, including which form fields have been modified and the current validation messages. Assigning to either an <xref:Microsoft.AspNetCore.Components.Forms.EditForm.Model?displayProperty=nameWithType> or an <xref:Microsoft.AspNetCore.Components.Forms.EditForm.EditContext?displayProperty=nameWithType> can bind a form to data. ## Model binding @@ -236,7 +242,6 @@ The following example independently binds two forms to their models by form name ```razor @page "/starship-6" -@rendermode InteractiveServer @inject ILogger<Starship6> Logger <EditForm Model="@Model1" OnSubmit="@Submit1" FormName="Holodeck1"> @@ -283,9 +288,6 @@ The following example independently binds two forms to their models by form name The following guidance demonstrates how to nest and bind child forms. -<!-- UPDATE 8.0 At RTM or upon API browser updates, cross-link - Microsoft.AspNetCore.Components.Forms.Editor<T>. --> - The following ship details class (`ShipDetails`) holds a description and length for a subform. `ShipDetails.cs`: @@ -310,7 +312,7 @@ public class Ship } ``` -The following subform is used for editing values of the `ShipDetails` type. This is implemented by inheriting `Editor<T>` at the top of the component. `Editor<T>` ensures that the child component generates the correct form field names based on the model (`T`), where `T` in the following example is `ShipDetails`. +The following subform is used for editing values of the `ShipDetails` type. This is implemented by inheriting <xref:Microsoft.AspNetCore.Components.Forms.Editor%601> at the top of the component. <xref:Microsoft.AspNetCore.Components.Forms.Editor%601> ensures that the child component generates the correct form field names based on the model (`T`), where `T` in the following example is `ShipDetails`. `StarshipSubform.razor`: @@ -337,7 +339,6 @@ The main form is bound to the `Ship` class. The `StarshipSubform` component is u ```razor @page "/starship-7" -@rendermode InteractiveServer @inject ILogger<Starship7> Logger <EditForm Model="@Model" OnSubmit="@Submit" FormName="Starship7"> diff --git a/aspnetcore/blazor/forms/index.md b/aspnetcore/blazor/forms/index.md index f0abcc293e6d..20a1b9221d59 100644 --- a/aspnetcore/blazor/forms/index.md +++ b/aspnetcore/blazor/forms/index.md @@ -12,6 +12,12 @@ uid: blazor/forms/index [!INCLUDE[](~/includes/not-latest-version.md)] +This article explains how to use forms in Blazor. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Input components and forms + The Blazor framework supports forms and provides built-in input components: :::moniker range=">= aspnetcore-8.0" @@ -39,13 +45,12 @@ A project created from the Blazor project template includes the namespace by def :::moniker range=">= aspnetcore-8.0" -Standard interactive HTML forms with interactive server-side rendering (`@rendermode InteractiveServer`) are supported. Create a form using the normal HTML `<form>` tag and specify an `@onsubmit` handler for handling the submitted form request. +Standard HTML forms are supported. Create a form using the normal HTML `<form>` tag and specify an `@onsubmit` handler for handling the submitted form request. `StarshipPlainForm.razor`: ```razor @page "/starship-plain-form" -@rendermode InteractiveServer @inject ILogger<StarshipPlainForm> Logger <form method="post" @onsubmit="Submit" @formname="starship-plain-form"> @@ -108,7 +113,6 @@ A form is defined using the Blazor framework's <xref:Microsoft.AspNetCore.Compon ```razor @page "/starship-1" -@rendermode InteractiveServer @inject ILogger<Starship1> Logger <EditForm Model="@Model" OnSubmit="@Submit" FormName="Starship1"> @@ -205,7 +209,6 @@ In the next example, the preceding component is modified to create the form in t ```razor @page "/starship-2" -@rendermode InteractiveServer @inject ILogger<Starship2> Logger <EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship2"> @@ -290,8 +293,6 @@ For forms based on <xref:Microsoft.AspNetCore.Components.Forms.EditForm>, the <x For forms based on the HTML `<form>` element, manually add the <xref:Microsoft.AspNetCore.Components.Forms.AntiforgeryToken> component to the form: ```razor -@rendermode InteractiveServer - <form method="post" @onsubmit="Submit" @formname="starshipForm"> <AntiforgeryToken /> <input id="send" type="submit" value="Send" /> @@ -376,15 +377,6 @@ For guidance on using the `enhancedload` event to listen for enhanced page updat :::moniker range=">= aspnetcore-8.0" -Components are configured for interactive server-side rendering (interactive SSR) and enhanced navigation. For a client-side experience in a Blazor Web App, change the render mode in the `@rendermode` directive at the top of the component to either: - -* <xref:Microsoft.AspNetCore.Components.Web.RenderMode.InteractiveWebAssembly> for only client-side rendering (CSR) after prerendering. -* <xref:Microsoft.AspNetCore.Components.Web.RenderMode.InteractiveAuto> for CSR after interactive SSR, which operates while the Blazor app bundle downloads in the background and the .NET WebAssembly runtime starts on the client. - -If working with a standalone Blazor WebAssembly app, render modes aren't used. Blazor WebAssembly apps always run interactively on WebAssembly. The example interactive forms in this article function in a standalone Blazor WebAssembly app as long as the code doesn't make assumptions about running on the server instead of the client. You can remove the `@rendermode` directive from the component when using the example forms in a Blazor WebAssembly app. - -When using the Interactive WebAssembly or Interactive Auto render modes, keep in mind that all of the component code is compiled and sent to the client, where users can decompile and inspect it. Don't place private code, app secrets, or other sensitive information in client-rendered components. - Examples don't adopt enhanced form handling for form POST requests, but all of the examples can be updated to adopt the enhanced features by following the guidance in the [Enhanced form handling](#enhanced-form-handling) section. :::moniker-end diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index 023fe3a544d5..f7fcba82526d 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -12,6 +12,12 @@ uid: blazor/forms/input-components [!INCLUDE[](~/includes/not-latest-version.md)] +This article describes Blazor's built-in input components. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Input components + The Blazor framework provides built-in input components to receive and validate user input. The built-in input components in the following table are supported in an <xref:Microsoft.AspNetCore.Components.Forms.EditForm> with an <xref:Microsoft.AspNetCore.Components.Forms.EditContext>. :::moniker range=">= aspnetcore-7.0" @@ -82,37 +88,35 @@ The following `Starship` type, which is used in several of this article's exampl `Starship.cs`: -```csharp -using System.ComponentModel.DataAnnotations; +:::moniker range=">= aspnetcore-8.0" -public class Starship -{ - [Required] - [StringLength(16, ErrorMessage = "Id too long (16 character limit).")] - public string? Id { get; set; } +:::code language="csharp" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Starship.cs"::: - public string? Description { get; set; } +:::moniker-end - [Required] - public string? Classification { get; set; } +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 - [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")] - public int MaximumAccommodation { get; set; } +:::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Starship.cs"::: - [Required] - [Range(typeof(bool), "true", "true", - ErrorMessage = "This form disallows unapproved ships.")] - public bool IsValidatedDesign { get; set; } +:::moniker-end - [Required] - public DateTime ProductionDate { get; set; } -} -``` +:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" -<!-- -:::code language="csharp" source="~/../blazor-samples/8.0/BlazorWebAppSample/Starship.cs"::: -:::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Starship.cs"::: ---> +:::code language="csharp" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Starship.cs"::: + +:::moniker-end + +:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" + +:::code language="csharp" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Starship.cs"::: + +:::moniker-end + +:::moniker range="< aspnetcore-5.0" + +:::code language="csharp" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Starship.cs"::: + +:::moniker-end The following form accepts and validates user input using: @@ -125,7 +129,6 @@ The following form accepts and validates user input using: ```razor @page "/starship-3" -@rendermode InteractiveServer @inject ILogger<Starship3> Logger <h1>Starfleet Starship Database</h1> @@ -311,7 +314,6 @@ In the following example: ```razor @page "/starship-4" -@rendermode InteractiveServer @inject ILogger<Starship4> Logger <EditForm EditContext="@editContext" OnSubmit="@Submit" FormName="Starship4"> @@ -452,7 +454,6 @@ In the following example, the user must select at least two starship classificat ```razor @page "/starship-5" -@rendermode InteractiveServer @inject ILogger<Starship5> Logger <h1>Bind Multiple <code>InputSelect</code> Example</h1> diff --git a/aspnetcore/blazor/forms/troubleshoot.md b/aspnetcore/blazor/forms/troubleshoot.md index 7623cc8369c1..599069d96c7d 100644 --- a/aspnetcore/blazor/forms/troubleshoot.md +++ b/aspnetcore/blazor/forms/troubleshoot.md @@ -14,6 +14,8 @@ uid: blazor/forms/troubleshoot This article provides troubleshooting guidance for Blazor forms. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Large form payloads and the SignalR message size limit *This section only applies to Blazor Web Apps, Blazor Server apps, and hosted Blazor WebAssembly solutions that implement SignalR.* @@ -51,7 +53,6 @@ Due to security considerations, zero-length streams aren't permitted for streami ```razor @page "/stream-form-data" -@rendermode InteractiveServer @inject IJSRuntime JS @inject ILogger<StreamFormData> Logger diff --git a/aspnetcore/blazor/forms/validation.md b/aspnetcore/blazor/forms/validation.md index 1fd22dcfcedf..526a3c6bee42 100644 --- a/aspnetcore/blazor/forms/validation.md +++ b/aspnetcore/blazor/forms/validation.md @@ -12,6 +12,12 @@ uid: blazor/forms/validation [!INCLUDE[](~/includes/not-latest-version.md)] +This article explains how to use validation in Blazor forms. + +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Form validation + In basic form validation scenarios, an <xref:Microsoft.AspNetCore.Components.Forms.EditForm> instance can use declared <xref:Microsoft.AspNetCore.Components.Forms.EditContext> and <xref:Microsoft.AspNetCore.Components.Forms.ValidationMessageStore> instances to validate form fields. A handler for the <xref:Microsoft.AspNetCore.Components.Forms.EditContext.OnValidationRequested> event of the <xref:Microsoft.AspNetCore.Components.Forms.EditContext> executes custom validation logic. The handler's result updates the <xref:Microsoft.AspNetCore.Components.Forms.ValidationMessageStore> instance. Basic form validation is useful in cases where the form's model is defined within the component hosting the form, either as members directly on the component or in a subclass. Use of a [validator component](#validator-components) is recommended where an independent model class is used across several components. @@ -24,7 +30,6 @@ In the following component, the `HandleValidationRequested` handler method clear ```razor @page "/starship-8" -@rendermode InteractiveServer @implements IDisposable @inject ILogger<Starship8> Logger @@ -319,7 +324,6 @@ When validation messages are set in the component, they're added to the validato ```razor @page "/starship-9" -@rendermode InteractiveServer @inject ILogger<Starship9> Logger <h1>Starfleet Starship Database</h1> @@ -1038,7 +1042,6 @@ The `CustomInputText` component can be used anywhere <xref:Microsoft.AspNetCore. ```razor @page "/starship-11" -@rendermode InteractiveServer @inject ILogger<Starship11> Logger <EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship11"> @@ -1249,7 +1252,6 @@ The following component validates user input by applying the `SaladChefValidator ```razor @page "/starship-12" -@rendermode InteractiveServer @inject SaladChef SaladChef <EditForm Model="@this" autocomplete="off" FormName="Starship12"> @@ -1398,7 +1400,6 @@ Set the `CustomFieldClassProvider` class as the Field CSS Class Provider on the ```razor @page "/starship-13" -@rendermode InteractiveServer @inject ILogger<Starship13> Logger <EditForm EditContext="@editContext" OnValidSubmit="@Submit" FormName="Starship13"> @@ -1766,7 +1767,6 @@ To enable and disable the submit button based on form validation, the following ```razor @page "/starship-14" -@rendermode InteractiveServer @implements IDisposable @inject ILogger<Starship14> Logger diff --git a/aspnetcore/blazor/fundamentals/dependency-injection.md b/aspnetcore/blazor/fundamentals/dependency-injection.md index 9fbb0152cb23..dce89b31de39 100644 --- a/aspnetcore/blazor/fundamentals/dependency-injection.md +++ b/aspnetcore/blazor/fundamentals/dependency-injection.md @@ -360,7 +360,6 @@ In the following `TimeTravel` component: ```razor @page "/time-travel" -@rendermode InteractiveServer @inject ITimeTravel TimeTravel1 @inherits OwningComponentBase @@ -430,11 +429,8 @@ In spite of the scoped service registration in the `Program` file and the longev <xref:Microsoft.AspNetCore.Components.OwningComponentBase%601> derives from <xref:Microsoft.AspNetCore.Components.OwningComponentBase> and adds a <xref:Microsoft.AspNetCore.Components.OwningComponentBase%601.Service%2A> property that returns an instance of `T` from the scoped DI provider. This type is a convenient way to access scoped services without using an instance of <xref:System.IServiceProvider> when there's one primary service the app requires from the DI container using the component's scope. The <xref:Microsoft.AspNetCore.Components.OwningComponentBase.ScopedServices> property is available, so the app can get services of other types, if necessary. -:::moniker range=">= aspnetcore-8.0" - ```razor @page "/users" -@rendermode InteractiveServer @attribute [Authorize] @inherits OwningComponentBase<AppDbContext> @@ -448,27 +444,6 @@ In spite of the scoped service registration in the `Program` file and the longev </ul> ``` -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -```razor -@page "/users" -@attribute [Authorize] -@inherits OwningComponentBase<AppDbContext> - -<h1>Users (@Service.Users.Count())</h1> - -<ul> - @foreach (var user in Service.Users) - { - <li>@user.UserName</li> - } -</ul> -``` - -:::moniker-end - ## Use of an Entity Framework Core (EF Core) DbContext from DI For more information, see <xref:blazor/blazor-ef-core>. diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md index 6791b918aa3a..587a7bceef5c 100644 --- a/aspnetcore/blazor/fundamentals/environments.md +++ b/aspnetcore/blazor/fundamentals/environments.md @@ -14,6 +14,8 @@ uid: blazor/fundamentals/environments This article explains how to configure and read the [environment](xref:fundamentals/environments) in a Blazor app. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + :::moniker range=">= aspnetcore-8.0" For general guidance on setting the environment for a Blazor Web App, see <xref:fundamentals/environments>. diff --git a/aspnetcore/blazor/fundamentals/index.md b/aspnetcore/blazor/fundamentals/index.md index 5b9e9202993a..b85167396c53 100644 --- a/aspnetcore/blazor/fundamentals/index.md +++ b/aspnetcore/blazor/fundamentals/index.md @@ -70,9 +70,10 @@ The following is an example counter component and part of an app created from a :::moniker range=">= aspnetcore-8.0" +The component assumes that the Interactive Server render mode (`InteractiveServer`) is inherited from a parent component or applied globally to the app. + ```razor @page "/counter" -@rendermode InteractiveServer <PageTitle>Counter</PageTitle> @@ -167,20 +168,24 @@ Documentation sample apps are available for inspection and download: [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) -The repo contains two types of samples: - :::moniker range=">= aspnetcore-8.0" -* Snippet sample apps provide the code examples that appear in articles. These apps compile but aren't necessarily runnable apps. These apps are useful for merely obtaining example code that appears in articles. -* Samples apps to accompany Blazor articles compile and run for the following scenarios: - * Blazor Web App with EF Core - * Blazor Web App with SignalR - * Blazor WebAssembly scopes-enabled logging +Samples apps to accompany Blazor articles compile and run for the following scenarios: + +* Blazor Web App +* Blazor WebAssembly +* Blazor Web App with EF Core +* Blazor Web App with SignalR +* Blazor Web App with OIDC and Aspire +* Blazor WebAssembly scopes-enabled logging +* Blazor WebAssembly with ASP.NET Core Identity :::moniker-end :::moniker range="< aspnetcore-8.0" +The sample repo contains two types of samples: + * Snippet sample apps provide the code examples that appear in articles. These apps compile but aren't necessarily runnable apps. These apps are useful for merely obtaining example code that appears in articles. * Samples apps to accompany Blazor articles compile and run for the following scenarios: * Blazor Server with EF Core diff --git a/aspnetcore/blazor/fundamentals/logging.md b/aspnetcore/blazor/fundamentals/logging.md index d01539e1ba3e..439b268f6ed1 100644 --- a/aspnetcore/blazor/fundamentals/logging.md +++ b/aspnetcore/blazor/fundamentals/logging.md @@ -107,7 +107,6 @@ The following example demonstrates logging with an <xref:Microsoft.Extensions.Lo :::moniker-end - ## Server-side logging For general ASP.NET Core logging guidance, see <xref:fundamentals/logging/index>. diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 572f9a24f275..57b6f4974410 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -18,6 +18,8 @@ This article explains how to configure and manage SignalR connections in Blazor For general guidance on ASP.NET Core SignalR configuration, see the topics in the <xref:signalr/introduction> area of the documentation, especially <xref:signalr/configuration#configure-server-options>. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + :::moniker range=">= aspnetcore-6.0" ## Disable response compression for Hot Reload diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index d47a57c22e8d..2d64899ffcaf 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/aspnetcore/blazor/fundamentals/startup.md @@ -16,6 +16,10 @@ This article explains Blazor app startup configuration. For general guidance on ASP.NET Core app configuration for server-side development, see <xref:fundamentals/configuration/index>. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Startup process and configuration + :::moniker range=">= aspnetcore-8.0" The Blazor startup process is automatic and asynchronous via the Blazor script (`blazor.*.js`), where the `*` placeholder is: diff --git a/aspnetcore/blazor/globalization-localization.md b/aspnetcore/blazor/globalization-localization.md index f304092aaae7..e5def099d2b4 100644 --- a/aspnetcore/blazor/globalization-localization.md +++ b/aspnetcore/blazor/globalization-localization.md @@ -14,6 +14,10 @@ uid: blazor/globalization-localization This article explains how to render globalized and localized content to users in different cultures and languages. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Globalization and localization + For [globalization](/dotnet/core/extensions/globalization), Blazor provides number and date formatting. For [localization](/dotnet/core/extensions/localization), Blazor renders content using the [.NET Resources system](/dotnet/framework/resources/). A limited set of ASP.NET Core's localization features are supported: @@ -42,8 +46,6 @@ In this article, *language* refers to selections made by a user in their browser > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from the article's examples. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] - ## Globalization The [`@bind`](xref:mvc/views/razor#bind) attribute directive applies formats and parses values for display based on the user's first [preferred language](https://developer.mozilla.org/docs/Web/API/NavigatorLanguage/languages) that the app supports. [`@bind`](xref:mvc/views/razor#bind) supports the [`@bind:culture`](xref:mvc/views/razor#bindculture) parameter to provide a <xref:System.Globalization.CultureInfo?displayProperty=fullName> for parsing and formatting a value. diff --git a/aspnetcore/blazor/images.md b/aspnetcore/blazor/images.md index 1e9dcd5bab6a..380f0cf20d13 100644 --- a/aspnetcore/blazor/images.md +++ b/aspnetcore/blazor/images.md @@ -40,7 +40,6 @@ In the following `ShowImage1` component: ```razor @page "/show-image-1" -@rendermode InteractiveServer <h1>Dynamic Image Source Example</h1> @@ -153,7 +152,6 @@ The following `ShowImage2` component: ```razor @page "/show-image-2" -@rendermode InteractiveServer @inject HttpClient Http @inject IJSRuntime JS diff --git a/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md index 5df61b67aa7c..c15aa00c18a5 100644 --- a/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md +++ b/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md @@ -1,47 +1,55 @@ -Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: +Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: :::moniker range=">= aspnetcore-8.0" +* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. * **Client**/**client-side** * Client-side rendering (CSR) of a Blazor Web App. * A Blazor WebAssembly app. -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. + +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): + +* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. + +* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. + +When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end :::moniker range="< aspnetcore-6.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). -Interactive component examples throughout the documentation don't indicate an interactive render mode. To make the examples interactive, either [inherit an interactive render mode for a child component from a parent component](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-instance), [apply an interactive render mode to a component definition](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-definition), or [globally set the render mode for the entire app](xref:blazor/components/render-modes#apply-a-render-mode-to-the-entire-app). The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples). +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md index 56a4243ce7b9..d438df25abe7 100644 --- a/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md +++ b/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md @@ -1,36 +1,44 @@ -Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: +Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: :::moniker range=">= aspnetcore-8.0" +* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. * **Client**/**client-side** * Client-side rendering (CSR) of a Blazor Web App. * A Blazor WebAssembly app. -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. + +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): + +* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. + +* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. + +When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end :::moniker range="< aspnetcore-7.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). -Interactive component examples throughout the documentation don't indicate an interactive render mode. To make the examples interactive, either [inherit an interactive render mode for a child component from a parent component](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-instance), [apply an interactive render mode to a component definition](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-definition), or [globally set the render mode for the entire app](xref:blazor/components/render-modes#apply-a-render-mode-to-the-entire-app). The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples). +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md index 1c4827621240..4fb21078c0dd 100644 --- a/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md +++ b/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md @@ -1,25 +1,33 @@ -Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: +Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: :::moniker range=">= aspnetcore-8.0" +* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. * **Client**/**client-side** * Client-side rendering (CSR) of a Blazor Web App. * A Blazor WebAssembly app. -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. + +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): + +* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. + +* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. + +When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. :::moniker-end :::moniker range="< aspnetcore-8.0" -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. * **Server**/**server-side** * The **`Server`** project of a hosted Blazor WebAssembly app. * A Blazor Server app. +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. :::moniker-end For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). -Interactive component examples throughout the documentation don't indicate an interactive render mode. To make the examples interactive, either [inherit an interactive render mode for a child component from a parent component](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-instance), [apply an interactive render mode to a component definition](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-definition), or [globally set the render mode for the entire app](xref:blazor/components/render-modes#apply-a-render-mode-to-the-entire-app). The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples). +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md index afda8c99c1d6..59065efff7ee 100644 --- a/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md +++ b/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md @@ -1,8 +1,18 @@ Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: +* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. * **Client**/**client-side** * Client-side rendering (CSR) of a Blazor Web App. * A Blazor WebAssembly app. -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. + +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): + +* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. + +* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. + +When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). + +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client.md b/aspnetcore/blazor/includes/location-client.md index 4734751f72ce..50d45dcdda95 100644 --- a/aspnetcore/blazor/includes/location-client.md +++ b/aspnetcore/blazor/includes/location-client.md @@ -5,6 +5,14 @@ This guidance applies to: * Interactive WebAssembly rendering in a Blazor Web App. * A Blazor WebAssembly app. +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): + +* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. + +* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. + +When using the the Interactive WebAssembly or Interactive Auto render modes, keep in mind that all of the component code is compiled and sent to the client, where users can decompile and inspect it. Don't place private code, app secrets, or other sensitive information in client-rendered components. + :::moniker-end :::moniker range="< aspnetcore-8.0" @@ -16,4 +24,4 @@ This guidance applies to: For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). -Interactive component examples throughout the documentation don't indicate an interactive render mode. To make the examples interactive, either [inherit an interactive render mode for a child component from a parent component](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-instance), [apply an interactive render mode to a component definition](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-definition), or [globally set the render mode for the entire app](xref:blazor/components/render-modes#apply-a-render-mode-to-the-entire-app). The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples). +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-server.md b/aspnetcore/blazor/includes/location-server.md index b70d035a3b84..efea996ef4f4 100644 --- a/aspnetcore/blazor/includes/location-server.md +++ b/aspnetcore/blazor/includes/location-server.md @@ -1,6 +1,8 @@ :::moniker range=">= aspnetcore-8.0" -This guidance applies to Interactive Server components of a Blazor Web App. +This guidance applies to components that adopt interactive server-side rendering (interactive SSR) in a Blazor Web App. + +Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`), but the component must have the Interactive Server render mode applied (`@rendermode InteractiveServer`), either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. :::moniker-end @@ -33,4 +35,4 @@ This guidance applies to: For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). -Interactive component examples throughout the documentation don't indicate an interactive render mode. To make the examples interactive, either [inherit an interactive render mode for a child component from a parent component](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-instance), [apply an interactive render mode to a component definition](xref:blazor/components/render-modes#apply-a-render-mode-to-a-component-definition), or [globally set the render mode for the entire app](xref:blazor/components/render-modes#apply-a-render-mode-to-the-entire-app). The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples). +The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md index 885ade7851d7..6dfb2e48dee6 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md +++ b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md @@ -76,7 +76,6 @@ In the following `CallDotNetExample1` component, the `ReturnArrayAsync` C# metho ```razor @page "/call-dotnet-example-1" -@rendermode InteractiveServer <h1>Call .NET Example 1</h1> @@ -364,7 +363,6 @@ For the following `CallDotNetExample2` component: ```razor @page "/call-dotnet-example-2" -@rendermode InteractiveServer @implements IDisposable @inject IJSRuntime JS @@ -461,7 +459,6 @@ Provide the parameter list to the .NET method. ```razor @page "/call-dotnet-example-3" -@rendermode InteractiveServer @implements IDisposable @inject IJSRuntime JS @@ -550,7 +547,6 @@ In the following `CallDotNetExampleOneHelper` component, the `Trigger JS functio ```razor @page "/call-dotnet-example-one-helper" -@rendermode InteractiveServer @implements IDisposable @inject IJSRuntime JS @@ -873,7 +869,6 @@ In the following `GenericsExample` component: ```razor @page "/generics-example" -@rendermode InteractiveServer @using System.Runtime.InteropServices @implements IDisposable @inject IJSRuntime JS @@ -1088,7 +1083,6 @@ When the **`Trigger .NET instance method`** button is selected in the following ```razor @page "/call-dotnet-example-4" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call .NET Example 4</h1> @@ -1167,7 +1161,6 @@ The preceding pattern shown in the `JsInteropClasses3` class can also be impleme ```razor @page "/call-dotnet-example-5" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call .NET Example 5</h1> @@ -1311,7 +1304,6 @@ When a `ListItem1` component's **`InteropCall`** button is selected, `updateMess :::moniker range=">= aspnetcore-8.0" ```razor -@rendermode InteractiveServer @inject IJSRuntime JS <li> @@ -1488,7 +1480,6 @@ The <xref:Microsoft.JSInterop.DotNetObjectReference> is disposed when the compon :::moniker range=">= aspnetcore-8.0" ```razor -@rendermode InteractiveServer @inject IJSRuntime JS <li> @@ -1705,7 +1696,6 @@ Provide a `sendByteArray` JS function. The function is called statically, which ```razor @page "/call-dotnet-example-8" -@rendermode InteractiveServer @using System.Text <h1>Call .NET Example 8</h1> diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 2755f5fc02e6..d5bd8dbf3e97 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -18,6 +18,8 @@ For information on how to call .NET methods from JS, see <xref:blazor/js-interop [!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +## Invoke JS functions + <xref:Microsoft.JSInterop.IJSRuntime> is registered by the Blazor framework. To call into JS from .NET, inject the <xref:Microsoft.JSInterop.IJSRuntime> abstraction and call one of the following methods: * <xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A?displayProperty=nameWithType> @@ -63,7 +65,6 @@ The following `CallJsExample1` component: ```razor @page "/call-js-example-1" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call JS <code>convertArray</code> Function</h1> @@ -163,7 +164,6 @@ Provide a `displayTickerAlert1` JS function. The function is called with <xref:M ```razor @page "/call-js-example-2" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call JS Example 2</h1> @@ -254,7 +254,6 @@ Provide a `displayTickerAlert1` JS function. The function is called with <xref:M ```razor @page "/call-js-example-3" -@rendermode InteractiveServer @implements IDisposable @inject IJSRuntime JS @@ -353,7 +352,6 @@ Provide a `displayTickerAlert2` JS function. The following example returns a str ```razor @page "/call-js-example-4" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call JS Example 4</h1> @@ -453,7 +451,6 @@ Provide a `displayTickerAlert2` JS function. The following example returns a str ```razor @page "/call-js-example-5" -@rendermode InteractiveServer @implements IDisposable @inject IJSRuntime JS @@ -622,7 +619,6 @@ Add the preceding JS module to an app or class library as a static web asset in ```razor @page "/call-js-example-6" -@rendermode InteractiveServer @implements IAsyncDisposable @inject IJSRuntime JS @@ -846,7 +842,6 @@ The `{JAVASCRIPT FUNCTION}` placeholder is the JS function identifier. :::moniker range=">= aspnetcore-8.0" ```razor -@rendermode InteractiveServer @inject IJSRuntime JS @using JsInteropClasses @@ -961,7 +956,6 @@ For a parent component to make an element reference available to other component ```razor @page "/call-js-example-7" -@rendermode InteractiveServer <h1>Call JS Example 7</h1> @@ -1219,7 +1213,6 @@ Add the following `<link>` element to the `<head>` element markup ([location of ```razor @page "/call-js-example-8" -@rendermode InteractiveServer @implements IAsyncDisposable @inject IJSRuntime JS @@ -1331,7 +1324,6 @@ Provide a `receiveByteArray` JS function. The function is called with <xref:Micr ```razor @page "/call-js-example-9" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call JS Example 9</h1> @@ -1469,7 +1461,6 @@ In the following example, the `nonFunction` JS function doesn't exist. When the ```razor @page "/call-js-example-11" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Call JS Example 11</h1> @@ -1583,7 +1574,6 @@ The following `CallJsExample12` component: ```razor @page "/call-js-example-12" -@rendermode InteractiveServer @inject IJSRuntime JS <h1>Cancel long-running JS interop</h1> diff --git a/aspnetcore/blazor/javascript-interoperability/import-export-interop.md b/aspnetcore/blazor/javascript-interoperability/import-export-interop.md index 87962e008183..456c10aeed69 100644 --- a/aspnetcore/blazor/javascript-interoperability/import-export-interop.md +++ b/aspnetcore/blazor/javascript-interoperability/import-export-interop.md @@ -26,6 +26,8 @@ This article describes an alternative JS interop approach specific to client-sid > [!NOTE] > This article focuses on JS interop in client-side components. For guidance on calling .NET in JavaScript apps, see <xref:client-side/dotnet-interop>. + + ## Obsolete JavaScript interop API Unmarshalled JS interop using <xref:Microsoft.JSInterop.IJSUnmarshalledRuntime> API is obsolete in ASP.NET Core 7.0 or later. Follow the guidance in this article to replace the obsolete API. diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index f9b294b69140..ed258683e71a 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -14,6 +14,10 @@ uid: blazor/js-interop/index This article explains general concepts on how to interact with JavaScript in Blazor apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## JavaScript interop + A Blazor app can invoke JavaScript (JS) functions from .NET methods and .NET methods from JS functions. These scenarios are called *JavaScript interoperability* (*JS interop*). Further JS interop guidance is provided in the following articles: @@ -118,11 +122,8 @@ In the following example, the `DOMCleanup` component: `DOMCleanup.razor`: -:::moniker range=">= aspnetcore-8.0" - ```razor @page "/dom-cleanup" -@rendermode InteractiveServer @implements IAsyncDisposable @inject IJSRuntime JS @@ -154,45 +155,6 @@ In the following example, the `DOMCleanup` component: } ``` -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -```razor -@page "/dom-cleanup" -@implements IAsyncDisposable -@inject IJSRuntime JS - -<h1>DOM Cleanup Example</h1> - -<div id="cleanupDiv"></div> - -@code { - private IJSObjectReference? jsModule; - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - jsModule = await JS.InvokeAsync<IJSObjectReference>( - "import", "./Pages/DOMCleanup.razor.js"); - - await jsModule.InvokeVoidAsync("DOMCleanup.createObserver"); - } - } - - async ValueTask IAsyncDisposable.DisposeAsync() - { - if (jsModule is not null) - { - await jsModule.DisposeAsync(); - } - } -} -``` - -:::moniker-end - In the following example, the `MutationObserver` callback is executed each time a DOM change occurs. Execute your cleanup code when the `if` statement confirms that the target element (`cleanupDiv`) was removed (`if (targetRemoved) { ... }`). It's important to disconnect and delete the `MutationObserver` to avoid a memory leak after your cleanup code executes. `DOMCleanup.razor.js` placed side-by-side with the preceding `DOMCleanup` component: diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 396199d7199c..0d2427025aca 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -17,6 +17,8 @@ Blazor is optimized for high performance in most realistic application UI scenar > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + ## Optimize rendering speed Optimize rendering speed to minimize rendering workload and improve UI responsiveness, which can yield a *ten-fold or higher improvement* in UI rendering speed. @@ -405,11 +407,8 @@ In the following example, no event handler added to the component triggers a rer `HandleSelect1.razor`: -:::moniker range=">= aspnetcore-8.0" - ```razor @page "/handle-select-1" -@rendermode InteractiveServer @using Microsoft.Extensions.Logging @implements IHandleEvent @inject ILogger<HandleSelect1> Logger @@ -437,41 +436,6 @@ In the following example, no event handler added to the component triggers a rer } ``` -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -```razor -@page "/handle-select-1" -@using Microsoft.Extensions.Logging -@implements IHandleEvent -@inject ILogger<HandleSelect1> Logger - -<p> - Last render DateTime: @dt -</p> - -<button @onclick="HandleSelect"> - Select me (Avoids Rerender) -</button> - -@code { - private DateTime dt = DateTime.Now; - - private void HandleSelect() - { - dt = DateTime.Now; - - Logger.LogInformation("This event handler doesn't trigger a rerender."); - } - - Task IHandleEvent.HandleEventAsync( - EventCallbackWorkItem callback, object? arg) => callback.InvokeAsync(arg); -} -``` - -:::moniker-end - In addition to preventing rerenders after event handlers fire in a component in a global fashion, it's possible to prevent rerenders after a single event handler by employing the following utility method. Add the following `EventUtil` class to a Blazor app. The static actions and functions at the top of the `EventUtil` class provide handlers that cover several combinations of arguments and return types that Blazor uses when handling events. @@ -523,11 +487,8 @@ In the following example: `HandleSelect2.razor`: -:::moniker range=">= aspnetcore-8.0" - ```razor @page "/handle-select-2" -@rendermode InteractiveServer @using Microsoft.Extensions.Logging @inject ILogger<HandleSelect2> Logger @@ -576,62 +537,6 @@ In the following example: } ``` -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -```razor -@page "/handle-select-2" -@using Microsoft.Extensions.Logging -@inject ILogger<HandleSelect2> Logger - -<p> - Last render DateTime: @dt -</p> - -<button @onclick="HandleClick1"> - Select me (Rerenders) -</button> - -<button @onclick="EventUtil.AsNonRenderingEventHandler(HandleClick2)"> - Select me (Avoids Rerender) -</button> - -<button @onclick="EventUtil.AsNonRenderingEventHandler<MouseEventArgs>(HandleClick3)"> - Select me (Avoids Rerender and uses <code>MouseEventArgs</code>) -</button> - -@code { - private DateTime dt = DateTime.Now; - - private void HandleClick1() - { - dt = DateTime.Now; - - Logger.LogInformation("This event handler triggers a rerender."); - } - - private void HandleClick2() - { - dt = DateTime.Now; - - Logger.LogInformation("This event handler doesn't trigger a rerender."); - } - - private void HandleClick3(MouseEventArgs args) - { - dt = DateTime.Now; - - Logger.LogInformation( - "This event handler doesn't trigger a rerender. " + - "Mouse coordinates: {ScreenX}:{ScreenY}", - args.ScreenX, args.ScreenY); - } -} -``` - -:::moniker-end - In addition to implementing the <xref:Microsoft.AspNetCore.Components.IHandleEvent> interface, leveraging the other best practices described in this article can also help reduce unwanted renders after events are handled. For example, overriding <xref:Microsoft.AspNetCore.Components.ComponentBase.ShouldRender%2A> in child components of the target component can be used to control rerendering. ### Avoid recreating delegates for many repeated elements or components @@ -646,7 +551,6 @@ The following component shown in the [event handling article](xref:blazor/compon ```razor @page "/event-handler-example-5" -@rendermode InteractiveServer <h1>@heading</h1> @@ -683,62 +587,6 @@ If a large number of buttons are rendered using the preceding approach, renderin `LambdaEventPerformance.razor`: -:::moniker range=">= aspnetcore-8.0" - -```razor -@page "/lambda-event-performance" -@rendermode InteractiveServer - -<h1>@heading</h1> - -@foreach (var button in Buttons) -{ - <p> - <button @key="button.Id" @onclick="button.Action"> - Button #@button.Id - </button> - </p> -} - -@code { - private string heading = "Select a button to learn its position"; - - private List<Button> Buttons { get; set; } = new(); - - protected override void OnInitialized() - { - for (var i = 0; i < 100; i++) - { - var button = new Button(); - - button.Id = Guid.NewGuid().ToString(); - - button.Action = (e) => - { - UpdateHeading(button, e); - }; - - Buttons.Add(button); - } - } - - private void UpdateHeading(Button button, MouseEventArgs e) - { - heading = $"Selected #{button.Id} at {e.ClientX}:{e.ClientY}"; - } - - private class Button - { - public string? Id { get; set; } - public Action<MouseEventArgs> Action { get; set; } = e => { }; - } -} -``` - -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - ```razor @page "/lambda-event-performance" @@ -788,8 +636,6 @@ If a large number of buttons are rendered using the preceding approach, renderin } ``` -:::moniker-end - ## Optimize JavaScript interop speed Calls between .NET and JavaScript require additional overhead because: diff --git a/aspnetcore/blazor/security/index.md b/aspnetcore/blazor/security/index.md index 356487a3b51e..9cebbb7bf958 100644 --- a/aspnetcore/blazor/security/index.md +++ b/aspnetcore/blazor/security/index.md @@ -121,7 +121,6 @@ The <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvi ```razor @page "/claims-principle-data" -@rendermode InteractiveServer @using System.Security.Claims @inject AuthenticationStateProvider AuthenticationStateProvider @@ -236,7 +235,6 @@ If authentication state data is required for procedural logic, such as when perf ```razor @page "/cascade-auth-state" -@rendermode InteractiveServer <h1>Cascade Auth State</h1> @@ -611,7 +609,6 @@ In the following `EditUser` component, the resource at `/users/{id}/edit` has a ```razor @page "/users/{id}/edit" -@rendermode InteractiveServer @using Microsoft.AspNetCore.Authorization @attribute [Authorize(Policy = "EditUser")] @@ -735,7 +732,6 @@ A server-side Blazor app includes the appropriate namespaces by default when cre ```razor @page "/procedural-logic" -@rendermode InteractiveServer @inject IAuthorizationService AuthorizationService <h1>Procedural Logic Example</h1> diff --git a/aspnetcore/blazor/security/server/index.md b/aspnetcore/blazor/security/server/index.md index bafa68f34ddf..ea2a4bb78de8 100644 --- a/aspnetcore/blazor/security/server/index.md +++ b/aspnetcore/blazor/security/server/index.md @@ -396,7 +396,6 @@ In a component: :::moniker range=">= aspnetcore-8.0" ```razor -@rendermode InteractiveServer @inject AuthenticationStateProvider AuthenticationStateProvider <input @bind="userIdentifier" /> @@ -534,7 +533,6 @@ The following component's `SignIn` method creates a claims principal for the use :::moniker range=">= aspnetcore-8.0" ```razor -@rendermode InteractiveServer @inject AuthenticationService AuthenticationService <input @bind="userIdentifier" /> @@ -674,7 +672,6 @@ In the following `InjectAuthStateProvider` component: ```razor @page "/inject-auth-state-provider" -@rendermode InteractiveServer @inherits OwningComponentBase @inject AuthenticationStateProvider AuthenticationStateProvider diff --git a/aspnetcore/blazor/state-management.md b/aspnetcore/blazor/state-management.md index ac0441fab1d7..e366eb31f30e 100644 --- a/aspnetcore/blazor/state-management.md +++ b/aspnetcore/blazor/state-management.md @@ -15,11 +15,13 @@ zone_pivot_groups: blazor-app-models This article describes common approaches for maintaining a user's data (state) while they use an app and across browser sessions. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] - > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from types in the article's examples. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] + +## Maintain user state + :::zone pivot="server" Server-side Blazor is a stateful app framework. Most of the time, the app maintains a connection to the server. The user's state is held in the server's memory in a *circuit*. From 9260884ad27df52ab49f97783baee00f1efe25ef Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 20 Dec 2023 10:23:44 -0500 Subject: [PATCH 2/2] Updates --- aspnetcore/blazor/advanced-scenarios.md | 2 +- aspnetcore/blazor/call-web-api.md | 2 +- .../cascading-values-and-parameters.md | 2 +- .../blazor/components/control-head-content.md | 2 +- aspnetcore/blazor/components/data-binding.md | 2 +- .../blazor/components/dynamiccomponent.md | 2 +- .../element-component-model-relationships.md | 2 +- .../blazor/components/event-handling.md | 2 +- .../blazor/components/generic-type-support.md | 2 +- aspnetcore/blazor/components/index.md | 2 +- aspnetcore/blazor/components/layouts.md | 2 +- aspnetcore/blazor/components/lifecycle.md | 2 +- .../components/overwriting-parameters.md | 2 +- aspnetcore/blazor/components/quickgrid.md | 2 +- aspnetcore/blazor/components/rendering.md | 2 +- ...lat-attributes-and-arbitrary-parameters.md | 2 +- .../components/synchronization-context.md | 2 +- .../blazor/components/templated-components.md | 2 +- .../blazor/components/virtualization.md | 2 +- aspnetcore/blazor/file-downloads.md | 2 +- aspnetcore/blazor/file-uploads.md | 2 +- aspnetcore/blazor/forms/binding.md | 2 +- aspnetcore/blazor/forms/index.md | 2 +- aspnetcore/blazor/forms/input-components.md | 4 +- aspnetcore/blazor/forms/troubleshoot.md | 2 +- aspnetcore/blazor/forms/validation.md | 2 +- .../fundamentals/dependency-injection.md | 2 +- .../blazor/fundamentals/environments.md | 2 +- .../blazor/fundamentals/handle-errors.md | 2 +- aspnetcore/blazor/fundamentals/logging.md | 2 +- aspnetcore/blazor/fundamentals/routing.md | 2 +- aspnetcore/blazor/fundamentals/signalr.md | 4 +- aspnetcore/blazor/fundamentals/startup.md | 2 +- .../blazor/fundamentals/static-files.md | 2 +- .../blazor/globalization-localization.md | 2 +- aspnetcore/blazor/images.md | 2 +- ...cation-client-and-server-net31-or-later.md | 55 ------------------- ...ocation-client-and-server-net6-or-later.md | 44 --------------- ...=> location-client-and-server-pre-net8.md} | 0 .../call-dotnet-from-javascript.md | 2 +- .../call-javascript-from-dotnet.md | 2 +- .../javascript-interoperability/index.md | 4 +- aspnetcore/blazor/performance.md | 2 +- .../security/content-security-policy.md | 2 +- aspnetcore/blazor/security/index.md | 2 +- .../security/server/additional-scenarios.md | 2 +- aspnetcore/blazor/security/server/index.md | 2 +- .../interactive-server-side-rendering.md | 2 +- aspnetcore/blazor/state-management.md | 2 +- 49 files changed, 49 insertions(+), 148 deletions(-) delete mode 100644 aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md delete mode 100644 aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md rename aspnetcore/blazor/includes/{location-client-and-server-net7-or-later.md => location-client-and-server-pre-net8.md} (100%) diff --git a/aspnetcore/blazor/advanced-scenarios.md b/aspnetcore/blazor/advanced-scenarios.md index 3940423187e9..78cefbfe86fa 100644 --- a/aspnetcore/blazor/advanced-scenarios.md +++ b/aspnetcore/blazor/advanced-scenarios.md @@ -17,7 +17,7 @@ This article describes the advanced scenario for building Blazor render trees ma > [!WARNING] > Use of <xref:Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder> to create components is an *advanced scenario*. A malformed component (for example, an unclosed markup tag) can result in undefined behavior. Undefined behavior includes broken content rendering, loss of app features, and ***compromised security***. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Manually build a render tree (`RenderTreeBuilder`) diff --git a/aspnetcore/blazor/call-web-api.md b/aspnetcore/blazor/call-web-api.md index b1ad6f1bafbd..3f5adbdfdcd5 100644 --- a/aspnetcore/blazor/call-web-api.md +++ b/aspnetcore/blazor/call-web-api.md @@ -15,7 +15,7 @@ zone_pivot_groups: blazor-render-modes This article describes how to call a web API from a Blazor app. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from the `string?`, `TodoItem[]?`, `WeatherForecast[]?`, and `IEnumerable<GitHubBranch>?` types in the article's examples. diff --git a/aspnetcore/blazor/components/cascading-values-and-parameters.md b/aspnetcore/blazor/components/cascading-values-and-parameters.md index edcb2af2e831..4b0ddf206fed 100644 --- a/aspnetcore/blazor/components/cascading-values-and-parameters.md +++ b/aspnetcore/blazor/components/cascading-values-and-parameters.md @@ -19,7 +19,7 @@ This article explains how to flow data from an ancestor Razor component to desce > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from the `CascadingType?`, `@ActiveTab?`, `RenderFragment?`, `ITab?`, `TabSet?`, and `string?` types in the article's examples. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] :::moniker range=">= aspnetcore-8.0" diff --git a/aspnetcore/blazor/components/control-head-content.md b/aspnetcore/blazor/components/control-head-content.md index 3cd733bcf225..f2988c82044b 100644 --- a/aspnetcore/blazor/components/control-head-content.md +++ b/aspnetcore/blazor/components/control-head-content.md @@ -14,7 +14,7 @@ uid: blazor/components/control-head-content Razor components can modify the HTML `<head>` element content of a page, including setting the page's title (`<title>` element) and modifying metadata (`<meta>` elements). -[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Control `<head>` content in a Razor component diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md index e15581a88600..072019bbf617 100644 --- a/aspnetcore/blazor/components/data-binding.md +++ b/aspnetcore/blazor/components/data-binding.md @@ -14,7 +14,7 @@ uid: blazor/components/data-binding This article explains data binding features for Razor components and DOM elements in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Binding features diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md index 00373f4bb9ab..869ce3975d44 100644 --- a/aspnetcore/blazor/components/dynamiccomponent.md +++ b/aspnetcore/blazor/components/dynamiccomponent.md @@ -16,7 +16,7 @@ By [Dave Brock](https://twitter.com/daveabrock) Use the built-in <xref:Microsoft.AspNetCore.Components.DynamicComponent> component to render components by type. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Dynamic components diff --git a/aspnetcore/blazor/components/element-component-model-relationships.md b/aspnetcore/blazor/components/element-component-model-relationships.md index 4bc11d8c9027..19803f5bafb9 100644 --- a/aspnetcore/blazor/components/element-component-model-relationships.md +++ b/aspnetcore/blazor/components/element-component-model-relationships.md @@ -12,7 +12,7 @@ uid: blazor/components/key This article explains how to use the `@key` directive attribute to retain element, component, and model relationships when rendering and the elements or components subsequently change. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Use of the `@key` directive attribute diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md index ca2a4579dfc2..0d4b1ad8590a 100644 --- a/aspnetcore/blazor/components/event-handling.md +++ b/aspnetcore/blazor/components/event-handling.md @@ -14,7 +14,7 @@ uid: blazor/components/event-handling This article explains Blazor's event handling features, including event argument types, event callbacks, and managing default browser events. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Delegate event handlers diff --git a/aspnetcore/blazor/components/generic-type-support.md b/aspnetcore/blazor/components/generic-type-support.md index 1652a18ecc47..1992f463ef7e 100644 --- a/aspnetcore/blazor/components/generic-type-support.md +++ b/aspnetcore/blazor/components/generic-type-support.md @@ -14,7 +14,7 @@ uid: blazor/components/generic-type-support This article describes generic type support in Razor components. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Generic type parameter support diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index ee4edfabd819..9995eebd6b6c 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -14,7 +14,7 @@ uid: blazor/components/index This article explains how to create and use Razor components in Blazor apps, including guidance on Razor syntax, component naming, namespaces, and component parameters. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Razor components diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index fa66045db036..df7f2ced2ee8 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -14,7 +14,7 @@ uid: blazor/components/layouts This article explains how to create reusable layout components for Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Usefulness of Blazor layouts diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md index 8f3353dd0318..13bc5b9c6df4 100644 --- a/aspnetcore/blazor/components/lifecycle.md +++ b/aspnetcore/blazor/components/lifecycle.md @@ -14,7 +14,7 @@ uid: blazor/components/lifecycle This article explains the ASP.NET Core Razor component lifecycle and how to use lifecycle events. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Lifecycle events diff --git a/aspnetcore/blazor/components/overwriting-parameters.md b/aspnetcore/blazor/components/overwriting-parameters.md index 8c3e16f4d3ef..bda196f665ef 100644 --- a/aspnetcore/blazor/components/overwriting-parameters.md +++ b/aspnetcore/blazor/components/overwriting-parameters.md @@ -12,7 +12,7 @@ uid: blazor/components/overwriting-parameters This article explains how to avoid overwriting parameters in Blazor apps during rerendering. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Overwritten parameters diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index e8c96f8e6b49..3e05d4fb7c8b 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -18,7 +18,7 @@ uid: blazor/components/quickgrid The `QuickGrid` component is a Razor component for quickly and efficiently displaying data in tabular form. `QuickGrid` provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. `QuickGrid` is highly optimized and uses advanced techniques to achieve optimal rendering performance. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net7-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Package diff --git a/aspnetcore/blazor/components/rendering.md b/aspnetcore/blazor/components/rendering.md index 035e54ecccb1..1666ac379a0f 100644 --- a/aspnetcore/blazor/components/rendering.md +++ b/aspnetcore/blazor/components/rendering.md @@ -14,7 +14,7 @@ uid: blazor/components/rendering This article explains Razor component rendering in ASP.NET Core Blazor apps, including when to call <xref:Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged%2A> to manually trigger a component to render. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Rendering conventions for `ComponentBase` diff --git a/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md b/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md index 612bc42759ef..12be2b462ad6 100644 --- a/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md +++ b/aspnetcore/blazor/components/splat-attributes-and-arbitrary-parameters.md @@ -12,7 +12,7 @@ uid: blazor/components/attribute-splatting Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then *splatted* onto an element when the component is rendered using the [`@attributes`](xref:mvc/views/razor#attributes) Razor directive attribute. This scenario is useful for defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an `<input>` that supports many parameters. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Attribute splatting diff --git a/aspnetcore/blazor/components/synchronization-context.md b/aspnetcore/blazor/components/synchronization-context.md index c96a4521670c..bbfc97fa6634 100644 --- a/aspnetcore/blazor/components/synchronization-context.md +++ b/aspnetcore/blazor/components/synchronization-context.md @@ -14,7 +14,7 @@ Blazor uses a synchronization context (<xref:System.Threading.SynchronizationCon Blazor's server-side synchronization context attempts to emulate a single-threaded environment so that it closely matches the WebAssembly model in the browser, which is single threaded. At any given point in time, work is performed on exactly one thread, which yields the impression of a single logical thread. No two operations execute concurrently. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Avoid thread-blocking calls diff --git a/aspnetcore/blazor/components/templated-components.md b/aspnetcore/blazor/components/templated-components.md index bac2f399494b..0ad56008c160 100644 --- a/aspnetcore/blazor/components/templated-components.md +++ b/aspnetcore/blazor/components/templated-components.md @@ -14,7 +14,7 @@ uid: blazor/components/templated-components This article explains how templated components can accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Templated components diff --git a/aspnetcore/blazor/components/virtualization.md b/aspnetcore/blazor/components/virtualization.md index 14eb4d4c4958..64aa8697ac26 100644 --- a/aspnetcore/blazor/components/virtualization.md +++ b/aspnetcore/blazor/components/virtualization.md @@ -14,7 +14,7 @@ uid: blazor/components/virtualization This article explains how to use component virtualization in ASP.NET Core Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net5-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Virtualization diff --git a/aspnetcore/blazor/file-downloads.md b/aspnetcore/blazor/file-downloads.md index 19122a9e6c03..255a14a6485e 100644 --- a/aspnetcore/blazor/file-downloads.md +++ b/aspnetcore/blazor/file-downloads.md @@ -14,7 +14,7 @@ uid: blazor/file-downloads This article explains how to download files in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## File downloads diff --git a/aspnetcore/blazor/file-uploads.md b/aspnetcore/blazor/file-uploads.md index caf144468535..363af8d37adf 100644 --- a/aspnetcore/blazor/file-uploads.md +++ b/aspnetcore/blazor/file-uploads.md @@ -14,7 +14,7 @@ uid: blazor/file-uploads This article explains how to upload files in Blazor with the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## File uploads diff --git a/aspnetcore/blazor/forms/binding.md b/aspnetcore/blazor/forms/binding.md index 44c01386407d..96d0542ee5d7 100644 --- a/aspnetcore/blazor/forms/binding.md +++ b/aspnetcore/blazor/forms/binding.md @@ -14,7 +14,7 @@ uid: blazor/forms/binding This article explains how to use binding in Blazor forms. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## `EditForm`/`EditContext` model diff --git a/aspnetcore/blazor/forms/index.md b/aspnetcore/blazor/forms/index.md index 20a1b9221d59..f627518626bc 100644 --- a/aspnetcore/blazor/forms/index.md +++ b/aspnetcore/blazor/forms/index.md @@ -14,7 +14,7 @@ uid: blazor/forms/index This article explains how to use forms in Blazor. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Input components and forms diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index f7fcba82526d..67441d7fd31c 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -14,7 +14,7 @@ uid: blazor/forms/input-components This article describes Blazor's built-in input components. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Input components @@ -94,7 +94,7 @@ The following `Starship` type, which is used in several of this article's exampl :::moniker-end -:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Starship.cs"::: diff --git a/aspnetcore/blazor/forms/troubleshoot.md b/aspnetcore/blazor/forms/troubleshoot.md index 599069d96c7d..f82475b530fc 100644 --- a/aspnetcore/blazor/forms/troubleshoot.md +++ b/aspnetcore/blazor/forms/troubleshoot.md @@ -14,7 +14,7 @@ uid: blazor/forms/troubleshoot This article provides troubleshooting guidance for Blazor forms. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Large form payloads and the SignalR message size limit diff --git a/aspnetcore/blazor/forms/validation.md b/aspnetcore/blazor/forms/validation.md index 526a3c6bee42..ad049443f166 100644 --- a/aspnetcore/blazor/forms/validation.md +++ b/aspnetcore/blazor/forms/validation.md @@ -14,7 +14,7 @@ uid: blazor/forms/validation This article explains how to use validation in Blazor forms. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Form validation diff --git a/aspnetcore/blazor/fundamentals/dependency-injection.md b/aspnetcore/blazor/fundamentals/dependency-injection.md index dce89b31de39..88089f9ac8e1 100644 --- a/aspnetcore/blazor/fundamentals/dependency-injection.md +++ b/aspnetcore/blazor/fundamentals/dependency-injection.md @@ -24,7 +24,7 @@ This article explains how Blazor apps can inject services into components. > [!NOTE] > We recommend reading <xref:fundamentals/dependency-injection> before reading this topic. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Default services diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md index 587a7bceef5c..ea7b37dfec67 100644 --- a/aspnetcore/blazor/fundamentals/environments.md +++ b/aspnetcore/blazor/fundamentals/environments.md @@ -14,7 +14,7 @@ uid: blazor/fundamentals/environments This article explains how to configure and read the [environment](xref:fundamentals/environments) in a Blazor app. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] :::moniker range=">= aspnetcore-8.0" diff --git a/aspnetcore/blazor/fundamentals/handle-errors.md b/aspnetcore/blazor/fundamentals/handle-errors.md index e74bbea0f536..a5f3406253c1 100644 --- a/aspnetcore/blazor/fundamentals/handle-errors.md +++ b/aspnetcore/blazor/fundamentals/handle-errors.md @@ -14,7 +14,7 @@ uid: blazor/fundamentals/handle-errors This article describes how Blazor manages unhandled exceptions and how to develop apps that detect and handle errors. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Detailed errors during development diff --git a/aspnetcore/blazor/fundamentals/logging.md b/aspnetcore/blazor/fundamentals/logging.md index 439b268f6ed1..dec49a58fae3 100644 --- a/aspnetcore/blazor/fundamentals/logging.md +++ b/aspnetcore/blazor/fundamentals/logging.md @@ -19,7 +19,7 @@ uid: blazor/fundamentals/logging This article explains Blazor app logging, including configuration and how to write log messages from Razor components. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Configuration diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 19198de4408e..d2f8ae53eb24 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -14,7 +14,7 @@ uid: blazor/fundamentals/routing This article explains how to manage Blazor app request routing and how to use the <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component to create navigation links. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] > [!IMPORTANT] > Code examples throughout this article show methods called on `Navigation`, which is an injected <xref:Microsoft.AspNetCore.Components.NavigationManager> in classes and components. diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 57b6f4974410..80372c0237ea 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -14,11 +14,11 @@ uid: blazor/fundamentals/signalr This article explains how to configure and manage SignalR connections in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] For general guidance on ASP.NET Core SignalR configuration, see the topics in the <xref:signalr/introduction> area of the documentation, especially <xref:signalr/configuration#configure-server-options>. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] :::moniker range=">= aspnetcore-6.0" diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index 2d64899ffcaf..b5065fdbdb45 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/aspnetcore/blazor/fundamentals/startup.md @@ -16,7 +16,7 @@ This article explains Blazor app startup configuration. For general guidance on ASP.NET Core app configuration for server-side development, see <xref:fundamentals/configuration/index>. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Startup process and configuration diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 8fc5a5107004..00172c795331 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -14,7 +14,7 @@ uid: blazor/fundamentals/static-files This article describes Blazor app configuration for serving static files. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Static File Middleware diff --git a/aspnetcore/blazor/globalization-localization.md b/aspnetcore/blazor/globalization-localization.md index e5def099d2b4..3c18936a0d6a 100644 --- a/aspnetcore/blazor/globalization-localization.md +++ b/aspnetcore/blazor/globalization-localization.md @@ -14,7 +14,7 @@ uid: blazor/globalization-localization This article explains how to render globalized and localized content to users in different cultures and languages. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Globalization and localization diff --git a/aspnetcore/blazor/images.md b/aspnetcore/blazor/images.md index 380f0cf20d13..c52edc4745f7 100644 --- a/aspnetcore/blazor/images.md +++ b/aspnetcore/blazor/images.md @@ -14,7 +14,7 @@ uid: blazor/images This article describes common scenarios for working with images in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Dynamically set an image source diff --git a/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md deleted file mode 100644 index c15aa00c18a5..000000000000 --- a/aspnetcore/blazor/includes/location-client-and-server-net31-or-later.md +++ /dev/null @@ -1,55 +0,0 @@ -Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: - -:::moniker range=">= aspnetcore-8.0" - -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. -* **Client**/**client-side** - * Client-side rendering (CSR) of a Blazor Web App. - * A Blazor WebAssembly app. - -Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): - -* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. - -* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. - -When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. - -:::moniker-end - -:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" - -* **Server**/**server-side** - * The **`Server`** project of a hosted Blazor WebAssembly app. - * A Blazor Server app. -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. - -:::moniker-end - -:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" - -* **Server**/**server-side** - * The **`Server`** project of a hosted Blazor WebAssembly app. - * A Blazor Server app. -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. - -:::moniker-end - -:::moniker range="< aspnetcore-6.0" - -* **Server**/**server-side** - * The **`Server`** project of a hosted Blazor WebAssembly app. - * A Blazor Server app. -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. - -:::moniker-end - -For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). - -The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md deleted file mode 100644 index d438df25abe7..000000000000 --- a/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md +++ /dev/null @@ -1,44 +0,0 @@ -Throughout this article, the terms **server**/**server-side** and **client**/**client-side** are used to distinguish locations where app code executes: - -:::moniker range=">= aspnetcore-8.0" - -* **Server**/**server-side**: Interactive server-side rendering (interactive SSR) of a Blazor Web App. -* **Client**/**client-side** - * Client-side rendering (CSR) of a Blazor Web App. - * A Blazor WebAssembly app. - -Documentation component examples usually don't configure an interactive render mode with an `@rendermode` directive in the component's definition file (`.razor`): - -* In a Blazor Web App, the component must have an interactive render mode applied, either in the component's definition file or inherited from a parent component. For more information, see <xref:blazor/components/render-modes>. - -* In a standalone Blazor WebAssembly app, the components function as shown and don't require a render mode because components always run interactively on WebAssembly in a Blazor WebAssembly app. - -When using the the Interactive WebAssembly or Interactive Auto render modes, component code sent to the client can be decompiled and inspected. Don't place private code, app secrets, or other sensitive information in client-rendered components. - -:::moniker-end - -:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" - -* **Server**/**server-side** - * The **`Server`** project of a hosted Blazor WebAssembly app. - * A Blazor Server app. -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. - -:::moniker-end - -:::moniker range="< aspnetcore-7.0" - -* **Server**/**server-side** - * The **`Server`** project of a hosted Blazor WebAssembly app. - * A Blazor Server app. -* **Client**/**client-side** - * The **`Client`** project of a hosted Blazor WebAssembly app. - * A Blazor WebAssembly app. - -:::moniker-end - -For guidance on the purpose and locations of files and folders, see <xref:blazor/project-structure>, which also describes the [location of the Blazor start script](xref:blazor/project-structure#location-of-the-blazor-script) and the [location of `<head>` and `<body>` content](xref:blazor/project-structure#location-of-head-and-body-content). - -The best way to run the demonstration code is to download the `BlazorSample_{PROJECT TYPE}` sample apps from the [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples) that matches the version of .NET that you're targeting. Not all of the documentation examples are currently in the sample apps, but an effort is currently underway to move most of the .NET 8 article examples into the .NET 8 sample apps. This work will be completed in the first quarter of 2024. diff --git a/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-pre-net8.md similarity index 100% rename from aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md rename to aspnetcore/blazor/includes/location-client-and-server-pre-net8.md diff --git a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md index 6dfb2e48dee6..a4618c74235c 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md +++ b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md @@ -22,7 +22,7 @@ This article explains how to invoke .NET methods from JavaScript (JS). For information on how to call JS functions from .NET, see <xref:blazor/js-interop/call-javascript-from-dotnet>. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Invoke a static .NET method diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index d5bd8dbf3e97..a3f968056693 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -16,7 +16,7 @@ This article explains how to invoke JavaScript (JS) functions from .NET. For information on how to call .NET methods from JS, see <xref:blazor/js-interop/call-dotnet-from-javascript>. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Invoke JS functions diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index ed258683e71a..f3b6bb6b0e2e 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -14,7 +14,7 @@ uid: blazor/js-interop/index This article explains general concepts on how to interact with JavaScript in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## JavaScript interop @@ -34,7 +34,7 @@ Further JS interop guidance is provided in the following articles: :::moniker-end -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## JavaScript interop abstractions and features package diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 0d2427025aca..7cfa1a33e59b 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -17,7 +17,7 @@ Blazor is optimized for high performance in most realistic application UI scenar > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Optimize rendering speed diff --git a/aspnetcore/blazor/security/content-security-policy.md b/aspnetcore/blazor/security/content-security-policy.md index cf0526c38e6a..16672ceb34e3 100644 --- a/aspnetcore/blazor/security/content-security-policy.md +++ b/aspnetcore/blazor/security/content-security-policy.md @@ -14,7 +14,7 @@ uid: blazor/security/content-security-policy This article explains how to use a [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) with ASP.NET Core Blazor apps to help protect against [Cross-Site Scripting (XSS)](xref:security/cross-site-scripting) attacks. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] [Cross-Site Scripting (XSS)](xref:security/cross-site-scripting) is a security vulnerability where an attacker places one or more malicious client-side scripts into an app's rendered content. A CSP helps protect against XSS attacks by informing the browser of valid: diff --git a/aspnetcore/blazor/security/index.md b/aspnetcore/blazor/security/index.md index 9cebbb7bf958..28baf335cb3e 100644 --- a/aspnetcore/blazor/security/index.md +++ b/aspnetcore/blazor/security/index.md @@ -14,7 +14,7 @@ uid: blazor/security/index This article describes ASP.NET Core's support for the configuration and management of security in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] Security scenarios differ between server-side and client-side Blazor apps. Because a server-side app runs on the server, authorization checks are able to determine: diff --git a/aspnetcore/blazor/security/server/additional-scenarios.md b/aspnetcore/blazor/security/server/additional-scenarios.md index 98230b8d7552..f75c2775bbc9 100644 --- a/aspnetcore/blazor/security/server/additional-scenarios.md +++ b/aspnetcore/blazor/security/server/additional-scenarios.md @@ -14,7 +14,7 @@ uid: blazor/security/server/additional-scenarios This article explains how to configure server-side Blazor for additional security scenarios, including how to pass tokens to a Blazor app. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from the `string?`, `TodoItem[]?`, `WeatherForecast[]?`, and `IEnumerable<GitHubBranch>?` types in the article's examples. diff --git a/aspnetcore/blazor/security/server/index.md b/aspnetcore/blazor/security/server/index.md index ea2a4bb78de8..b6a5a1e5a9d2 100644 --- a/aspnetcore/blazor/security/server/index.md +++ b/aspnetcore/blazor/security/server/index.md @@ -14,7 +14,7 @@ uid: blazor/security/server/index This article explains how to secure server-side Blazor apps as ASP.NET Core applications. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] Server-side Blazor apps are configured for security in the same manner as ASP.NET Core apps. For more information, see the articles under <xref:security/index>. diff --git a/aspnetcore/blazor/security/server/interactive-server-side-rendering.md b/aspnetcore/blazor/security/server/interactive-server-side-rendering.md index ac8225059d1b..cfc8f6d5fbf0 100644 --- a/aspnetcore/blazor/security/server/interactive-server-side-rendering.md +++ b/aspnetcore/blazor/security/server/interactive-server-side-rendering.md @@ -14,7 +14,7 @@ uid: blazor/security/server/interactive-server-side-rendering This article explains how to mitigate security threats in interactive server-side Blazor. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] Apps adopt a *stateful* data processing model, where the server and client maintain a long-lived relationship. The persistent state is maintained by a [circuit](xref:blazor/state-management), which can span connections that are also potentially long-lived. diff --git a/aspnetcore/blazor/state-management.md b/aspnetcore/blazor/state-management.md index e366eb31f30e..0a6b7aa5cc6b 100644 --- a/aspnetcore/blazor/state-management.md +++ b/aspnetcore/blazor/state-management.md @@ -18,7 +18,7 @@ This article describes common approaches for maintaining a user's data (state) w > [!NOTE] > The code examples in this article adopt [nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis), which are supported in ASP.NET Core 6.0 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (`?`) from types in the article's examples. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net31-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-pre-net8.md)] ## Maintain user state