Blazor WebAssembly - Display a list of items

Other versions available:

• Angular: Angular
• Vue: Vue 3, Vue 2
• React: React

This is a quick example to show how to display a list of items in ASP.NET Core Blazor WebAssembly.

The example simply renders an array of user objects as rows in a table using a foreach loop inside the home page razor component (/Pages/Index.razor).

Here it is in action:(Hosted on GitHub Pages at https://cornflourblue.github.io/blazor-webassembly-display-list-of-items/)

Example Blazor component that renders the users array

The blazor home component is a razor component that declares the users state property in the @code hook function and sets the initial state to a hardcoded array of users.

In the return JSX the component loops over the users with the array map function (users.map(user => ...)) and renders a table row for each user that includes the user name, email and role.

@page "/"

<div class="container">
    <h3 class="p-3 text-center">Blazor WebAssembly - Display a list of items</h3>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in users)
            {
                <tr>
                    <td>@user.FirstName @user.LastName</td>
                    <td>@user.Email</td>
                    <td>@user.Role</td>
                </tr>
            }
        </tbody>
    </table>
</div>

@code {
    private IEnumerable<User> users = new[] {
        new User { Id = 1, FirstName = "Frank", LastName = "Murphy", Email = "[email protected]", Role = "User" },
        new User { Id = 2, FirstName = "Vic", LastName = "Reynolds", Email = "[email protected]", Role = "Admin" },
        new User { Id = 3, FirstName = "Gina", LastName = "Jabowski", Email = "[email protected]", Role = "Admin" },
        new User { Id = 4, FirstName = "Jessi", LastName = "Glaser", Email = "[email protected]", Role = "User" },
        new User { Id = 5, FirstName = "Jay", LastName = "Bilzerian", Email = "[email protected]", Role = "User" }
    };
}

Tools required to run the Blazor Example Locally

To develop and run ASP.NET Core Blazor applications locally, download and install the following:

• .NET Core SDK - includes the .NET Core runtime and command line tools
• Visual Studio Code - code editor that runs on Windows, Mac and Linux
• C# extension for Visual Studio Code - adds support to VS Code for developing .NET Core applications

For detailed instructions on setting up your local .NET Core dev environment see ASP.NET Core - Setup Development Environment.

Running the Blazor Example Locally

1. Download or clone the tutorial project code from https://github.com/cornflourblue/blazor-webassembly-display-list-of-items
2. Start the app by running dotnet run from the command line in the project root folder (where the BlazorApp.csproj file is located)
3. Open a new browser tab and navigate to the URL http://localhost:5000

NOTE: To enable hot reloading during development so the app automatically restarts when a file is changed, start the app with the command dotnet watch run.