如何在MudBlazor中计算DataGrid数据的汇总金额

核心步骤说明 #

1. 抽离单条记录总价计算逻辑：把单价×数量再扣减折扣的计算封装成方法，同时实现截断保留2位小数（区别于四舍五入）
2. 创建汇总计算属性：遍历所有数据，累加每条记录的截断后总价
3. 更新DataGrid列显示：在Total列中调用封装的方法
4. 添加汇总显示区域：用MudPaper展示最终汇总金额

修改后的完整代码 #

@* 假设你已定义Menuitemlist类、Elements集合及DiscountValue变量 *@

<MudDataGrid Items="@Elements" Hover="true" Striped="true" Dense="true">
    <Columns>
        <Column T="Menuitemlist" StickyLeft="true" Class="removeicon">
            <CellTemplate>
                <MudIconButton OnClick="@(() => RemoveItem(@context.Item))" Color="@Color.Default" Icon="@Icons.Material.Filled.Delete" />
            </CellTemplate>
        </Column>
        <Column T="Menuitemlist" Field="ItemName" Title="Name" />
        <Column T="Menuitemlist" Field="qty" Title="Qty" >
            <CellTemplate>
                <MudGrid Style="padding-left:unset;padding-right:unset">
                    <MudItem xs="3"  Class="d-flex align-center justify-center ">
                        <MudIconButton Icon="@Icons.Material.Filled.AddCircle" Variant="Variant.Filled" Size="Size.Small" @onclick="(() => context.Item.qty = context.Item.qty + 0.5)" />
                    </MudItem>
                    <MudItem xs="6"  Class="d-flex align-center justify-center pa-2">
                        <MudTextField @bind-Value="@context.Item.qty"  Margin="Margin.Dense" Style="text-align:center"  />
                    </MudItem>
                    <MudItem xs="3"  Class="d-flex align-center justify-center">
                        <MudIconButton Icon="@Icons.Material.Filled.RemoveCircle" Variant="Variant.Filled" Size="Size.Small" @onclick="(() => context.Item.qty = context.Item.qty - 0.5)" />
                    </MudItem>
                </MudGrid>
            </CellTemplate>
        </Column>
        <Column T="Menuitemlist" Field="OptionalSalesPrice" Title="Price" CellStyle="text-align:right" >
            <CellTemplate>
                <MudText Typo="Typo.subtitle1">@context.Item.OptionalSalesPrice.ToString("F")</MudText>
            </CellTemplate>         
        </Column>
        <Column T="Menuitemlist" Title="%" CellStyle="text-align: right">
            <CellTemplate>
                <MudText @bind-Value="DiscountValue" Typo="Typo.body2" >@DiscountValue</MudText>
            </CellTemplate>
        </Column>
        <Column T="Menuitemlist" Title="Total" CellStyle="text-align: right" >
            <CellTemplate>
                @{
                    var truncatedTotal = GetTruncatedItemTotal(context.Item);
                }
                <MudText Typo="Typo.body2">@truncatedTotal.ToString("F")</MudText>
            </CellTemplate>
        </Column>
    </Columns>
</MudDataGrid>

<MudPaper Class="mt-4 p-3" Elevation="2">
    <div class="d-flex justify-content-end">
        <MudText Typo="Typo.h6">汇总金额: @TotalSummary.ToString("F")</MudText>
    </div>
</MudPaper>

@code {
    // 已有变量示例
    private List<Menuitemlist> Elements = new();
    private double DiscountValue;

    // 计算单条记录的截断后总价
    private double GetTruncatedItemTotal(Menuitemlist item)
    {
        var rawTotal = (item.OptionalSalesPrice * item.qty) * (1 - (DiscountValue / 100.00));
        // 截断保留2位小数：先乘100取整，再除以100
        return Math.Truncate(rawTotal * 100) / 100;
    }

    // 汇总所有记录的截断后总价
    private double TotalSummary => Elements.Sum(item => GetTruncatedItemTotal(item));

    // 删除条目方法
    private void RemoveItem(Menuitemlist item)
    {
        Elements.Remove(item);
    }

    // Menuitemlist类示例
    public class Menuitemlist
    {
        public string ItemName { get; set; }
        public double qty { get; set; }
        public double OptionalSalesPrice { get; set; }
    }
}

关键细节说明 #

• 截断保留小数：使用Math.Truncate(rawTotal * 100) / 100代替Math.Round，确保是截断而非四舍五入
• 自动更新汇总：TotalSummary是计算属性，当Elements集合变化（删除商品、修改数量）或DiscountValue变化时，Blazor会自动重新计算并更新UI
• 代码复用：把单条总价计算抽成方法，避免重复代码，提升维护性

内容的提问来源于stack exchange，提问作者Danul Hivi Vihan