
Blazor WASM Virtualization
blazor
22 Articles
In this article, let's learn about virtualization and how to use Virtualize
component to load huge data in
Blazor WASM application.
Table of Contents
- Why Virtualization?
- When Virtualization?
- Without Virtualization
- With Virtualization
- Virtualize Component
- Item provider delegate
- Placeholder
- Item Size
- Overscan count
- Statechanges
- Summary
Why Virtualization?
Loading a large dataset or displaying data in a grid is a more common way to list data in many applications. Virtualization is a technique for limiting UI rendering to just the parts that are currently visible in UI. This will improve the rendering performance and gives better user experience. 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.
When Virtualization?
Use the Virtualize
component when:
- Rendering a set of data items in a loop. For example, loading Recommended Content in I ❤️ .NET
- Most of the items aren't visible due to scrolling.
- The rendered items are the same size.
When the user scrolls to a certain point in the Virtualize
component's list of items, the component
calculates the visible items to show. Unseen items aren't rendered.
Without Virtualization
Without virtualization, a typical list data might use a C# foreach
loop to render each item in a list.
In the following example:
tableOfContents.Contents
is a collection of contents.- The
VirtualizationContent
displays details about each content. -
The
@key directive attribute
preserves the relationship of eachVirtualizationContent
component to its rendered content by the content's ContentId.
Code Sample - Without Virtualization
Demo - Without Virtualization Demo
To demonstrate how list renders without virtualization, let's create a list of contents using foreach
loop.

Unit Testing Filters in ASP.NET Web API
Abdul Rahman

Blazor WASM Publishing to AWS Amplify
Abdul Rahman

Dependency Inversion Principle in SOLID
Abdul Rahman

Interface Segregation Principle in SOLID
Abdul Rahman

Liskov Substitution Principle in SOLID
Abdul Rahman

Open Closed Principle in SOLID
Abdul Rahman

Single Responsibility Principle in SOLID
Abdul Rahman

Convert HTML to PDF Report in .NET
Abdul Rahman

SOLID Principles Introduction
Abdul Rahman

Blazor WASM Dockerizing
Abdul Rahman

Creational Design Pattern - Singleton
Abdul Rahman

Design Pattern Introduction
Abdul Rahman

Understanding LINQ Deferred, Immediate, Streaming and Non-Streaming Executions
Abdul Rahman

Using LINQ For Each to Iterate Collections
Abdul Rahman

Generate PDF Report using Quest PDF in .NET
Abdul Rahman

Using LINQ Count Min Max Average and Sum to Aggregate data
Abdul Rahman

Using LINQ Group By to group data
Abdul Rahman

Generate Excel Report using Closed XML in .NET
Abdul Rahman

Simulating Left Outer Join using LINQ
Abdul Rahman

Using LINQ Group Join to combine data
Abdul Rahman

Using LINQ Join to combine data
Abdul Rahman

Using LINQ Concat to combine data
Abdul Rahman

Using LINQ Union to combine data
Abdul Rahman

Using LINQ Intersect to Find Common data
Abdul Rahman

Using LINQ Except to Find Difference in data
Abdul Rahman

Using LINQ Sequence Equal to Find Equality of data
Abdul Rahman

Using LINQ Contains to Check Data
Abdul Rahman

Using LINQ Any to Find Type of Data
Abdul Rahman

Using LINQ All to Find Type of Data
Abdul Rahman

Using LINQ Chunk to Split Data
Abdul Rahman

Using LINQ Distinct to Select Unique Data
Abdul Rahman

Using LINQ Skip to Select Specific Data
Abdul Rahman

Using LINQ Take to Select Specific Data
Abdul Rahman

Using LINQ Single to Select Single Data
Abdul Rahman

Using LINQ Last to Select Single Data
Abdul Rahman

Using LINQ First to Select Single Data
Abdul Rahman

Profiling Web API with Mini Profiler
Abdul Rahman

Python Dynamic Interop with Dotnet
Abdul Rahman

Using LINQ Where to Filter Data
Abdul Rahman

Using LINQ OrderBy to Sort Data
Abdul Rahman

Using LINQ to Select and Project Data
Abdul Rahman

LINQ Introduction
Abdul Rahman

Blazor WASM Pre Rendering
Abdul Rahman

Dependency Injection Lifetimes in .NET
Abdul Rahman

Introducing Dependency Injection in .NET
Abdul Rahman

Blazor WASM Publishing to GitHub Pages
Abdul Rahman

Blazor WASM Publishing to IIS
Abdul Rahman

Blazor WASM Dynamic Component
Abdul Rahman

