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:
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
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(); }}