Blazor中TextField如何同时绑定FluentValidation校验与SVG重绘事件

问题根源 #

你遇到的冲突和事件不触发有两个核心原因：

1. MudTextField是MudBlazor封装的组件，它的自定义值变更事件名是ValueChanged，而非原生DOM的onChange，你绑定的onChange是原生事件，不会被组件的双向绑定逻辑触发
2. @bind-Value语法本质是语法糖，会自动完成「Value属性赋值 + ValueChanged事件绑定」的逻辑，你手动再绑事件就会和默认绑定逻辑冲突

方案1：拆分双向绑定，手动处理值变更 #

把@bind-Value拆成显式的Value属性赋值和ValueChanged事件处理，在事件里同时完成赋值、触发重绘逻辑，校验逻辑完全保留：

<MudForm Model="@model_input" @ref="@form">
    <MudCardContent>
        <MudTextField Value="model_input.Width" 
                      ValueChanged="(double val) => { model_input.Width = val; ScaleGraphics(); }"
                      Validation="@(inputValidator.ValidateValue)" 
                      For="@(() => model_input.Width)" 
                      Immediate="true" 
                      Label="w [mm]"/>

        <MudTextField Value="model_input.Height" 
                      ValueChanged="(double val) => { model_input.Height = val; ScaleGraphics(); }"
                      Validation="@(inputValidator.ValidateValue)"
                      For="@(() => model_input.Height)" 
                      Immediate="true" 
                      Label="h [mm]"/>
    </MudCardContent>
</MudForm>

方案2：监听MudForm全局字段变更事件（更简洁） #

因为你已经给表单开了Immediate即时校验，直接给MudForm绑定FieldChanged事件，任何字段值变更校验完成后都会自动触发重绘，不需要修改每个输入框：

<MudForm Model="@model_input" @ref="@form" FieldChanged="(_, __) => ScaleGraphics()">
    <MudCardContent>
        <MudTextField @bind-Value="model_input.Width" 
                      Validation="@(inputValidator.ValidateValue)" 
                      For="@(() => model_input.Width)" 
                      Immediate="true" 
                      Label="w [mm]"/>

        <MudTextField @bind-Value="model_input.Height" 
                      Validation="@(inputValidator.ValidateValue)"
                      For="@(() => model_input.Height)" 
                      Immediate="true" 
                      Label="h [mm]"/>
    </MudCardContent>
</MudForm>

补充优化点 #

建议给ScaleGraphics方法加边界判断，避免输入为空、0时出现除以零的报错：

private void ScaleGraphics()
{
    // 增加合法值判断
    if (model_input.Width <= 0 || model_input.Height <=0) return;
    scale = Math.Min(mainDwgWidth / model_input.Width, mainDwgHeight / model_input.Height);
    Console.WriteLine("scale: {0}", scale);
    scaledWidth = model_input.Width * scale;
    scaledHeight = model_input.Height * scale;
    // Blazor事件回调执行完成后会自动触发StateHasChanged，这行可以删掉
    // StateHasChanged();
}

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