Blazor .NET 8 — InputSelect: создание раскрывающегося списка из моделей

Поскольку собрать рабочий пример на основе вашего кода сложно, я создал демо-версию.

Сначала специальный компонент на основе InputSelect:

БлазрИнпутселект

@*
/// ============================================================
/// Author: Shaun Curtis, Cold Elm Coders
/// License: Use And Donate
/// If you use it, donate something to a charity somewhere
/// ============================================================
*@

@using System.Linq.Expressions
@typeparam TValue
@typeparam TListItem

<InputSelect @attributes=AdditionalAttributes
             TValue = "TValue"
             Value=this.Value
             ValueChanged=this.OnChange
             ValueExpression=this.ValueExpression>

    @if (this.Value is null)
    {
        <option selected disabled>@this.PlaceholderText</option>
    }

    @foreach (var option in this.DisplayOptionsItems)
    {
        <option value = "@(this.OptionValueDelegate(option))">@(this.OptionTextDelegate(option))</option>
    }

</InputSelect>

@code {
    [Parameter] public TValue? Value { get; set; }
    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
    [Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }

    [Parameter, EditorRequired] public IEnumerable<TListItem> DisplayOptionsItems { get; set; } = default!;
    [Parameter, EditorRequired] public Func<TListItem, string> OptionValueDelegate { get; set; } = default!;
    [Parameter, EditorRequired] public Func<TListItem, string> OptionTextDelegate { get; set; } = default!;

    [Parameter] public string PlaceholderText { get; set; } = " -- Select an Option -- ";
    [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }

    protected override void OnInitialized()
    {
        // Check we have a Options list if not throw an exception before we try and render a null list
        ArgumentNullException.ThrowIfNull(this.DisplayOptionsItems);
        ArgumentNullException.ThrowIfNull(this.OptionValueDelegate);
        ArgumentNullException.ThrowIfNull(this.OptionTextDelegate);
    }

    private Task OnChange(TValue value)
        => this.ValueChanged.InvokeAsync(value);
}

А затем демонстрационная страница, демонстрирующая, как ее использовать:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<BlazrInputSelect class = "form-select"
                  DisplayOptionsItems = "_countries"
                  OptionTextDelegate = "(x) => x.Name"
                  OptionValueDelegate = "(x) => x.Id.ToString()"
                  TValue = "Guid?"
                  TListItem = "Country"
                  @bind-Value = "_selectedCountryId" />

<div class = "bg-dark text-white m-2 p-2">
    <pre>@_selectedCountry</pre>
</div>
@code {
    private Guid? _selectedCountryId;

    private string _selectedCountry => _countries.SingleOrDefault(item => item.Id == _selectedCountryId)?.Name ?? "NoneSelected";

    public record Country(Guid Id, string Name, string Code);

    private List<Country> _countries = new()
    {
        new(Guid.NewGuid(), "United Kingdom", "GB"),
        new(Guid.NewGuid(), "France", "F"),
        new(Guid.NewGuid(), "Spain", "E"),
        new(Guid.NewGuid(), "Portugal", "P"),
    };
}

Вы должны быть в состоянии адаптировать это к своему контексту.

Вот код, который я использовал и начал работать:

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

}