Blazor中绑定计算字段实现季度金额实时更新的问题求助

问题根因 #

1. 运算符优先级错误：空合并运算符??优先级低于加法+，你写的计算逻辑实际执行顺序是ApprovedQ1 ?? (0 + ApprovedQ2 ?? (0 + ...))，只有Q1有值时直接返回Q1，其他季度的值被优先级逻辑吞了，这是你只能拿到Q1值的核心原因。另外QTotal的setter是递归赋值，赋值时会直接栈溢出，完全不需要保留。
2. 属性变更无通知：Blazor默认只会刷新当前绑定的属性，四个季度的数值修改后，不会主动触发依赖它们的QTotal字段的UI刷新。

修复方案 #

1. 修正ViewModel的计算逻辑 #

调整QTotal的getter，给每个空合并运算加括号，同时删除多余的setter：

public class BudgetReleaseRequestViewModel
{
    [Display(Name = "Approved Q1")]
    public decimal? ApprovedQ1 { get; set; }

    [Display(Name = "Approved Q2")]
    public decimal? ApprovedQ2 { get; set; }

    [Display(Name = "Approved Q3")]
    public decimal? ApprovedQ3 { get; set; }

    [Display(Name = "Approved Q4")]
    public decimal? ApprovedQ4 { get; set; }

    // 只保留只读getter，修正计算优先级
    public decimal? QTotal => (ApprovedQ1 ?? 0) + (ApprovedQ2 ?? 0) + (ApprovedQ3 ?? 0) + (ApprovedQ4 ?? 0);

    // 这里QDelta的计算也建议加括号，避免同样的优先级问题
    public decimal? QDelta => (ApprovedAnnualBudget ?? 0) - QTotal;
}

2. 绑定季度输入框的变更事件，触发UI刷新 #

将四个季度的DxSpinEdit从默认双向绑定改成手动监听值变更，每次修改后调用StateHasChanged()通知Blazor刷新整个组件UI，QTotal的值就会同步更新：

<DxFormLayoutGroup Caption="Additional Budget Info (Optional)" ColSpanMd="12">
    <DxFormLayoutItem Caption="Approved Q1:" ColSpanMd="2">
        <Template>
            <DxSpinEdit Value="@Model.ApprovedQ1" 
                        ValueChanged="(decimal? v) => { Model.ApprovedQ1 = v; StateHasChanged(); }"
                        DisplayFormat="N2"/>
        </Template>
    </DxFormLayoutItem>
    <!-- Q2、Q3、Q4的输入框全部按上述格式修改 -->
    <DxFormLayoutItem Caption="Q Total:" ColSpanMd="2">
        <Template>
            <DxSpinEdit Id="approvedTotals" Value="@Model.QTotal" DisplayFormat="N2" ReadOnly="true"/>
        </Template>
    </DxFormLayoutItem>
</DxFormLayoutGroup>

因为QTotal是只读的，这里不需要用@bind-Value，直接绑定Value属性即可。

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