Getting values from table in a Select box in Blazor

Question

I have a select box in my Blazor project that is using MudBlazor for components like the select box and I am trying to create a form to register an employee. There is a branch table that I would like to pull through in this form such that the user can pick a branch from the drop down and send that value to the register employees table which has a column for branch. The problem is that the select box does not show any values when clicked. It just shows a little blank rectangle. Does anyone know wat I am doing wrong?

Razor page:

       <MudSelect  @bind-Value="employee.Branch" For="@(()=>employee.Branch)" T="string"  Label="Branch name" AnchorOrigin="Origin.BottomCenter" Required="true">
                        @foreach (var branch in branch)
                        {
                        <MudSelectItem Value="@branch.Id">@branch.Description</MudSelectItem>
                        }         
       </MudSelect>

@code{
   private List<Branches> branch = new List<Branches>();
   private Branches branches = new Branches();
   private List<Branches> GetBranches(string Id)
    {
        branch=employeeService.GetBranches(Id);
        return branch;
    }
}

EmployeeService.cs:

 public List<Branches> GetBranches(string Id)
        {
            return _dbContext.Branches.Where(x => x.Id == Id).ToList();
        }

Answer 1

Problem is your loop is wrong

@foreach (var **branch** in branch)

Instead of Var branch use some other name because your Collection name and Item name and collection is same branch use Item

<MudSelect  @bind-Value="employee.Branch" For="@(()=>employee.Branch)" T="string"  Label="Branch name" AnchorOrigin="Origin.BottomCenter" Required="true">
                    @foreach (var item in branch)
                    {
                    <MudSelectItem Value="@item.Id">@item.Description</MudSelectItem>
                    }         
   </MudSelect>

Answer 2

protected override void OnInitialized()
    {
       GetBranches(with your id );
    }

If its coming as parameter then you need to use "SetParametersAsync" event

check this for life cycle

Answer 3

As you haven't shown much context, here's a modified version of your code that works:

Service and data classes

public class EmployeeService
{
    public async ValueTask<IEnumerable<Branch>> GetBranchesAsync(string Id)
    {
        // Emulate an async data get
        await Task.Delay(100);
        return new List<Branch>
        {
            new Branch { Id = "F", Description = "France"},
            new Branch { Id = "UK", Description = "United Kingdom"},
            new Branch { Id = "P", Description = "Portugal"},
        };
    }
}

public class Branch
{
    public string Id { get; set; } = string.Empty;
    public string Description { get; set; } = string.Empty;
}
public class Employee
{
    public string Id { get; set; } = string.Empty;

    public Branch Branch { get; set; } = new Branch();
}

Page:

@page "/"
@inject EmployeeService employeeService

<PageTitle>Index</PageTitle>

<MudSelect @bind-Value="employee.Branch.Id" Label="Branch name" AnchorOrigin="Origin.BottomCenter" Required="true">
    @foreach (var branch in branches)
    {
        <MudSelectItem Value="@branch.Id">@branch.Description</MudSelectItem>
    }
</MudSelect>

@code {
    private IEnumerable<Branch> branches = Enumerable.Empty<Branch>();
    private Branch branch = new Branch();
    private Employee employee = new Employee();

    protected async override Task OnInitializedAsync()
    {
        branches = await employeeService.GetBranchesAsync(string.Empty);
    }
}