Employee list blazor component

In this video we will discuss implementing our first blazor component - EmployeeList component. We want this component to display list of employees as in the image below.

// EmployeeList.razor

@page "/"
@inherits EmployeeListBase

<h3>Employee List</h3>

<div class="card-deck">
    @foreach (var employee in Employees)
    {
    <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
        <div class="card-header">
            <h3>@employee.FirstName @employee.LastName</h3>
        </div>
        <img class="card-img-top imageThumbnail" src="@employee.PhotoPath" />
        <div class="card-footer text-center">
            <a href="#" class="btn btn-primary m-1">View</a>

            <a href="#" class="btn btn-primary m-1">Edit</a>

            <a href="#" class="btn btn-danger m-1">Delete</a>
        </div>
    </div>
    }
</div>

Code explanation

@page "/"
@inherits EmployeeListBase

The single forward slash in the page directive specifies to render this component when we navigate to the root application URL.
@inherits attribute specifies the base class for this component.

<div class="card-deck">
    @foreach (var employee in Employees)
    {
        <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
            <div class="card-header">
                <h3>@employee.FirstName  @employee.LastName</h3>
            </div>

            <img class="card-img-top imageThumbnail" src="@employee.PhotoPath" />


            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary m-1">View</a>

                <a href="#" class="btn btn-primary m-1">Edit</a>

                <a href="#" class="btn btn-danger m-1">Delete</a>
            </div>
        </div>
    }
</div>

Each employee is displayed using a Bootstrap card. To loop through the list of employees we are using a foreach loop

// EmployeeListBase.cs

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Pages
{
    public class EmployeeListBase : ComponentBase
    {
        public IEnumerable<Employee> Employees { get; set; }

        protected override Task OnInitializedAsync()
        {
            LoadEmployees();
            return base.OnInitializedAsync();
        }

        private void LoadEmployees()
        {
            Employee e1 = new Employee
            {
                EmployeeId = 1,
                FirstName = "John",
                LastName = "Hastings",
                Email = "David@pragimtech.com",
                DateOfBrith = new DateTime(1980, 10, 5),
                Gender = Gender.Male,
                Department = new Department { DepartmentId = 1, DepartmentName = "IT" },
                PhotoPath = "images/john.png"
            };

            Employee e2 = new Employee
            {
                EmployeeId = 2,
                FirstName = "Sam",
                LastName = "Galloway",
                Email = "Sam@pragimtech.com",
                DateOfBrith = new DateTime(1981, 12, 22),
                Gender = Gender.Male,
                Department = new Department { DepartmentId = 2, DepartmentName = "HR" },
                PhotoPath = "images/sam.jpg"
            };

            Employee e3 = new Employee
            {
                EmployeeId = 3,
                FirstName = "Mary",
                LastName = "Smith",
                Email = "mary@pragimtech.com",
                DateOfBrith = new DateTime(1979, 11, 11),
                Gender = Gender.Female,
                Department = new Department { DepartmentId = 1, DepartmentName = "IT" },
                PhotoPath = "images/mary.png"
            };

            Employee e4 = new Employee
            {
                EmployeeId = 3,
                FirstName = "Sara",
                LastName = "Longway",
                Email = "sara@pragimtech.com",
                DateOfBrith = new DateTime(1982, 9, 23),
                Gender = Gender.Female,
                Department = new Department { DepartmentId = 3, DepartmentName = "Payroll" },
                PhotoPath = "images/sara.png"
            };

            Employees = new List<Employee> { e1, e2, e3, e4 };
        }
    }
}

Blazor components have several life cycle methods. OnInitializedAsync is the most common life cycle method. We are overriding this method to retrieve Employees data. 

At the moment we have Employees data hard-coded in the component. As we progress through this course we will discuss how to retrieve this data from a database by calling a RESTful service.  

// MainLayout.razor

For styling, include Boostrap container class on the <div> element that contains @Body

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="content px-4 container">
        @Body
    </div>
</div>

// Site.css

.imageThumbnail {
    height: 200px;
    width: auto;
}

Download and include the following 4 images in wwwroot/images folder.