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
- Download or clone the tutorial project code from https://github.com/cornflourblue/blazor-webassembly-display-list-of-items
- Start the app by running
dotnet run
from the command line in the project root folder (where the BlazorApp.csproj file is located) - 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, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Blazor Help?
Search fiverr to find help quickly from experienced Blazor developers.