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的便捷方法是什么？感谢您的阅读！

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>

Answer 2

我没有尝试解决您的问题，因为有很多问题。相反，我编写了代码，如何在select元素中显示国家列表，以及如何检索选定的国家代码或ID。请查看我如何定义模型以及如何使用它。此代码适合与其他选择元素集成，以形成级联的下拉体验（选择一个国家后填充的城市列表等）。只需将代码片段复制到您的Index.razor文件中并执行即可...

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

    }
}

Answer 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

在火焰中选择框绑定

3 个答案: