如何绑定通过列表加载的选项的值答案

【问题标题】：How can I bind the value of an option that its loaded thru a list如何绑定通过列表加载的选项的值
【发布时间】：2020-12-29 12:00:42
【问题描述】：

我想要实现的是在所有月份加载选项控件（下拉列表）后，我需要将所选值绑定到 Dto 值（@bind="@ClientDto.WaitingPeriodMonths"）

所以在技术上试图达到这个结果，但使用下拉列表

 <div class="form-group">
 <Select id="monthdropdown" class="form-control" @onchange="@MonthClicked">
      <option style="font-weight:bold" value="">-- Months --</option>
      @if (@Months != null)
      {
         @foreach (var month in @Months)
         {
             <option value="@month">@month</option>
         }
      }
 </Select>

【问题讨论】：

标签： asp.net-core blazor

【解决方案1】：

在选择中绑定的问题是，如果您只是尝试绑定非基元，您将遇到类型转换。

<select @bind="@SelectedFoo">
  @foreach (var foo in FooList)
    {
      <option value="@foo">@foo</option>      
    }
</select>

@code
{
   List<Foo> FooList = new List<Foo>();
   Foo SelectedFoo {get; set;}
}

这将引发以下异常：

System.InvalidOperationException: '类型 'Foo' 没有关联的支持从字符串转换的 TypeConverter。申请 'TypeConverterAttribute' 到注册转换器的类型。'

您可以考虑实现它，也可以将其绑定到类似 Foo 值的 ID。

<select @bind="@FooID">
  @foreach (var foo in FooList)
    {
      <option value="@foo.ID">@foo.ID @foo.Name</option>
    }
</select>

@code
{
   List<Foo> FooList = new List<Foo>();
   string FooID {get; set;}
}

要返回您的 SelectedFoo，您可以简单地更改 FooID 的设置器以再次在列表中找到关联的值并设置 SelectedFoo，即通过 LINQ。

<select @bind="@FooID">
  @foreach (var foo in FooList)
    {
      if (FooID = foo.ID)
      {
        <option value="@foo.Id" selected>@foo.id @foo.Name</option>
      }
      else
      {
         <option value="@foo.Id">@foo.Id @foo.Name</option>
      }
    }
</select>

@code
{
   private string _fooID;
   private List<Foo> FooList = new List<Foo>();

   public Foo SelectedFoo {get; set;}
   public string FooID 
   {
     get {return _fooID;} 
     set
     {
       _fooID = value;
       SelectedFoo = FooList.FirstOrDefault(x => x.Id == value);
     }
   }
}

当然，如果您的属性已经是原始属性，则不需要这个麻烦。并且只需要一个原始类型的变量来绑定它。

【讨论】：