Published:

Blazor WebAssembly - Display a list of items

Other versions available:

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.

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Supported by