How to populate a table based on dropdown selection using Blazor

Question

I'm currently learning Blazor, however I can't seem to find or work out a solution for this issue.

I want to display further details of an Employee in a table, when I have selected their ID from a dropdown above the table.

My dropdown works successfully, it is able to populate the dropdown with EmployeeIDs, EmployeeNames from a call from my API.

However I am unable to work out how to take the selected EmployeeID and use that to get the all the Employee Details and populate a table.

I have 3 project in 1 solution, So I have a data project which holds my entities, contexts and repositories. An API project which holds my controllers and an WEB project which is my Blazor project.

EmployeeDetails.razor



@page "/employeedetails"

<h1 class="page-title">Employee  Details</h1>

@if (Employee == null)
{
                <p><em>Loading...</em></p>
}
else
{
    <select class="form-control" onchange="@Employees">

        <option value="">Select</option>

        @foreach (var employee in Employees)
        {
            <option value="@employee.EmployeeID">@employee.EmployeeID, @employee.EmployeeName</option>
        }
    </select>


    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Forename</th>
                <th>Surname</th>
                <th>Name</th>
                <th>DOB</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>Dept</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@Employee.EmployeeID</td>
                <td>@Employee.EmployeeTitle</td>
                <td>@Employee.EmployeeForename</td>
                <td>@Employee.EmployeeSurname</td>
                <td>@Employee.EmployeeName</td>
                <td>@Employee.EmployeeDOB</td>
                <td>@Employee.EmployeeEmail</td>
                <td>@Employee.EmployeeMobile</td>
                <td>@Employee.EmployeeDept</td>
            </tr>
        </tbody>
    </table>
}

EmployeeDetails.cs



using TestWebApp.DATA.Entities;
using TestWebApp.WEB.Services;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace TestWebApp.WEB.Pages
{
    public partial class EmployeeDetails
    {
        IEnumerable<EmployeeDet> Employees { get; set; }

        public EmployeeDet Employee { get; set; } = new EmployeeDet();

        [Inject]

        public IEmployeeDataService EmployeeDataService { get; set; }

        protected async override Task OnInitializedAsync()
        {
            Employees = (await EmployeeDataService.GetAllEmployees()).ToList();
        }

        public async void SelectedEmployee(EmployeeDet employee)
        {
            Employee = await EmployeeDataService.GetEmployeeDetailsByID(employee.EmployeeID);
        }

    }
}

IEmployeeDataSerivce.cs



using TestWebApp.DATA.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace TestWebApp.WEB.Services
{
    public interface IEmployeeDataService
    {
        Task<IEnumerable<EmployeeDet>> GetAllEmployee();
        Task<EmployeeDet> GetEmployeeDetailsByID(string id);
    }
}

EmployeeDataService.cs



using TestWebApp.DATA.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;

namespace TestWebApp.WEB.Services
{
    public class EmployeeDataService : IEmployeeDataService
    {
        private readonly HttpClient httpclient;

        public EmployeeDataService(HttpClient httpclient)
        {
            this.httpclient = httpclient;
        }
        public async Task<IEnumerable<EmployeeDet>> GetAllEmployees()
        {
            return await JsonSerializer.DeserializeAsync<IEnumerable<EmployeeDet>>
                (await httpclient.GetStreamAsync($"api/Employee"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
        }

        public async Task<EmployeeDet> GetEmployeeDetailsByID(string id)
        {
            return await JsonSerializer.DeserializeAsync<EmployeeDet>
                (await httpclient.GetStreamAsync($"api/Employee/{id}"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
        }
    }
}

EmployeeDet.cs




using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using Microsoft.EntityFrameworkCore;

#nullable disable

namespace TestWebApp.DATA.Entities
{
    [Keyless]
    [Table("employee_det")]
    public partial class EmployeeDet
    {
        [Required]
        [StringLength(12)]
        public string EmployeeID { get; set; }
        [StringLength(12)]
        public string EmployeeTitle { get; set; }
        [StringLength(30)]
        public string EmployeeForename { get; set; }
        [StringLength(30)]
        public string EmployeeSurname { get; set; }
        [StringLength(80)]
        public string EmployeeName { get; set; }
        [StringLength(8)]
        public string EmployeeDOB { get; set; }
        [StringLength(50)]
        public string EmployeeEmail { get; set; }
        [StringLength(15)]
        public string EmployeeMobile { get; set; }
        [StringLength(12)]
        public string EmployeeDept { get; set; }
    }
}

Answer 1

you can attach an event hook to the select tag to capture the employee id and then make api calls to the service.

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-6.0