Blazor .NET 8 - InputSelect: Creating Dropdown from Models

I just followed a course on Blazor .NET 8 from iamtimcorey.com.

I want to create a dropdown form using the InputSelect option from the native form. But I cannot figure out how to populate the dropdown using a column from my model that comes from my SQL database. The example on the course was with a custom list and I cannot fill the gaps with my limited knowledge.

I want to use data from this model:

Models

I have two stored procedures to interact with the database. One of them gets all the data.

The other one gets only two columns: distinct NoFacture (so those numbers do not repeat in the dropdown) and the customer that is linked to that NoFacture (NoFacture means invoice number).

Stored procedures called from Blazor App

Stored procedure result

I want to list all the NoFacture on the dropdown using the GetCommandesToShip() method.

On my Razor component / page, I initialized an empty model I want to fill with the selected NoFacture. But I am unable to fill the InputSelect with my data.

See this screenshot:

Dropdown creation test using Inputselect

I know there is a way to use objects, but I do not have an example and I cannot figure it out.

Here's my code from the Blazor App:

<h1>Expédition / Scanner</h1>

@if (CommandesDetails == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <EditForm Enhance Model="CommandeNoForm" method="post" FormName="noCommandeInput" OnSubmit="SubmitNoCommande">
        <div>
            <br/>
            <label>No de Commande</label>
            <br/>
            <InputSelect @bind-Value="@CommandesNoForm.NoFacture">
                @foreach (var comm in Enum.GetValues(Commandes.NoFacture))
                {
                    <option value="@comm">@comm.ToString()</option>
                }
            </InputSelect>
        </div>
    </EditForm>

}

@code {

    [SupplyParameterFromForm]
    private CommandesDetailsModel CommandeNoForm { get; set; } = new();
    private void SubmitNoCommande()
    {
    }

    private IEnumerable<CommandesDetailsModel>? Commandes;
    private IEnumerable<CommandesDetailsModel>? CommandesDetails;

    protected override async Task OnInitializedAsync()
    {
        Commandes = await AcombaSql.GetCommandesToShip();
        CommandesDetails = await AcombaSql.GetCommandesDetailsToShip();
    }
}

Solution

Here's the code I ended up using and got working:

    <h1>Expédition / Scanner</h1>

@if (Commandes == null)
{
    <p><em>Loading...</em></p>
    @* <div class="spinner"></div> *@
}
else
{
    <EditForm Enhance Model="CommandeNoForm" method="post" FormName="noCommandeInput" OnSubmit="SubmitNoCommande">
        <div>
            <br/>
            <label>No de Commande</label>
            <br/>
            <InputSelect @bind-Value="@CommandeNoForm.NoFacture">
                @foreach (var comm in Commandes))
                {
                    <option value="@comm.NoFacture">@comm.NoFacture - @comm.ClientFacturation_NomClient</option>
                }
            </InputSelect>
        </div>
    </EditForm>



}


@code {

    [SupplyParameterFromForm]
    private CommandesDetailsModel CommandeNoForm { get; set; } = new();
    private void SubmitNoCommande()
    {

    }

    private IList<CommandesDetailsModel>? Commandes;
    private IList<CommandesDetailsModel>? CommandesDetails;

    protected override async Task OnInitializedAsync()
    {
        Commandes = (await AcombaSql.GetCommandesToShip()).ToList();
        CommandesDetails = (await AcombaSql.GetCommandesDetailsToShip()).ToList();
    }

}