在Blazor中进行选择框绑定

Question

我正在尝试将模型中的CountryId与Blazor中SelectList的所选项的值绑定。所有国家项目都以列表形式出现，如{CountryId，CountryName}对象。我使用以下代码：

    <InputSelect @bind-Value="model.ByCountryId" class="form-control">
        @if (model?.Countries != null)
        {
           @foreach (var cnt in model.Countries)
           {
               <option value="@cnt.Id">@cnt.Name</option>
           }
        }
     </InputSelect>

还有代码块：

@code {

BrandModel model = new BrandModel();

protected override async Task OnInitializedAsync()
{
    model = new BrandModel
    {
        Id = 19,
        ByCountryId = 1,
        Countries = new List<ent.Country>
            {
                new ent.Country { Id = 1, Name = "Azerbaijan" },
                new ent.Country { Id = 2, Name = "Turkey" }
            },
        IsActive = true,
        Name = "Brand"
    };
}

但是在浏览器中执行时，会出现以下错误：

blazor.webassembly.js:1 WASM: System.MissingMethodException: 构造函数“System.ComponentModel.ByteConverter”的类型未找到。

在Blazor中，绑定<select>和model.data的便捷方式是什么？

- Emba Ayyub

Answer 1

当我将<InputSelect>放在<EditForm Model="@model">..</EditForm >中时，它能够良好地工作，并且你的数据绑定没有问题。

尝试在csproj文件中使用以下代码来设置<BlazorLinkOnBuild>false</BlazorLinkOnBuild>。

<PropertyGroup>
   <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

请参考https://github.com/aspnet/AspNetCore/issues/7784

更新:

使用<select>标签代替<InputSelect>，如下所示：

<select @bind="model.ByCountryId">
        @if (model?.Countries != null)
        {
            @foreach (var cnt in model.Countries)
            {
                <option value="@cnt.Id">@cnt.Name</option>
            }
        }
</select>

- Ryan

---

我按照你的说法做了，但是仍然遇到了相同的未处理异常:(((。 我认为问题在于绑定字节类型。因为错误描述如下：WASM: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect 1[System.Byte] 不支持类型 'System.Byte' - Emba Ayyub

我的模型就像这样：public class BrandModel { public short Id { get; set; } [Required] public string Name { get; set; } [Required] public byte ByCountryId { get; set; } public bool IsActive { get; set; } public IEnumerable Countries { get; set; } } - Emba Ayyub

@Emba Ayyub，我使用<select>标签并在csproj文件中添加了<BlazorLinkOnBuild>false</BlazorLinkOnBuild>来解决错误。请查看我的更新。 - Ryan

最新版本的Blazor中已经移除了<BlazorLinkOnBuild>false</BlazorLinkOnBuild>。 - Kuldeep Gill

我有下拉列表的API数据，并希望在再次调用API后重新构建，但似乎循环第二次不起作用。@Ryan你有什么建议吗？ - Kuldeep Gill

Answer 2

这是一个示例，演示如何在选择元素中显示国家列表，并检索所选国家的代码或ID。

<select class="form-control" @bind="@SelectedCountryID">

    <option value=""></option>
    @foreach(var country in CountryList)
    {
        <option value = "@country.Code"> @country.Name </option >
    }
}

</select>

<p>@SelectedCountryID</p>

代码块

@code {

    string selectedCountryID;

    string SelectedCountryID
    {
        get => selectedCountryID;
        set
        {
            selectedCountryID = value;

        }
    }

    List<Country> CountryList = new List<Country>() { new Country ("USA", "United States"),
                                                      new Country ("UK", "United Kingdom") };

    public class Country
    {

        public Country(string code, string name)
        {
            Code = code;
            Name = name;
        }
        public string Code { get; set; }
        public string Name { get; set; }

    }
}

---

这段代码适合与其他选择元素集成，以形成级联下拉体验（例如，在选择国家后填充城市列表等）。只需将代码片段复制到您的Index.razor文件中并执行即可...

- user12207343

---

就像我展示的那样，我完全按照相同的方式操作，但是却出现了错误。我不知道为什么？ - Emba Ayyub

你说“完全一样”是什么意思？Model代表什么？model.Countries代表什么？如果你想让我指出代码中的错误，请展示整个代码... - user12207343

我编辑了我的问题并将所有代码都添加到那里。 - Emba Ayyub

您选择的 SelectedCountryID 是“”，最初绑定在哪里？ - mko

Answer 3

<InputSelect> 对我来说在.NET 5中很有效。对于每个输入（文本、数字、日期、选择、复选框等），我使用带有 Model 的 <EditForm>。

<EditForm Model="item">
   <InputSelect @bind-Value="item.CountryId">
      <option value=""></option>
      @foreach (var c in countries)
      {
         <option value="@c.Id">@c.Name</option>
      }
   </InputSelect>
</EditForm>

对于这个例子： ItemModel item 至少有属性 CountryId，List<CountryModel> countries 至少有属性 int Id 和 string Name。

- hlidac22

Answer 4

<select class="form-select" id="instant" @bind="_selected">
    <option value="Y">Y</option>
    <option value="N">N</option>
</select>

C#

@code {
    var _selected="Y";
}

- Mirko MyRent

Answer 5

在 Blazor 中使用 Core 6 的 API 工作正常

<InputSelect @bind-Value="patientCreateDTO.DoctorId" class="form-control" id="doctorid">
    <option value="">--Select--</option>
    @foreach(var doctor in doctorslist)
    {
        <option value="@doctor.Id">@doctor.Doctor_name</option>
    }
</InputSelect>

这里是代码

private List<DoctorReadDTO> doctorslist = new();

// ...

protected override async Task OnInitializedAsync()
{
    var response = await dService.GetDoctor();
    if (response.Success)
    {
        doctorslist = response.Data;
    }
}

- Vikas

Answer 6

InputSelect 示例，包含枚举值和 foreach 选项。

<InputSelect @bind-Value="context.Severity" class="form-control">
    @foreach (var severityEnum in Enum.GetValues(typeof(Severity)).Cast<Severity>().Where(x => x != Severity.None).ToList())
    {
        <option value="@severityEnum">@severityEnum.ToString()</option>
    }
</InputSelect>

public enum Severity
{
    None = 0,
    Critical = 1,
    High = 2,
    Medium = 3,
    Low = 4
}

如果您需要接收和验证用户输入，我建议使用InputSelect而不是原生的html select。

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-7.0#built-in-input-components

- Ogglas