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

Question

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

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

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