显示 Blazor InputSelect 中的第一个选项，但值为 null

Posted 2023-03-27

【中文标题】显示 Blazor InputSelect 中的第一个选项，但值为 null

【英文标题】：First option in Blazor InputSelect displayed but value is null

【发布时间】：2021-03-18 05:20:36

【问题描述】：

我在 Razor 组件中遇到了 InputSelect 元素的奇怪行为。 在我的输入表单上，我有几个与模型（合作伙伴）绑定的字段。我以下拉选择的形式放置了其中一些字段。因为绑定字段的 (PartnerCategory) 值是 id（整数），所以我从数据库中获取一个查找表，其名称对应于选定的 id。

在一个页面上，我可以在下拉列表中看到所有名称。但是当我尝试将记录从表单插入到数据库时，它会引发 SQL 异常，因为 InputSelect 将列表中的第一个值视为 NULL。只是要清楚 - 下拉列表中没有空白值，并且显示了所有名称。它只是将其值设为 NULL。以下是因为数据类型是整数，它将 NULL 转换为零。而且因为我的表中没有 id 为零，所以 Insert 命令失败。

下面是我的简化代码

<EditForm Model="@partner">
    <InputSelect @bind-Value="partner.PartnerCategoryId">
        @if (categoryList != null)
        
            @foreach (var item in categoryList.OrderBy(x => x.PartnerCategoryId))
            
                <option value="@item.PartnerCategoryId">@item.Name</option>
            
        
    </InputSelect>
</EditForm>

@code 
    Partner partner = new Partner();
    private IEnumerable<PartnerCategory> categoryList;

    protected override async Task OnInitializedAsync()
    
        categoryList = await CategoryService.GetAllAsync();
       

我该如何处理？它会在从数据库中获取数据之前将值绑定到模型吗？

【参考方案1】：

要解决此问题，您可以在代码中添加<option value="">Select...</option>，如下所示：

 <InputSelect @bind-Value="partner.PartnerCategoryId">
    @if (categoryList != null)
    
        <option value="">Select...</option>
        @foreach (var item in categoryList.OrderBy(x => x.PartnerCategoryId))
        
            <option value="@item.PartnerCategoryId">@item.Name</option>
        
    
</InputSelect>

并在您的 PartnerCategory 模型中根据需要定义 PartnerCategoryId。注意 PartnerCategoryId 的类型可以为空：int?

[Required]
public int? PartnerCategoryId get; set;

这将阻止“提交”您的表单，除非用户选择了一个值

要测试新更改： 将OnValidSubmit 属性添加到您的EditForm 组件并将其值设置为“HandleValidSubmit”

添加HandleValidSubmit 方法，如下所示：

private void HandleValidSubmit()

   // Put code here to save your record in the database

在 EditForm 底部添加一个提交按钮：

<p><button type="submit">Submit</button></p>

运行您的应用，然后点击“Submit”按钮...您可以看到表单没有“提交”，并且选择元素的边框被涂成红色。

这是您的代码的完整版本：

<EditForm Model="@partner" OnValidSubmit="HandleValidSubmit">
    <InputSelect @bind-Value="partner.PartnerCategoryId">
        @if (categoryList != null)
        
            <option value="">Select...</option>
            @foreach (var item in categoryList.OrderBy(x => x.PartnerCategoryId))
            
                <option value="@item.PartnerCategoryId">@item.Name</option>
            
        
    </InputSelect>

     <p><button type="submit">Submit</button></p>
</EditForm>

@code 
    Partner partner = new Partner();
    private IEnumerable<PartnerCategory> categoryList;

    protected override async Task OnInitializedAsync()
    
        categoryList = await CategoryService.GetAllAsync();
     

    private void HandleValidSubmit()
    
       Console.WriteLine("Submitted");
      

【讨论】：

忘了在EditForm中添加<DataAnnotationsValidator />