Blazor .NET 8：如何用数据库模型数据填充InputSelect下拉框

问题分析 #

你当前代码的核心问题有两个：

• 错误使用Enum.GetValues(Commandes.NoFacture)：NoFacture是数据库模型的字段，并非枚举类型，这个方法完全不适用。
• 没有利用从GetCommandesToShip()获取的Commandes数据生成下拉选项，也没做去重处理。

解决方案步骤 #

1. 提取去重的发票编号列表：从Commandes集合中筛选出不重复的NoFacture值，在组件初始化后处理或用计算属性实时获取。
2. 修正InputSelect的选项生成逻辑：遍历去重后的列表生成<option>，确保绑定值类型与NoFacture字段一致。
3. 调整加载判断条件：原代码判断的是CommandesDetails，但下拉选项依赖Commandes，需同步修改判断对象。

修改后的完整代码 #

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

@if (Commandes == 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="@CommandeNoForm.NoFacture">
                <!-- 可选：添加默认提示选项 -->
                <option value="">请选择发票编号</option>
                @foreach (var noFacture in UniqueNoFactures)
                {
                    <option value="@noFacture">@noFacture</option>
                }
            </InputSelect>
        </div>
    </EditForm>
}

@code {
    [SupplyParameterFromForm]
    private CommandesDetailsModel CommandeNoForm { get; set; } = new();
    
    private void SubmitNoCommande()
    {
        // 此处添加提交逻辑
    }

    private IEnumerable<CommandesDetailsModel>? Commandes;
    private IEnumerable<CommandesDetailsModel>? CommandesDetails;
    
    // 计算属性：获取去重、非空且排序后的发票编号列表
    private IEnumerable<string> UniqueNoFactures => 
        Commandes?.Select(c => c.NoFacture)
                  .Where(nf => !string.IsNullOrEmpty(nf))
                  .Distinct()
                  .OrderBy(nf => nf) ?? Enumerable.Empty<string>();

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

关键说明 #

• 去重处理：通过Select提取字段、Distinct()去重、Where过滤空值，避免无效选项出现。
• 类型匹配：如果NoFacture是数值类型（如int），无需额外转换，确保<option>的value与绑定值类型一致即可。
• 渲染时机：将加载判断对象改为Commandes，保证下拉选项数据加载完成后再渲染表单。

内容的提问来源于stack exchange，提问作者sTaLa