How can I get a cascading value in Blazor?

Question

I have a form in which the user first selects a company in a dropdownlist, and then based of of this they can select a project from a dropdownlist. The projects queried from the DB are based on the user and the company.

I have tried to follow an older post about cascadingdropdownlist: https://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor but this is rather old, and seems quite different from the current documentation. A lot has happened with Blazor in the last year. In reading the current official Blazor documentation (https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#cascading-values-and-parameters) I see they have a "HTML"-tag called "CascadingValue" would this be the right approach for me going forward? If so could someone please show me an example of how this would be done?

<EditForm Model="@expense" Context="formContext" OnValidSubmit="@HandleValidSubmit">
                    <DataAnnotationsValidator />
                    <ValidationSummary />
<div style="float:left;width: 40%;">
                        <label asp-for="Client" class="control-label">Selskap</label>
                        <select asp-for="Client" class="form-control" @bind="@expense.Client">
                            <option></option>

                            @foreach (var ExpClient in cList)
                            {
                                <option selected="selected">
                                    @ExpClient.client
                                </option>
                                <option value="@ExpClient.client">@ExpClient.client</option>
                            }
                        </select>
                    </div>
                    <div style="clear:both;">&nbsp;</div>
                    <div style="float:left;width: 50%;">
                        <label asp-for="Project" class="control-label">Prosjekt</label>
                        <select asp-for="Project" class="form-control" @bind="@expense.Project">
                            <option></option>
                            @foreach (var ExpPro in ProList)
                            {
                                <option selected="selected">
                                    @ExpPro.Project
                                </option>
                                <option value="@ExpPro.Project">@ExpPro.Project</option>
                            }
                        </select>
                    </div>
</EditForm>

@code{

protected void GetExpProList()
    {
               ProList = objexpense.GetExpProList(userN).ToList();
    }
}

Right now it only gets projects based on username, this works but I also need to get the selected client, so that both usernN and client is passed to the method that queries the DB.

If someone could point me in the right direction here I would appreciate it.

EDIT: My solution ended up looking like this, based of the answers I got here and also influenced by Mikesdotnetting (https://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor):

        <InputSelect id="Client" class="form-control" @bind-Value="@expense.Client">
                        <option value=@(0)></option>

                        @foreach (var ExpClient in cList)
                {

                        <option value="@ExpClient.client">@ExpClient.client</option>
                }
                    </InputSelect>
                </div>
                @if (expense.Client != default ){
                <div style="clear:both;">&nbsp;</div>
                <div style="float:left;width: 50%;">

                    <label id="Project" class="control-label">Prosjekt</label>
                    <InputSelect id="Project" class="form-control" @bind-Value="@expense.Project">
                        <option value=@(0)></option>
                        @foreach (var ExpPro in objexpense.GetExpProList(userN,expense.Client).ToList())
                {

                        <option value="@ExpPro.Project">@ExpPro.Project</option>
                }
                    </InputSelect>
                </div>
                }

Answer 1

There is a component called InputSelect, to which you can bind a value.

<InputSelect @bind-Value="selectedClient" class="form-control">
    @foreach (var ExpClient in cList)
    {
        <option value="@ExpClient.client">@ExpClient.client</option>
    }
</InputSelect>

And for the second drop-down something like this:

<InputSelect @bind-Value="selectedProject" class="form-control">
    @foreach (var ExpPro in objexpense.GetExpProList(userN, selectedClient).ToList())
    {
        <option value="@ExpPro.Project">@ExpPro.Project</option>
    }
</InputSelect>