Select 盒子綁定在 blazor

Question

我正在嘗試將CountryId中的 CountryId 綁定到 Blazor 中SelectList的選定項的值。 所有國家/地區項目都在{CountryId, CountryName} object 之類的列表中。 我這樣做的代碼是這樣的：

    <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 的代碼。 請看我如何定義 model 以及它是如何使用的。 此代碼適合與其他 select 元素集成，形成級聯下拉體驗（選擇國家后填充的城市列表等）。 只需將代碼片段復制到您的 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 中為我工作。對於每個輸入（文本、數字、日期、select、復選框等），我將<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

Answer 4

這可能會導致很多問題，當我第一次嘗試做這樣的事情時，我花了幾個小時找出哪里出錯了。

1）您應該檢查數據庫級別的連接是否正確配置，因為這是一個很好的描述： https://www.learnentityframeworkcore.com/configuration/one-to-one-relationship-configuration

2）如果這里一切正常，您應該將國家/地區列表傳遞給 viewbag 中的視圖，因為您的創建應該如下所示：

// GET: Reservations/Create
public IActionResult Create()
{
    ViewData["Country"] = new SelectList(_context.Countries, "CountryID", 
    "CountryName");
    return View();
}

3) 你的視圖應該是這樣的：

<select id="Country" asp-for="Country" class="form-control">
    <option value="" selected disabled hidden>Choose country</option>
</select>

希望這可以幫助！

Answer 5

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