.NET MAUI Blazor中MudForm结合MudBlazor与FluentValidation的问题

背景 #

开发首个.NET MAUI Blazor应用，使用MudBlazor组件库，通过<MudForm>结合NewReservationViewModel构建表单，并基于FluentValidation实现验证逻辑。

遇到的问题 #

1. 无法同时使用@bind-Value="@ViewModel.BuildingId"和ValueChanged="OnBuildingSelectionChanged"，需要选中建筑时触发方法填充楼层列表（级联下拉）。
2. 表单验证错误信息无法正常显示。

问题1：级联下拉绑定冲突解决方案 #

@bind-Value是Blazor的语法糖，它会自动绑定控件的Value属性和ValueChanged回调。如果手动指定ValueChanged，会覆盖@bind-Value自动生成的回调逻辑，导致两者冲突。

解决方法是放弃@bind-Value，手动拆分绑定：

• 用Value="@ViewModel.BuildingId"绑定当前值
• 在ValueChanged回调中，先更新ViewModel.BuildingId，再执行填充楼层的逻辑

修改后的MudSelect代码：

<MudSelect Label="Building" 
           Value="@ViewModel.BuildingId" 
           T="int?" 
           Disabled="@IsFloorListDisabled" 
           Required="true" 
           ValueChanged="(int? newValue) => OnBuildingSelectionChanged(newValue)">
    <MudSelectItem T="int?" Value="null">Select Building</MudSelectItem>
    @if (ViewModel.Buildings != null && ViewModel.Buildings.Count > 0)
    {
        @foreach (var building in ViewModel.Buildings)
        {
            <MudSelectItem T="int?" Value="@building.Id">@building.Name</MudSelectItem>
        }
    }
</MudSelect>

对应的后台方法：

private void OnBuildingSelectionChanged(int? newBuildingId)
{
    // 更新ViewModel的BuildingId
    ViewModel.BuildingId = newBuildingId;
    // 重置楼层选择
    ViewModel.FloorId = null;
    // 调用接口或逻辑填充Floors列表
    ViewModel.Floors = GetFloorsByBuildingId(newBuildingId);
    // 触发组件重新渲染
    StateHasChanged();
}

问题2：显示表单验证错误信息 #

需要完成两步配置，让MudForm和FluentValidation联动，并显示错误：

1. 注入验证器并绑定到MudForm
   在页面的代码段中注入NewReservationViewModelValidation，然后将MudForm的Validation属性指向验证器的ValidateValue方法：

@inject NewReservationViewModelValidation Validator

<MudForm Model="@ViewModel" Validation="@Validator.ValidateValue">
    <!-- 表单控件 -->
</MudForm>

2. 给每个表单控件添加For属性
   MudBlazor需要通过For属性关联控件和模型的具体属性，才能将验证错误显示在对应控件下方。修改每个控件：

• 建筑下拉：

<MudSelect Label="Building" 
           Value="@ViewModel.BuildingId" 
           T="int?" 
           Disabled="@IsFloorListDisabled" 
           Required="true" 
           ValueChanged="(int? newValue) => OnBuildingSelectionChanged(newValue)"
           For="@(() => ViewModel.BuildingId)">
    <!-- 选项内容 -->
</MudSelect>

• 楼层下拉：

<MudSelect Label="Floor" 
           Value="@ViewModel.FloorId" 
           T="int?" 
           Disabled="@IsFloorListDisabled" 
           Required="true"
           For="@(() => ViewModel.FloorId)">
    <!-- 选项内容 -->
</MudSelect>

• 日期选择器：

<MudDatePicker Label="Start Date" 
               Date="@ViewModel.Start" 
               DateChanged="(DateTime? date) => ViewModel.Start = date"
               Required="true"
               For="@(() => ViewModel.Start)"></MudDatePicker>

<MudDatePicker Label="Finish Date" 
               Date="@ViewModel.Finish" 
               DateChanged="(DateTime? date) => ViewModel.Finish = date"
               Required="true"
               For="@(() => ViewModel.Finish)"></MudDatePicker>

这样配置后，当表单提交或控件值变化时，FluentValidation会自动验证，错误信息会显示在对应控件的下方。

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