Types of Middleware in ASP.NET
Abdul Rahman

Introducing Middleware in ASP.NET
Abdul Rahman

Blazor WASM Virtualization
Abdul Rahman

Blazor WASM Forms Validation
Abdul Rahman

Blazor WASM Forms
Abdul Rahman

Blazor WASM Communication Between Components
Abdul Rahman

OOPS Abstraction
Abdul Rahman

Blazor WASM Controlling Head Content
Abdul Rahman

OOPS Encapsulation
Abdul Rahman

Blazor WASM Data Binding
Abdul Rahman

Blazor WASM Event Handling And Event Arguments
Abdul Rahman

Blazor WASM Components
Abdul Rahman

Implementing TDD in C# .Net
Abdul Rahman

Introducing TDD in C# .Net
Abdul Rahman

Blazor WASM Introduction
Abdul Rahman

Blazor - SPA from ASP.NET Family
Abdul Rahman

Importance of Status Code in Web API
Abdul Rahman

Blazor WASM App Settings
Abdul Rahman

Blazor WASM Lazy Loading
Abdul Rahman

Blazor WASM Styles and CSS Isolation
Abdul Rahman

Blazor WASM Javascript Interop and Isolation
Abdul Rahman

Blazor WASM Dark Theme and Light Theme
Abdul Rahman

Blazor WASM Error Logging
Abdul Rahman

Blazor WASM Exception Handling and Error Boundary
Abdul Rahman
With Virtualization
If the collection contains thousands of contents, rendering the contents takes a long time and users experience a noticeable UI lag. Most of the
contents aren't seen because they fall outside of the height of the <div>
element.
Instead of rendering the entire list of contents at once, replace the foreach
loop in the preceding example
with the Virtualize
component:
-
Specify
tableOfContents.Contents
as a fixed item source toVirtualize<TItem>.Items
. Only the currently visible contents are rendered by theVirtualize
component. -
Specify a context for each content with the
Context
parameter. In the following example,content
is used as the context, which provides access to each content's details.
Code Sample - With Virtualization
Demo - With Virtualization Demo
To demonstrate how list renders with virtualization, let's create a list of contents using Virtualize
Component.
If a context isn't specified with the Context
parameter, use the value of
context
in the item content template to access each contents's details:
Virtualize Component
The Virtualize
component:
- Calculates the number of items to render based on the height of the container and the size of the rendered items.
- Recalculates and rerenders the items as the user scrolls.
- Only fetches the slice of records from an external API that correspond to the current visible region, instead of downloading all of the data from the collection.
The item content for the Virtualize
component can include:
- Plain HTML and Razor code, as the preceding example shows.
- One or more Razor components.
- A mix of HTML/Razor and Razor components.
Item provider delegate
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
Virtualize<TItem>.ItemsProvider
parameter that asynchronously retrieves the requested items on demand.
In the following example, the LoadContents
method provides the items to the
Virtualize
component:
Code Sample - Item Provider Delegate
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.
A Virtualize
component can only accept one item source from its parameters, so don't attempt
to simultaneously use an items provider and assign a collection to Items. If both are assigned, an
InvalidOperationException
is thrown when the component's parameters are set at runtime.
Placeholder
Because requesting items from a remote data source might take some time, you have the option to render a placeholder with item content:
Code Sample - Virtualization with Placeholder
-
Use a
Placeholder (<Placeholder>...</Placeholder>)
to display content until the item data is available. - Use
Virtualize<TItem>.ItemContent
to set the item template for the list.
Item size
The height of each item in pixels can be set with Virtualize<TItem>.ItemSize
(default: 50). By default,
the Virtualize
component measures the rendering size (height) of individual items after the initial render
occurs. Use ItemSize to provide an exact item size in advance to assist with accurate initial render performance and to ensure the correct scroll
position for page reloads. If the default ItemSize causes some items to render outside of the currently visible view, a second re-render is
triggered. To correctly maintain the browser's scroll position in a virtualized list, the initial render must be correct. If not, users might view
the wrong items. The following example changes the height of each item from the default of 50 pixels to 25 pixels:
Code Sample - Virtualization with Item Size
Overscan count
Virtualize<TItem>.OverscanCount
determines and controls 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). The following example changes the overscan count from the default of three items to four items:
Code Sample - Virtualization with Overscan Count
Statechanges
When making changes to items rendered by the Virtualize
component, call StateHasChanged to force
re-evaluation and rerendering of the component.
Summary
In this article, we learn't how to use Virtualize
component to load huge data without compromising on
performance and user experience.