Adding a Selected Row Feature to a Table in ASP.NET Blazor

For the bulk of my career, I’ve developed WinForms/WPF applications in windows. Blazor is exciting for me because it allows me to create apps that are as dynamic as the ones I build for thick client applications.

One such pattern that I like to use when building CRUD applications is the ability to select a row by clicking it. This is useful for building apps that use the master-detail UX pattern. Currently, when I google for a solution to this, I only get examples for Syncfusion’s datagrid. I have nothing against their datagrid, but I don’t think a simple master-detail view should require a paid UI framework.

The blog post here will contain just the relevant snippets to explain how to do this. If you’re interested in testing out a working demo you can pull down the code for the solution here: https://github.com/GrantByrne/BlazorSelectedRowExample

To start this off, I’ll create a model to represent an employee:

public class Employee
{
    public Guid Id { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public int Age { get; set; }

    public string Address { get; set; }
    
    public string City { get; set; }

    public string State { get; set; }

    public string ZipCode { get; set; }
}

To generate something realistic sample data, I’m pulling in a NuGet package called Faker.Net. The populates all the fields that need somewhat believable data.

public class EmployeeService
{
    public Task<Employee[]> GetEmployeesAsync()
    {
        var employeeCount = 10;

        var employees = new Employee[employeeCount];
        for(var x = 0; x < employeeCount; x++)
        {
            var employee = new Employee();

            employee.Id = Guid.NewGuid();
            employee.FirstName = Faker.Name.First();
            employee.LastName = Faker.Name.Last();
            employee.Age = Faker.RandomNumber.Next(18, 100);
            employee.Address = Faker.Address.StreetAddress();
            employee.City = Faker.Address.City();
            employee.State = Faker.Address.UsState();
            employee.ZipCode = Faker.Address.ZipCode();

            employees[x] = employee;
        }

        return Task.FromResult(employees);
    }
}

Next to build out the UI:

@using BlazorSelectedRowExample.Data
@page "/"

<h1>Employees</h1>

<div class="row">
    <div class="col">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var employee in _employees)
                {
                    <tr @onclick="() => Select(employee)">
                        <td>
                            @employee.LastName, @employee.FirstName
                        </td>
                        <td>
                            @employee.City, @employee.State
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    @if (_selectedEmployee != null)
    {
        <div class="col">
            <ul>
                <li><b>Id</b> - @_selectedEmployee.Id</li>
                <li><b>First Name</b> - @_selectedEmployee.FirstName</li>
                <li><b>Last Name</b> - @_selectedEmployee.LastName</li>
                <li><b>Age</b> - @_selectedEmployee.Age</li>
                <li><b>Address</b> - @_selectedEmployee.Address</li>
                <li><b>City</b> - @_selectedEmployee.City</li>
                <li><b>State</b> - @_selectedEmployee.State</li>
                <li><b>Zip Code</b> - @_selectedEmployee.ZipCode</li>
            </ul>
        </div>
    }
</div>

@code
{
    private Employee[] _employees;
    private Employee _selectedEmployee;
    private readonly EmployeeService _employeeService = new EmployeeService();

    protected override async Task OnInitializedAsync()
    {
        _employees = await _employeeService.GetEmployeesAsync();
    }

    private void Select(Employee employee)
    {
        _selectedEmployee = employee;
    }
}

The UI is split up into two columns. The left column is a list of employees with some brief details. The right column provides details on a specific employee.

When the view is initialized, it loads up the full list of employees in a class level array to build out the table. I’ve added an event handler for the Blazor OnClick event which sets another class level variable for when an employee is focused. It only displays the details about the employee when that person is selected.

And Here’s What it Looks Like

Thanks for reading to the end. I hope this helps you out in your Blazor development.

Leave a Reply Cancel reply