Display data from two or more tables in Blazor

As should be obvious from the picture, we are showing the accompanying worker subtleties.

Id

Email

Department Name

Id, Name, and Email originate from the Employees database table and the Department Name originates from the Departments table. Here we are working with two database tables, yet you can utilize a similar method to work with three or considerably more database tables.

Employee Class

The Department property conveys the representative Department information i.e DepartmentId and DepartmentName.

public class Employee
{
    public int EmployeeId { get; set; }
    [Required]
    [MinLength(2)]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    public string Email { get; set; }
    public DateTime DateOfBrith { get; set; }
    public Gender Gender { get; set; }
    public int DepartmentId { get; set; }
    public Department Department { get; set; }
    public string PhotoPath { get; set; }
}

EmployeeRepository

In the Employee substance, to include related element information like Department, chain the Include() strategy. Chain ThenInclude() technique in the event that you need to include extra related elements like aptitudes information, experience information, and so on.

public class EmployeeRepository : IEmployeeRepository
{
    private readonly AppDbContext appDbContext;

    public EmployeeRepository(AppDbContext appDbContext)
    {
        this.appDbContext = appDbContext;
    }

    public async Task<Employee> GetEmployee(int employeeId)
    {
        return await appDbContext.Employees
            .Include(e => e.Department)
            .FirstOrDefaultAsync(e => e.EmployeeId == employeeId);
    }
}

EmployeeDetails Component

@page "/employeedetails/{id}"
@page "/employeedetails"
@inherits EmployeeDetailsBase

@if (Employee == null || Employee.Department == null)
{
    <div class="spinner"></div>
}
else
{
    <div class="row justify-content-center m-3">
        <div class="col-sm-8">
            <div class="card">
                <div class="card-header">
                    <h1>@Employee.FirstName @Employee.LastName</h1>
                </div>

                <div class="card-body text-center">
                    <img class="card-img-top" src="@Employee.PhotoPath" />

                    <h4>Employee ID : @Employee.EmployeeId</h4>
                    <h4>Email : @Employee.Email</h4>
                    <h4>Department : @Employee.Department.DepartmentName</h4>
                </div>
                <div class="card-footer text-center">
                    <a href="/" class="btn btn-primary">Back</a>
                    <a href="#" class="btn btn-primary">Edit</a>
                    <a href="#" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
}

The accompanying invalid check is required. Else you will get a NullReferenceException, if either Employee or Department properties are not instated when the view references those properties.

@if (Employee == null || Employee.Department == null)
{
    <div class="spinner"></div>
}