You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support. 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 or a table with many rows and only a subset of items is required to be visible at any given time. Blazor provides the `Virtualize` component that can be used to add virtualization to an app's components.
16
+
Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support. 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. Blazor provides the `Virtualize` component that can be used to add virtualization to an app's components.
17
17
18
18
::: moniker range=">= aspnetcore-5.0"
19
19
20
-
Without virtualization, a typical list or table-based component might use a C# [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop to render each item in the list or each row in the table:
20
+
Without virtualization, a typical list might use a C# [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop to render each item in the list:
21
21
22
22
```razor
23
-
<table>
24
-
@foreach (var employee in employees)
25
-
{
26
-
<tr>
27
-
<td>@employee.FirstName</td>
28
-
<td>@employee.LastName</td>
29
-
<td>@employee.JobTitle</td>
30
-
</tr>
31
-
}
32
-
</table>
23
+
@foreach (var employee in employees)
24
+
{
25
+
<p>
26
+
@employee.FirstName @employee.LastName has the
27
+
job title of @employee.JobTitle.
28
+
</p>
29
+
}
33
30
```
34
31
35
32
If the list contains thousands of items, then rendering the list may take a long time. The user may experience a noticeable UI lag.
36
33
37
34
Instead of rendering each item in the list all at one time, replace the [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop with the `Virtualize` component and specify a fixed item source with `Items`. Only the items that are currently visible are rendered:
If not specifying a context to the component with `Context`, use the `context` value (`@context.{PROPERTY}`) in the item content template:
52
46
53
47
```razor
54
-
<table>
55
-
<Virtualize Items="@employees">
56
-
<tr>
57
-
<td>@context.FirstName</td>
58
-
<td>@context.LastName</td>
59
-
<td>@context.JobTitle</td>
60
-
</tr>
61
-
</Virtualize>
62
-
</table>
48
+
<Virtualize Items="@employees">
49
+
<p>
50
+
@context.FirstName @context.LastName has the
51
+
job title of @context.JobTitle.
52
+
</p>
53
+
</Virtualize>
63
54
```
64
55
65
56
The `Virtualize` component calculates how many items to render based on the height of the container and the size of the rendered items.
66
57
58
+
The item content for the `Virtualize` component can include:
59
+
60
+
* Plain HTML and Razor code, as the preceding example shows.
61
+
* One or more Razor components.
62
+
* A mix of HTML/Razor and Razor components.
63
+
67
64
## Item provider delegate
68
65
69
66
If you don't want to load all of the items into memory, you can specify an items provider delegate method to the component's `ItemsProvider` parameter that asynchronously retrieves the requested items on demand:
The items provider receives an `ItemsProviderRequest`, which specifies the required number of items starting at a specific start index. The items provider then retrieves the requested items from a database or other service and returns them as an `ItemsProviderResult<TItem>` along with a count of the total items. The items provider can choose to retrieve the items with each request or cache them so that they're readily available. Don't attempt to use an items provider and assign a collection to `Items` for the same `Virtualize` component.
Because requesting items from a remote data source might take some time, you have the option to render a placeholder (`<Placeholder>...</Placeholder>`) until the item data is available:
`OverscanCount` determines how many additional items are rendered before and after the visible region. This setting helps to reduce the frequency of rendering during scrolling. However, higher values result in more elements rendered in the page (default: 3):
0 commit comments