Blazor .NET 5中下拉列表有乘客时自动绑定至输入框的实现方案

完全不用JavaScript，Blazor本身就能搞定这个需求，核心是在页面初始化时给绑定变量赋值，而不是在@bind-value里直接调用函数。

步骤拆解： #

1. 定义核心变量
   先声明乘客模型、乘客列表，以及用于绑定的选中乘客对象：

public class Passenger
{
    public string Id { get; set; }
    public string Name { get; set; }
    // 其他乘客属性，比如手机号、证件号等
}

private List<Passenger> passengers = new List<Passenger>();
private Passenger SelectedPassenger { get; set; }
// 标记是否处于新增乘客模式
private bool IsNewPassenger { get; set; }

2. 初始化时自动绑定已有乘客
   在页面初始化生命周期方法里，判断乘客列表是否有数据，有则自动选中第一个乘客：

protected override void OnInitialized()
{
    // 这里替换成你获取乘客列表的逻辑，比如从服务/本地存储读取
    // passengers = _passengerService.GetSavedPassengers();
    
    if (passengers.Count > 0)
    {
        SelectedPassenger = passengers.First();
        IsNewPassenger = false;
    }
}

3. 下拉框与输入框的绑定实现
   下拉框绑定SelectedPassenger，同时添加默认选项；输入框直接绑定选中乘客的属性，当SelectedPassenger被赋值时，输入框会自动同步数据：

<select @bind="SelectedPassenger" @bind:event="onchange">
    <option value="">Choose your name</option>
    @foreach (var passenger in passengers)
    {
        <option value="@passenger">@passenger.Name</option>
    }
    <option value="new">New Passenger</option>
</select>

@if (!IsNewPassenger && SelectedPassenger != null)
{
    <input type="text" @bind-value="SelectedPassenger.Name" placeholder="乘客姓名" />
    <!-- 其他乘客信息输入框，比如手机号、证件号等 -->
}
else if (IsNewPassenger)
{
    <input type="text" @bind-value="NewPassengerName" placeholder="输入新乘客姓名" />
    <!-- 新增乘客的其他输入项 -->
}

4. 处理「New Passenger」选项逻辑
   当下拉框选中新增选项时，切换到新增模式，清空绑定的乘客对象：

private void HandleSelectionChange()
{
    // 这里根据下拉框的绑定逻辑判断是否选中新增选项，也可以改用绑定Id的方式更稳妥
    if (SelectedPassenger?.ToString() == "new")
    {
        IsNewPassenger = true;
        SelectedPassenger = null;
    }
    else
    {
        IsNewPassenger = false;
    }
}

为什么你之前的方法不行？ #

@bind-value要求绑定的是可读写的属性或字段，直接绑定myfunction()的话，函数返回的是临时值，没法实现双向绑定。正确的做法是在页面初始化或参数更新时，把需要默认显示的数据赋值给绑定变量，让Blazor的双向绑定机制自动同步到输入框。

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