如何在C#/Blazor中实现输入值与类属性绑定及实时计算功能？

需求可行性 #

你要的实时计算器效果完全可以实现，Blazor的双向绑定机制原生支持这种无提交自动更新的场景，不需要额外做复杂处理。

报错原因及修复方案 #

你现在报无法识别Project类是两个核心问题导致的：

• 你只定义了Project类的结构，没有实例化这个类的对象，视图中绑定的是类的实例属性而非静态属性，必须先创建类的实例才能正常绑定
• 你把NumDays定义为string字符串类型，但MudNumericField是数值输入控件，绑定的属性应该是数值类型（比如int、double），类型不匹配也会导致绑定异常

类的存放位置说明 #

不需要强制把Project类放到Pages目录之外：

• 如果这个类只在当前页面使用，直接写在当前razor的@code块里完全没问题
• 如果后续其他页面也要复用这个类，推荐放到项目根目录下的Models文件夹里统一管理即可

完整实现代码 #

以下是Pages/Project.razor的可运行示例代码，包含实时计算展示逻辑：

<MudItem xs="12" sm="6" md="4">
  <MudNumericField @bind-Value="CurrentProject.NumDays" 
                   Label="Number of days" 
                   Variant="Variant.Text" 
                   Min="0" 
                   Max="10000"
                   @bind-Value:event="Input" /> 
  <!-- 加@bind-Value:event="Input"可以做到输入时实时更新，不用等输入框失去焦点 -->
</MudItem>

<!-- 展示计算结果的示例，这里以计算总工时（假设每天工作8小时）为例 -->
<MudItem xs="12">
  <MudText Typo="Typo.h6">计算结果：总工时为 @CurrentProject.TotalWorkHours 小时</MudText>
</MudItem>

@code {
  // 实例化Project类对象，视图绑定的是这个实例的属性
  public Project CurrentProject { get; set; } = new();

  public class Project
  {
    // 属性类型改为int，和数值输入框的返回类型匹配
    public int NumDays { get; set; }
    // 计算属性，只要NumDays更新，这个属性的值会自动重新计算
    public int TotalWorkHours => NumDays * 8;
  }
}

实现逻辑说明 #

• MudBlazor的输入控件默认会在值变化时自动同步到绑定的属性，不需要点击提交按钮触发
• Blazor的状态跟踪机制会自动检测到属性变化，重新渲染UI中引用了相关属性的部分，计算结果会自动刷新
• 如果你的计算逻辑比较复杂，也可以把计算逻辑写到NumDays的setter中，或者单独封装方法调用即可

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