diff --git a/aspnetcore/blazor/blazor-ef-core.md b/aspnetcore/blazor/blazor-ef-core.md index 655713e37030..ce4204f9fb60 100644 --- a/aspnetcore/blazor/blazor-ef-core.md +++ b/aspnetcore/blazor/blazor-ef-core.md @@ -175,7 +175,7 @@ The recommended approach to create a new satisfies any dependencies via the service provider. -* `IDbContextFactory` is available in EF Core ASP.NET Core 5.0 or later, so the interface is [implemented in the sample app for ASP.NET Core 3.x](https://github.com/dotnet/blazor-samples/blob/main/3.1/BlazorServerEFCoreSample/Data/IDbContextFactory.cs). +* is available in EF Core ASP.NET Core 5.0 or later, so the interface is [implemented in the sample app for ASP.NET Core 3.x](https://github.com/dotnet/blazor-samples/blob/main/3.1/BlazorServerEFCoreSample/Data/IDbContextFactory.cs). :::moniker-end diff --git a/aspnetcore/blazor/call-web-api.md b/aspnetcore/blazor/call-web-api.md index 28192804c1f0..8b1ac24f5afa 100644 --- a/aspnetcore/blazor/call-web-api.md +++ b/aspnetcore/blazor/call-web-api.md @@ -222,13 +222,11 @@ For more information, see [Client-side services fail to resolve during prerender When prerendering, components render twice: first statically, then interactively. State doesn't automatically flow from the prerendered component to the interactive one. If a component performs asynchronous initialization operations and renders different content for different states during initialization, such as a "Loading..." progress indicator, you may see a flicker when the component renders twice. - + You can address this by flowing prerendered state using the Persistent Component State API, which the `BlazorWebAppCallWebApi` and `BlazorWebAppCallWebApi_Weather` [sample apps](#sample-apps) demonstrate. When the component renders interactively, it can render the same way using the same state. However, the API doesn't currently work with enhanced navigation, which you can work around by disabling enhanced navigation on links to the page (`data-enhanced-nav=false`). For more information, see the following resources: diff --git a/aspnetcore/blazor/components/js-spa-frameworks.md b/aspnetcore/blazor/components/js-spa-frameworks.md index cf713d91a97e..59fc8115f58b 100644 --- a/aspnetcore/blazor/components/js-spa-frameworks.md +++ b/aspnetcore/blazor/components/js-spa-frameworks.md @@ -23,10 +23,10 @@ This article covers how to render Razor components from JavaScript, use Blazor c ## Angular sample apps - + -* [CustomElementsBlazorSample (Blazor Server) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-server`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-server): Blazor Server is supported in .NET 8. To migrate this .NET 7 sample to .NET 8, see . -* [CustomElementsBlazorSample (Blazor WebAssembly) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-wasm`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-wasm): To migrate this .NET 7 sample to .NET 8, see . +* [CustomElementsBlazorSample (Blazor Server) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-server`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-server): Blazor Server is supported in .NET 8/9. To migrate this .NET 7 sample, see and . +* [CustomElementsBlazorSample (Blazor WebAssembly) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-wasm`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-wasm): To migrate this .NET 7 sample, see and . ## Render Razor components from JavaScript diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md index ec351be6d5c4..39df76e2d641 100644 --- a/aspnetcore/blazor/components/lifecycle.md +++ b/aspnetcore/blazor/components/lifecycle.md @@ -38,9 +38,6 @@ Component lifecycle events: A parent component renders before its children components because rendering is what determines which children are present. If synchronous parent component initialization is used, the parent initialization is guaranteed to complete first. If asynchronous parent component initialization is used, the completion order of parent and child component initialization can't be determined because it depends on the initialization code running. - - ![Component lifecycle events of a Razor component in Blazor](~/blazor/components/lifecycle/_static/lifecycle1.png) DOM event processing: diff --git a/aspnetcore/blazor/components/lifecycle/_static/lifecycle1.png b/aspnetcore/blazor/components/lifecycle/_static/lifecycle1.png index e174c33e2f65..3597fdeced64 100644 Binary files a/aspnetcore/blazor/components/lifecycle/_static/lifecycle1.png and b/aspnetcore/blazor/components/lifecycle/_static/lifecycle1.png differ diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index ba5a5d97e45a..96eda41d12be 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -43,7 +43,7 @@ To implement a `QuickGrid` component: * : If true, the grid is rendered with virtualization. This is normally used in conjunction with scrolling and causes the grid to fetch and render only the data around the current scroll viewport. This can greatly improve the performance when scrolling through large data sets. If you use , you should supply a value for and must ensure that every row renders with a constant height. Generally, it's preferable not to use if the amount of data rendered is small or if you're using pagination. * : Only applicable when using . defines an expected height in pixels for each row, allowing the virtualization mechanism to fetch the correct number of items to match the display size and to ensure accurate scrolling. * : Optionally defines a value for `@key` on each rendered row. Typically, this is used to specify a unique identifier, such as a primary key value, for each data item. This allows the grid to preserve the association between row elements and data items based on their unique identifiers, even when the `TGridItem` instances are replaced by new copies (for example, after a new query against the underlying data store). If not set, the `@key` is the `TGridItem` instance. -* `OverscanCount`: Defines how many additional items to render before and after the visible region to reduce rendering frequency during scrolling. While higher values can improve scroll smoothness by rendering more items off-screen, a higher value can also result in an increase in initial load times. Finding a balance based on your data set size and user experience requirements is recommended. The default value is 3. Only available when using . +* : Defines how many additional items to render before and after the visible region to reduce rendering frequency during scrolling. While higher values can improve scroll smoothness by rendering more items off-screen, a higher value can also result in an increase in initial load times. Finding a balance based on your data set size and user experience requirements is recommended. The default value is 3. Only available when using . * : Optionally links this `TGridItem` instance with a model, causing the grid to fetch and render only the current page of data. This is normally used in conjunction with a component or some other UI logic that displays and updates the supplied instance. * In the `QuickGrid` child content (), specify s, which represent `TGridItem` columns whose cells display values: * : Defines the value to be displayed in this column's cells. @@ -131,8 +131,8 @@ Set the `QuickGrid` component's ``` - + To provide a UI for pagination, add a [`Paginator` component](xref:Microsoft.AspNetCore.Components.QuickGrid.Paginator) above or below the `QuickGrid` component. Set the to `pagination`: @@ -236,14 +236,10 @@ The following example filters movies by a movie title entered in a search box. T } ``` - ## Display name support @@ -492,9 +488,4 @@ dotnet aspnet-codegenerator blazor -h --- - diff --git a/aspnetcore/blazor/components/render-modes.md b/aspnetcore/blazor/components/render-modes.md index adf8b5a964ff..61e3a8afd2c1 100644 --- a/aspnetcore/blazor/components/render-modes.md +++ b/aspnetcore/blazor/components/render-modes.md @@ -217,15 +217,15 @@ Additional information on render mode propagation is provided in the [Render mod ## Detect rendering location, interactivity, and assigned render mode at runtime -The `ComponentBase.RendererInfo` and `ComponentBase.AssignedRenderMode` properties permit the app to detect details about the location, interactivity, and assigned render mode of a component: +The and properties permit the app to detect details about the location, interactivity, and assigned render mode of a component: -* `RendererInfo.Name` returns the location where the component is executing: +* returns the location where the component is executing: * `Static`: On the server (SSR) and incapable of interactivity. * `Server`: On the server (SSR) and capable of interactivity after prerendering. * `WebAssembly`: On the client (CSR) and capable of interactivity after prerendering. * `WebView`: On the native device and capable of interactivity after prerendering. -* `RendererInfo.IsInteractive` indicates if the component supports interactivity at the time of rendering. The value is `true` when rendering interactively or `false` when prerendering or for static SSR (`Platform.Name` of `Static`). -* `ComponentBase.AssignedRenderMode` exposes the component's assigned render mode: +* indicates if the component supports interactivity at the time of rendering. The value is `true` when rendering interactively or `false` when prerendering or for static SSR ( of `Static`). +* exposes the component's assigned render mode: * `InteractiveServer` for Interactive Server. * `InteractiveAuto` for Interactive Auto. * `InteractiveWebAssembly` for Interactive WebAssembly. @@ -281,7 +281,7 @@ else In the preceding example: -* When the value of `AssignedRenderMode` is `null`, the component adopts static SSR. Blazor event handling isn't functional in a browser with static SSR, so the component submits a form (GET request) with a `titleFilter` query string set to the user's `` value. The `Movie` component (`/movie`) can read the query string and process the value of `titleFilter` to render the component with the filtered results. +* When the value of is `null`, the component adopts static SSR. Blazor event handling isn't functional in a browser with static SSR, so the component submits a form (GET request) with a `titleFilter` query string set to the user's `` value. The `Movie` component (`/movie`) can read the query string and process the value of `titleFilter` to render the component with the filtered results. * Otherwise, the render mode is any of `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`. The component is capable of using an event handler delegate (`FilterMovies`) and the value bound to the `` element (`titleFilter`) to filter movies interactively over the background SignalR connection. :::moniker-end @@ -606,7 +606,7 @@ This approach is only useful when the app has specific pages that can't work wit :::moniker range=">= aspnetcore-9.0" -Mark any Razor component page with the `[ExcludeFromInteractiveRouting]` attribute assigned with the `@attribute` Razor directive: +Mark any Razor component page with the [`[ExcludeFromInteractiveRouting]` attribute](xref:Microsoft.AspNetCore.Components.ExcludeFromInteractiveRoutingAttribute) assigned with the `@attribute` Razor directive: ```razor @attribute [ExcludeFromInteractiveRouting] @@ -614,12 +614,12 @@ Mark any Razor component page with the `[ExcludeFromInteractiveRouting]` attribu Applying the attribute causes navigation to the page to exit from [interactive routing](xref:blazor/fundamentals/routing#static-versus-interactive-routing). Inbound navigation is forced to perform a full-page reload instead resolving the page via interactive routing. The full-page reload forces the top-level root component, typically the `App` component (`App.razor`), to rerender from the server, allowing the app to switch to a different top-level render mode. -The `HttpContext.AcceptsInteractiveRouting` extension method allows the component to detect whether `[ExcludeFromInteractiveRouting]` is applied to the current page. +The extension method allows the component to detect whether the [`[ExcludeFromInteractiveRouting]` attribute](xref:Microsoft.AspNetCore.Components.ExcludeFromInteractiveRoutingAttribute) is applied to the current page. In the `App` component, use the pattern in the following example: -* Pages that aren't annotated with `[ExcludeFromInteractiveRouting]` default to the `InteractiveServer` render mode with global interactivity. You can replace `InteractiveServer` with `InteractiveWebAssembly` or `InteractiveAuto` to specify a different default global render mode. -* Pages annotated with `[ExcludeFromInteractiveRouting]` adopt static SSR (`PageRenderMode` is assigned `null`). +* Pages that aren't annotated with the [`[ExcludeFromInteractiveRouting]` attribute](xref:Microsoft.AspNetCore.Components.ExcludeFromInteractiveRoutingAttribute) default to the `InteractiveServer` render mode with global interactivity. You can replace `InteractiveServer` with `InteractiveWebAssembly` or `InteractiveAuto` to specify a different default global render mode. +* Pages annotated with the [`[ExcludeFromInteractiveRouting]` attribute](xref:Microsoft.AspNetCore.Components.ExcludeFromInteractiveRoutingAttribute) adopt static SSR (`PageRenderMode` is assigned `null`). ```razor @@ -643,7 +643,7 @@ In the `App` component, use the pattern in the following example: } ``` -An alternative to using the `HttpContext.AcceptsInteractiveRouting` extension method is to read endpoint metadata manually using `HttpContext.GetEndpoint()?.Metadata`. +An alternative to using the extension method is to read endpoint metadata manually using `HttpContext.GetEndpoint()?.Metadata`. :::moniker-end diff --git a/aspnetcore/blazor/components/rendering.md b/aspnetcore/blazor/components/rendering.md index a49a24011414..b3b83a8167dd 100644 --- a/aspnetcore/blazor/components/rendering.md +++ b/aspnetcore/blazor/components/rendering.md @@ -323,7 +323,7 @@ The state manager approach is similar to the earlier case with + A loading progress indicator isn't present in an app created from the Blazor Web App project template. A new loading progress indicator feature is planned for a future release of .NET. In the meantime, an app can adopt custom code to create a loading progress indicator. For more information, see . diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index 50d2fc020356..0e596c218988 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -458,7 +458,7 @@ The validation summary displays the friendly name when the field's value is inva > The Production Date field must be a date. - + We recommend the following conventions: @@ -153,9 +153,9 @@ In the following example for IIS, the custom header (`blazor-environment`) is ad ## Set the environment for Azure App Service - + For a standalone Blazor WebAssembly app, you can set the environment manually via [start configuration](#set-the-client-side-environment-via-blazor-startup-configuration) or the [`blazor-environment` header](#set-the-client-side-environment-via-header). diff --git a/aspnetcore/blazor/fundamentals/signalr.md b/aspnetcore/blazor/fundamentals/signalr.md index 0b84ac376670..5ed800690d18 100644 --- a/aspnetcore/blazor/fundamentals/signalr.md +++ b/aspnetcore/blazor/fundamentals/signalr.md @@ -34,23 +34,23 @@ Blazor works best when using WebSockets as the SignalR transport due to lower la ## WebSocket compression for Interactive Server components - - By default, Interactive Server components: -* Enable compression for [WebSocket connections](xref:fundamentals/websockets). `ConfigureWebsocketOptions` controls WebSocket compression. +* Enable compression for [WebSocket connections](xref:fundamentals/websockets). (default: `false`) controls WebSocket compression. * Adopt a `frame-ancestors` [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) directive set to `'self'`, which only permits embedding the app in an `