Blazor实现下拉选单值自动填充文本框的技术问询

问题描述 #

正在构建经销商车辆付款登记表单，表单包含一个从NumberOfWeeks表（对应描述中的Months表）选择月份的下拉选单，该表包含每月的周数字段。需求是：选择月份后，自动将对应月份的周数填充到文本框中，现有Razor页面及CarService代码如下，求实现方法。

现有代码 #

Razor Page #

<MudSelect @bind-Value="car.Month" For="@(()=>car.Month)" T="int" Label="Month" AnchorOrigin="Origin.BottomCenter" Required="true">
    @foreach (var item in num)
    {
        <MudSelectItem T="int" Value="@item.Month">@item.Month</MudSelectItem>
    }  
</MudSelect>

<MudTextField Label="Current year number of weeks" Clearable Required HelperText="" Class="mt-3"
              @bind-Value="car.numberOfWeeks" For="@(() => car.numberOfWeeks)" /> // 当前为可输入字段

@code{
    NumberOfWeeks nums = new NumberOfWeeks();
    private List<NumberOfWeeks> num = new List<NumberOfWeeks>();

    protected override async Task OnInitializedAsync()
    {
        GetNumberOfWeeks();  
    }

    private List<NumberOfWeeks> GetNumberOfWeeks()
    {
        num=carService.GetNumberOfWeeks();
        return num;
    }
}

CarService.cs #

public List<NumberOfWeeks> GetNumberOfWeeks()
{
    return _dbContext.NumberOfWeeks.ToList();
}

解决方案 #

要实现自动填充功能，需监听下拉选单的选择变化事件，根据选中月份从已加载的num列表中匹配对应周数，再赋值给文本框绑定的字段。具体修改如下：

• 修改MudSelect添加选择事件处理
  将原@bind-Value拆分为Value和ValueChanged，指定选择变化的回调方法：

  <MudSelect Value="car.Month" ValueChanged="OnMonthSelected" For="@(()=>car.Month)" T="int" Label="Month" AnchorOrigin="Origin.BottomCenter" Required="true">
      @foreach (var item in num)
      {
          <MudSelectItem T="int" Value="@item.Month">@item.Month</MudSelectItem>
      }  
  </MudSelect>
  

• 添加选择事件处理方法
  在@code块中新增OnMonthSelected方法，处理月份选择后的逻辑：

  private void OnMonthSelected(int selectedMonth)
  {
      // 更新选中月份到car对象
      car.Month = selectedMonth;
      // 从列表中查找对应月份的周数数据
      var selectedMonthData = num.FirstOrDefault(m => m.Month == selectedMonth);
      if (selectedMonthData != null)
      {
          // 赋值周数给文本框绑定字段（需与NumberOfWeeks类的周数字段名一致，如字段为numberOfWeeks则对应修改）
          car.numberOfWeeks = selectedMonthData.NumberOfWeeks;
      }
      else
      {
          // 未找到数据时清空或设置默认值
          car.numberOfWeeks = 0;
      }
  }
  

• 可选：设置文本框为只读
  若无需手动修改周数，给MudTextField添加ReadOnly="true"属性，禁止手动输入：

  <MudTextField Label="Current year number of weeks" Clearable Required HelperText="" Class="mt-3"
                @bind-Value="car.numberOfWeeks" For="@(() => car.numberOfWeeks)" ReadOnly="true" />
  

• 初始化时自动填充默认值
  若car.Month已有初始值，在OnInitializedAsync中触发一次选择事件，自动填充对应周数：

  protected override async Task OnInitializedAsync()
  {
      GetNumberOfWeeks();
      if (car.Month > 0)
      {
          OnMonthSelected(car.Month);
      }
  }
  

补充说明：需确保NumberOfWeeks类包含Month（月份）和对应的周数字段，字段名需与代码引用一致。

内容的提问来源于stack exchange，提问作者Kibofigs