Блог

У меня есть текстовое поле в blazor, которое связано с функцией проверки с помощью FluentValidation. Я хотел бы также иметь параметр onChange, так как я хочу связать это текстовое поле также с графикой SVG, чтобы нарисовать масштабированный прямоугольник, используя параметр текстового поля onChange, но я получаю ошибку. Я читал, что значение привязки и onChange не должны быть вместе, но я все еще новичок в Blazor и не знаю, как еще привязать действие onChange к SVG, чтобы перерисовать прямоугольник и одновременно проверить ввод.

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

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

Прямоугольник SVG

 <svg viewBox="0 0 @mainDwgWidth @mainDwgHeight">
 <rect width="@scaledWidth" height="@scaledHeight" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 0.2;" />
</svg>
 

Функция обновления прямоугольника

 @code {
private double mainDwgWidth = 200;
private double mainDwgHeight = 100;
private double scale { get; set; } = 0.0;
private double scaledWidth = 50.0;
private double scaledHeight = 50.0;

private void ScaleGraphics()
{
    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;
    StateHasChanged();
}
}
 

Я проверял консоль, и там даже ничего не написано, поэтому она даже не вызывает ScaleGraphics(). У кого-нибудь есть рабочее решение? Очень признателен.