ASP.NET单视图分步购物车：会话保存配送信息的刷新问题咨询

问题背景 #

实现了单视图分步购物车Checkout流程：

• 步骤1：将购物车商品信息存入Session
• 步骤2：选择收货地址
• 步骤3：将配送时间等信息存入新Session

遇到两个核心问题：

1. 后端保存后重定向到Checkout，购物车刷新且表单回到第一步
2. 使用Ajax提交保存方法，仍出现页面刷新

解决方案 #

1. 修复Ajax提交的前端逻辑（阻止页面刷新） #

提交步骤3表单时，必须用Ajax异步提交并阻止默认表单提交行为，这是解决页面刷新的关键。示例代码：

// 绑定步骤3表单的提交事件
document.getElementById('delivery-form').addEventListener('submit', function(e) {
    // 阻止浏览器默认的表单提交行为
    e.preventDefault();

    // 收集表单数据
    const formData = new FormData(this);
    const payload = Object.fromEntries(formData);

    // 发送Ajax请求
    fetch('/UserPanel/SaveDeliveryAndPaymentDetailsInSession', {
        method: 'POST',
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            // 保存成功后，手动切换到对应步骤（比如步骤3的tab）
            document.querySelectorAll('.checkout-tab').forEach(tab => tab.classList.remove('active'));
            document.getElementById('tab-step3').classList.add('active');
            
            // 可选：更新页面上的配送信息展示
            document.getElementById('delivery-summary').innerText = 
                `配送日期：${data.formData.CartDeliveryDateViewModel.DeliveryDate} | 配送时段：${data.formData.CartDeliveryDateViewModel.DeliveryTime}`;
        } else {
            alert('保存配送信息失败，请重试');
        }
    })
    .catch(err => {
        console.error(err);
        alert('网络异常，请稍后再试');
    });
});

2. 后端优化：重定向时保留步骤状态 #

如果必须使用重定向（优先推荐Ajax方案），修改错误分支的重定向逻辑，携带当前步骤参数，避免回到第一步：

[HttpPost]
public IActionResult SaveDeliveryAndPaymentDetailsInSession(CartViewModel model)
{
    if (model != null && model.CartDeliveryDateViewModel != null)
    {
        var deliveryAndPaymentDetails = new CartDeliveryAndPaymentDetails
        {
            DeliveryDate = model.CartDeliveryDateViewModel.DeliveryDate,
            DeliveryTime = model.CartDeliveryDateViewModel.DeliveryTime,
            Details = model.CartDeliveryDateViewModel.Details,
            PaymentMethod = model.CartDeliveryDateViewModel.PaymentMethod
        };

        _orderService.SaveDeliveryAndPaymentDetailsInSession(deliveryAndPaymentDetails);

        var response = new
        {
            success = true,
            formData = model
        };

        return Json(response);
    }
    else
    {
        // 重定向时携带当前步骤索引（比如步骤3对应2，根据你的tab配置调整）
        return RedirectToAction("CheckOut", new { activeTab = 2 });
    }
}

3. 确保Session中购物车数据稳定 #

在CheckOut方法中，更新购物车商品的ClientId后，要重新存入Session，避免数据丢失导致购物车刷新：

// 原代码：更新ClientId
foreach (var item in cartItems)
{
    if (item.ClientId == 0)
    {
        item.ClientId = userId;
    }
}

// 新增：更新后重新保存到Session
_orderService.SaveToSession(cartItems);

关键注意事项 #

• Ajax请求必须携带RequestVerificationToken，避免ASP.NET的CSRF拦截
• 分步表单的切换通过CSS控制显示/隐藏，不要依赖页面刷新
• 确保Session中存储的实体类支持正确的序列化/反序列化，避免数据损坏

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