Blazor中如何手动覆盖计算生成的Total字段值？

问题根源 #

当前代码的核心问题有两个：

1. RowTemplate中硬编码显示Price*100的计算值，完全忽略了手动编辑后的context.Total；
2. 编辑状态下，Price变化时没有判断Total是否被手动修改，导致自动计算逻辑覆盖手动输入值。

具体解决方案 #

步骤1：更新PriceViewModel，增加手动修改标识

添加布尔属性标记Total是否为手动设置，用于区分自动计算和手动编辑场景：

public class PriceViewModel
{
    public int PriceId { get; set; }
    public decimal? Price { get; set; }
    public decimal? Total { get; set; }
    // 标记Total是否为手动修改
    public bool IsTotalManuallySet { get; set; }
}

步骤2：修改RowTemplate，优先显示手动设置的Total

调整显示逻辑，优先展示手动编辑的Total值，未设置时才显示自动计算值：

<RowTemplate>
    @{
        decimal calculatedTotal = (context.Price ?? 0) * 100;
        // 优先用手动设置的Total，没有则用计算值
        decimal displayTotal = context.Total ?? calculatedTotal;
    }
    <MudTd DataLabel="Price">@context.Price</MudTd>
    <MudTd DataLabel="Total" @onclick="@(() => Edit(@context.PriceId))">@Math.Round(displayTotal, 3)</MudTd>
</RowTemplate>

步骤3：处理编辑状态下的字段联动逻辑

给Price和Total添加ValueChanged事件，控制自动计算的触发条件：

<RowEditingTemplate>
    <MudTd Style="text-align:center" Class="pa-0" DataLabel="Price">
        <MudNumericField Format="0.0" 
                         Style="font-weight:bold; text-align:center;" 
                         @bind-Value="context.Price"
                         ValueChanged="(newPrice) => OnPriceChanged(context, newPrice)"
                         Required HideSpinButtons="true" />
    </MudTd>
    <MudTd Style="text-align:center" Class="pa-0" DataLabel="Total">
        <MudNumericField Format="0.0" 
                         Style="font-weight:bold; text-align:center;" 
                         @bind-Value="context.Total"
                         ValueChanged="(newTotal) => OnTotalChanged(context, newTotal)"
                         Required HideSpinButtons="true" />
    </MudTd>
</RowEditingTemplate>

步骤4：添加事件处理方法

在@code块中实现字段变化的逻辑控制：

@code{
    private List<PriceViewModel> Products { get; set; } = new List<PriceViewModel>();
    private PriceViewModel? viewModel;
    private bool _loading;

    private void Edit(int id)
    {
        viewModel = Products.FirstOrDefault(c => c.PriceId == id);
    }

    private void OnPriceChanged(PriceViewModel model, decimal? newPrice)
    {
        model.Price = newPrice;
        // 仅当Total未被手动修改时，自动计算更新Total
        if (!model.IsTotalManuallySet)
        {
            model.Total = (newPrice ?? 0) * 100;
        }
    }

    private void OnTotalChanged(PriceViewModel model, decimal? newTotal)
    {
        model.Total = newTotal;
        // 标记Total为手动设置，后续Price变化不再覆盖
        model.IsTotalManuallySet = true;
    }

    private void Save(TableCommitEditEventArgs<PriceViewModel> args)
    {
        // 此处实现保存逻辑
        args.Cancel = false;
    }
}

额外说明 #

• 如果初始加载数据时Total已有值，需将对应IsTotalManuallySet设为true，避免自动计算覆盖原有数据；
• 若需重置手动标记（比如允许用户重新触发自动计算），可添加重置按钮，将IsTotalManuallySet设为false后重新计算Total。

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