顯示 Blazor InputSelect 中的第一個選項，但值為 null

Question

我在 Razor 組件中遇到了 InputSelect 元素的奇怪行為。 在我的輸入表單上，我有幾個與 model（合作伙伴）綁定的字段。 我以下拉選擇的形式放置了其中一些字段。 因為綁定字段的（PartnerCategory）值是 id（整數），所以我從 DB 中獲取一個查找表，其名稱對應於選定的 id。

在一個頁面上，我可以在下拉列表中看到所有名稱。 但是，當我嘗試將表單中的記錄插入數據庫時，它會引發 SQL 異常，因為 InputSelect 將列表中的第一個值視為 NULL。 只是要清楚 - 下拉列表中沒有空白值，並且顯示了所有名稱。 它只是把它的價值當作 NULL。 以下是因為數據類型是 integer 並將 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();
    }   
}

我該如何處理？ 在從 DB 獲取數據之前，它是否將值綁定到 model？

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 model 中根據需要定義 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 ”按鈕...您可以看到表單未“提交”，並且 select 元素的邊框被塗成紅色。

這是您的代碼的完整版本：

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

Answer 2

我知道這是一個老問題，但以防萬一有人在這里遇到同樣的問題是我的代碼解決了這個問題

Select 類別 Select... @foreach(var cate in categories) { @cate.CategoryName } subcategory.CategoryId)"/>