Blazor中如何在foreach循环内为MudInput绑定自定义值？

现有代码的问题 #

• 遍历client列表时，所有输入框都绑定到同一个Room实例的属性，会导致数据混乱，无法正确对应到目标房间。
• Available是布尔类型，使用MudInput组件不合适，应该用MudCheckBox或MudSwitch这类专门处理布尔值的组件。
• 输入框内的@group.CliId写法错误，会和双向绑定的@Room.CliId冲突，无法正确设置默认值。

修正方案 #

1. 先明确变量定义 #

在组件代码块里定义所需的实体对象（假设你已经通过接口获取到要操作的客户和房间）：

// 当前注册完成的客户
private Client currentClient;
// 需要更新状态的目标房间
private Room targetRoom;
// 如果是批量处理可用房间，可用这个列表
private List<Room> availableRooms;

2. 页面渲染代码 #

单个房间分配场景

如果是给指定房间分配当前客户：

<MudCard>
    <MudCardContent>
        <MudTextField Label="客户ID" @bind-Value="@targetRoom.CliId" Disabled="true" Value="@currentClient.CliId" />
        <MudTextField Label="房间ID" @bind-Value="@targetRoom.RoomId" Disabled="true" />
        <MudCheckBox Label="房间状态（可用）" @bind-Value="@targetRoom.Available" Checked="false" />
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@UpdateRoom">确认更新</MudButton>
    </MudCardContent>
</MudCard>

批量选择房间分配场景

如果是从可用房间列表里选一个分配给当前客户：

@foreach (var room in availableRooms.Where(r => r.Available))
{
    <MudCard Style="margin: 1rem 0;">
        <MudCardContent>
            <MudTextField Label="房间ID" @bind-Value="@room.RoomId" Disabled="true" />
            <MudCheckBox Label="分配给当前客户" @bind-Value="@room.Available" Checked="false" />
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => UpdateRoom(room))">确认分配</MudButton>
        </MudCardContent>
    </MudCard>
}

3. 实现更新接口调用 #

添加更新房间的方法，调用Rest API提交修改：

private async Task UpdateRoom(Room room = null)
{
    var roomToUpdate = room ?? targetRoom;
    // 赋值客户ID并设置房间为不可用
    roomToUpdate.CliId = currentClient.CliId;
    roomToUpdate.Available = false;

    // 调用PUT接口更新房间数据
    var response = await Http.PutAsJsonAsync($"api/rooms/{roomToUpdate.RoomId}", roomToUpdate);
    if (response.IsSuccessStatusCode)
    {
        // 更新成功后刷新数据（比如重新加载房间列表）
        await LoadRoomList();
    }
}

// 示例：加载可用房间列表的方法
private async Task LoadRoomList()
{
    availableRooms = await Http.GetFromJsonAsync<List<Room>>("api/rooms");
}

核心要点 #

• 双向绑定@bind-Value会自动同步组件值和实体属性，确保修改后的数据能正确传递到Room对象。
• 布尔类型字段用MudCheckBox更直观，设置Checked="false"可以默认将房间状态设为不可用。
• 调用Rest API时，使用PutAsJsonAsync发送更新后的房间实体，完成后端数据同步。

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