在 Blazor 中选择框绑定答案

【问题标题】：Select box binding in blazor在 Blazor 中选择框绑定
【发布时间】：2020-02-17 11:49:07
【问题描述】：

我正在尝试将模型中的 CountryId 绑定到 Blazor 中 SelectList 的选定项的值。所有 Country 项目都在一个类似 {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 的便捷方式是什么？

【问题讨论】：

标签： c# asp.net asp.net-core blazor

【解决方案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>

【讨论】：

我按照你说的做了，但是得到了同样的未处理异常:(((。我认为问题在于绑定字节类型。因为错误描述是这样的：WASM: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect 1[System.Byte] does not support the type 'System.Byte'
@Emba Ayyub 我看不出你在哪里使用字节......你的Country 和BrandModel 的模型是什么样的？因为当我为 int 设置 ID 时效果很好
我的模特是这样的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<Country> Countries { get; set; } }
@Emba Ayyub 我在 csproj 文件中使用<select> 及以上<BlazorLinkOnBuild>false</BlazorLinkOnBuild> 标记删除了错误。查看我的更新。
@Emba Ayyub Great.Could you accept the 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; }

    }
}

此代码适合与其他选择元素集成，形成级联下拉体验（选择国家后填充的城市列表等）。只需将代码 sn-p 复制到您的 Index.razor 文件并执行它...

【讨论】：

正如我所展示的，我做的完全一样，但得到了错误。不知道为什么？
你说你做的完全一样是什么意思？型号代表什么？ model.Countries 代表什么？如果你想让我指出它有什么问题，请展示你的整个代码......
我编辑了我的问题并在那里添加了所有代码。
您的 SelectedCountryID 是“”，您最初在哪里绑定？

【解决方案3】：

<InputSelect> 在 .NET 5 中为我工作。对于每个输入（文本、数字、日期、选择、复选框等），我使用 <EditForm> 和 Model。

<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

【讨论】：

【解决方案4】：

在 Blazor 中使用 API 在 Core 6 中运行良好

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

【讨论】：