I am having the below inputselect and all I want is a cascading ones, so if you choose a branch, the tables will be filtered. I’ve been stuck for over a week and not sure why its not working.

Tried onchange and bind-Value and just value and its still not working

Any ideas on how can I fix this??

Also, how can i debug such an issue??? It should be easier to see the error somewhere as it just goes blank without mentioning whats the error

@page "/Sample"
@attribute [StreamRendering]
@inject IConfiguration config
@using JoryApp.Components.Models
@using JoryApp.Dynamics
@using Microsoft.AspNetCore.Authorization
@inject AuthenticationStateProvider GetAuthenticationStateAsync
@attribute [Authorize]
@using System.ComponentModel.DataAnnotations
@using JoryApp.Data
@using Blazored.LocalStorage


<AuthorizeView Context="authContext">
    <EditForm Context="editContext" Model="Order" Method="Post" OnValidSubmit="CreateOrder">

        <h2>Create a sample order</h2>
        <hr />
        <ValidationSummary class="text-danger" role="alert" />
        <div class="form-floating mb-3">

              <InputSelect class="form-select form-select-sm"
                         TValue="string"
                         Value="Order.Branch"
                         ValueChanged="@( 
(string s) => OnValueChanged(s))"
                         ValueExpression="( () => Order.Branch )">
                <option value="0" disabled="disabled" selected>Filter By</option>
                @if (Branches != null)
                {
                    @foreach (Branch branch in Branches )
                    {
                        <option value="@branch.jr_branchid">@branch.jr_name</option>
                    }
                }
            </InputSelect>
        <label class="form-label">Branch</label>
        <ValidationMessage For="() => Order.Branch" class="text-danger" />
    </div>

    <div class="form-floating mb-3">
        <InputSelect @bind-Value="Order.Table" class="form-control" aria-required="true" placeholder="your branch">
            @if (CurrentTables != null)
            {
                @foreach (Table tbl in CurrentTables)
                {
                    <option value="@tbl.jr_tableid">@tbl.jr_name</option>
                }
            }
        </InputSelect>            <label class="form-label">Table</label>
        <ValidationMessage For="() => Order.Table" class="text-danger" />
    </div>
           <div>
        <button type="submit" class="w-100 btn btn-lg btn-primary">Create Order</button>
    </div>


</EditForm>

@code {

private EditContext? editContext;

private string? errorMessage;

[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;

[SupplyParameterFromForm]
private OrderModel Order { get; set; } = new();

private List<Branch> Branches { get; set; }
private Dynamics.Account? currentAccount;
private Dynamics.Contact? currentContact;

private List<Table> CurrentTables { get; set; }


public async Task OnValueChanged(string branchId)
{
    Order.Branch = branchId;
    if (!string.IsNullOrEmpty(branchId) && currentContact != null)
    {
        await RefreshTables(branchId);
    }
    else
    {
        CurrentTables = null;
    }
    await InvokeAsync(StateHasChanged);
}


private async Task RefreshTables(string selectedBranchId)
{
    if (!string.IsNullOrEmpty(selectedBranchId))
    {
        List<Table> tables = Dynamics.BranchesData.GetTables(config, selectedBranchId, currentContact.parentcustomerid_account.accountid);
        if (tables != null)
        {
            CurrentTables = tables;
        }
    }
    await InvokeAsync(StateHasChanged);
}

public void CreateOrder()
{

}

}