MudBlazor基于起止日期计算总金额的异常问题排查

问题根源分析 #

1. 日期单向绑定导致数据未更新：当前MudDatePicker使用Date="transactionParameters.DateOfArrival"和Date="transactionParameters.DateOfDeparture"单向绑定，用户选择新日期后，transactionParameters中的日期值并未同步更新，CalculateTotalSum方法始终使用初始化的日期（今天和明天，天数差1）计算总金额。
2. 入住日期未触发计算逻辑：仅退房日期的DatePicker绑定了DateChanged事件，修改入住日期时不会调用CalculateTotalSum，无法重新计算总金额。
3. 提交订单时未同步日期数据：BookRoom方法中未将用户选择的日期赋值给transactionModelForCreation，导致提交的订单缺少日期信息。

逐步修复方案 #

1. 修复日期双向绑定 #

将两个MudDatePicker的Date属性改为双向绑定，确保用户选择的日期实时同步到transactionParameters：

<!-- 入住日期DatePicker修改 -->
<MudDatePicker Label="Arrival Date"
               @bind-Date="transactionParameters.DateOfArrival"
               Required=true RequiredError="Arrival Date is required!"
               PickerVariant="PickerVariant.Dialog" Rounded="true"
               Elevation="1" DateFormat="dd-MM-yyyy" MinDate=DateTime.Now.Date
               Validation="@transactionParameters.ValidDateRange"
               DateChanged="CalculateTotalSum" />

<!-- 退房日期DatePicker修改 -->
<MudDatePicker Label="Departure Date"
               @bind-Date="transactionParameters.DateOfDeparture"
               DateChanged="CalculateTotalSum"
               Required=true RequiredError="Departure Date is required!"
               PickerVariant="PickerVariant.Dialog" Rounded="true"
               Elevation="12" DateFormat="dd-MM-yyyy" MinDate=DateTime.Now.Date
               Validation="@transactionParameters.ValidDateRange" />

删除多余的onblur和onfocusout原生事件，Blazor的DateChanged事件已足够触发计算。

2. 优化CalculateTotalSum方法 #

确保计算后触发组件状态更新，同时避免重复创建TransactionDataForCreationDto实例：

private void CalculateTotalSum()
{
    if (RoomDetailsDto is null || transactionParameters.DateOfArrival is null || transactionParameters.DateOfDeparture is null)
    {
        totalSum = 0;
        return;
    }

    var days = (transactionParameters.DateOfDeparture.Value - transactionParameters.DateOfArrival.Value).TotalDays;
    // 确保天数为正，符合ValidDateRange校验逻辑
    if (days <= 0)
    {
        totalSum = 0;
        return;
    }

    totalSum = (int)(RoomDetailsDto.Price * days);
    StateHasChanged();
}

3. 修复BookRoom方法的日期赋值 #

将用户选择的日期同步到transactionModelForCreation，确保提交的订单数据完整：

async Task BookRoom()
{
    if (transactionParameters.DateOfArrival is null || transactionParameters.DateOfDeparture is null || RoomDetailsDto is null)
    {
        snackBar.Add("请选择有效的入住和退房日期", Severity.Error);
        return;
    }

    transactionModelForCreation.ApplicationUserId = username;
    transactionModelForCreation.RoomId = RoomDetailsDto.Id;
    transactionModelForCreation.ArrivalDate = transactionParameters.DateOfArrival;
    transactionModelForCreation.DepartureDate = transactionParameters.DateOfDeparture;
    transactionModelForCreation.Room = RoomDetailsDto;

    await httpClient.PostAsJsonAsync("api/transactions", transactionModelForCreation);
    navigationManager.NavigateTo("payment");
}

4. 优化TransactionDataForCreationDto的TotalSum属性 #

避免不必要的强转，同时处理天数为0或负数的情况：

public double TotalSum
{
    get
    {
        if (Room == null || DepartureDate == null || ArrivalDate == null)
        {
            return 0;
        }

        var days = (DepartureDate.Value - ArrivalDate.Value).TotalDays;
        return days > 0 ? Room.Price * days : 0;
    }
}

额外注意事项 #

• 确保RoomDetailsDto从StateContainer获取的数据正确，包含有效的Price值。
• 可以在CalculateTotalSum中添加日志输出，验证日期差和计算结果是否正确，方便调试。

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