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

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

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

下面是我的简化代码

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

我该如何处理这个问题？在从数据库获取数据之前，它是否将值绑定到模型？

要解决此问题，您可以添加<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 的类型可为 null：int？

[Required]
public int? PartnerCategoryId {get; set;}

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

要测试新的更改： 添加OnValidSubmit归因于你的EditForm组件并将其值设置为“HandleValidSubmit"

Add a 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");
    }  
}