diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index 16ba438474c1..71fafb3dad3e 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -30,6 +30,33 @@ For various `QuickGrid` demonstrations, see the [**QuickGrid for Blazor** sample To implement a `QuickGrid` component: +:::moniker-end + +:::moniker range=">= aspnetcore-9.0" + +* Specify tags for the `QuickGrid` component in Razor markup (`...`). +* Name a queryable source of data for the grid. Use ***either*** of the following data sources: + * : A nullable `IQueryable`, where `TGridItem` is the type of data represented by each row in the grid. + * : A callback that supplies data for the grid. +* : An optional CSS class name. If provided, the class name is included in the `class` attribute of the rendered table. +* : A theme name (default value: `default`). This affects which styling rules match the table. +* : 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 . +* : 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. + * : Optionally specifies a format string for the value. Using requires the `TProp` type to implement . + * : Indicates whether the data should be sortable by this column. The default value may vary according to the column type. For example, a is sortable by default if any parameter is specified. + * : Indicates the sort direction if is `true`. + * : Indicates whether this column should be sorted by default. + * : If specified, virtualized grids use this template to render cells whose data hasn't been loaded. + +:::moniker-end + +:::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0" + * Specify tags for the `QuickGrid` component in Razor markup (`...`). * Name a queryable source of data for the grid. Use ***either*** of the following data sources: * : A nullable `IQueryable`, where `TGridItem` is the type of data represented by each row in the grid. @@ -48,6 +75,10 @@ To implement a `QuickGrid` component: * : Indicates whether this column should be sorted by default. * : If specified, virtualized grids use this template to render cells whose data hasn't been loaded. +:::moniker-end + +:::moniker range=">= aspnetcore-8.0" + 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. diff --git a/aspnetcore/blazor/components/render-modes.md b/aspnetcore/blazor/components/render-modes.md index 4e8d9221870f..34e0d68f29cd 100644 --- a/aspnetcore/blazor/components/render-modes.md +++ b/aspnetcore/blazor/components/render-modes.md @@ -527,14 +527,14 @@ Mark any Razor component page with the `[ExcludeFromInteractiveRouting]` attribu @attribute [ExcludeFromInteractiveRouting] ``` -Applying the attribute causes navigation to the page to exit from interactive routing. That is, 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. +Applying the attribute causes navigation to the page to exit from 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. 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 `null`). +* Pages annotated with `[ExcludeFromInteractiveRouting]` adopt static SSR (`PageRenderMode` is assigned `null`). ```razor diff --git a/aspnetcore/blazor/hybrid/class-libraries.md b/aspnetcore/blazor/hybrid/class-libraries.md index a8b8e4115e82..597a63f5d5f0 100644 --- a/aspnetcore/blazor/hybrid/class-libraries.md +++ b/aspnetcore/blazor/hybrid/class-libraries.md @@ -48,6 +48,8 @@ For more information, see the following articles: :::moniker-end + + ## Share web UI Razor components, code, and static assets Components from an RCL can be simultaneously shared by web and native client apps built using Blazor. The guidance in explains how to share Razor components using a Razor class library (RCL). The same guidance applies to reusing Razor components from an RCL in a Blazor Hybrid app. diff --git a/aspnetcore/blazor/hybrid/reuse-razor-components.md b/aspnetcore/blazor/hybrid/reuse-razor-components.md index f07b103ea990..39e81eaf459a 100644 --- a/aspnetcore/blazor/hybrid/reuse-razor-components.md +++ b/aspnetcore/blazor/hybrid/reuse-razor-components.md @@ -75,8 +75,12 @@ For an example, see diff --git a/aspnetcore/release-notes/aspnetcore-9.0.md b/aspnetcore/release-notes/aspnetcore-9.0.md index 388d3ff02c3c..2ad98abaf2a2 100644 --- a/aspnetcore/release-notes/aspnetcore-9.0.md +++ b/aspnetcore/release-notes/aspnetcore-9.0.md @@ -4,7 +4,7 @@ author: rick-anderson description: Learn about the new features in ASP.NET Core 9.0. ms.author: riande ms.custom: mvc -ms.date: 5/20/2024 +ms.date: 5/21/2024 uid: aspnetcore-9 --- # What's new in ASP.NET Core 9.0 diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 87ddfc563320..41b39078533e 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -10,14 +10,14 @@ Mark any Razor component page with the new `[ExcludeFromInteractiveRouting]` att @attribute [ExcludeFromInteractiveRouting] ``` -Applying the attribute causes navigation to the page to exit from interactive routing. That is, 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 to switch to a different top-level render mode. +Applying the attribute causes navigation to the page to exit from 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. 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 `null`). +* Pages annotated with `[ExcludeFromInteractiveRouting]` adopt static SSR (`PageRenderMode` is assigned `null`). ```razor @@ -87,7 +87,7 @@ The new `KeyboardEventArgs.IsComposing` property indicates if the keyboard event ### Added `OverscanCount` parameter to `QuickGrid` -The Blazor `QuickGrid` component now exposes an `OverscanCount` property that specifies how many additional rows are rendered before and after the visible region when virtualization is enabled. +The [`QuickGrid`](xref:Microsoft.AspNetCore.Components.QuickGrid) component now exposes an `OverscanCount` property that specifies how many additional rows are rendered before and after the visible region when virtualization is enabled. The default `OverscanCount` is 3. The following example increases the `OverscanCount` to 4: