为何使用Ajax调用后脚本失效？TempData数据异常排查

这个问题我之前也碰到过！核心原因是TempData的生命周期和Ajax请求的特性不匹配，咱们一步步来解决：

首先得搞明白为什么TempData在Ajax提交后失效：
TempData是依赖Session存储的，它的生命周期是单次完整的HTTP请求——当你第一次加载页面时，控制器把消息放进TempData，视图能拿到是因为这是同一个请求上下文。但用Ajax提交时，这是一个完全独立的异步请求，控制器把消息放进这个Ajax请求的TempData里，但原来的页面属于另一个请求上下文，根本访问不到这个TempData。而且Ajax请求完成后页面不会刷新，就算TempData有值，视图也不会自动更新。

那正确的做法是直接把消息通过JSON返回给前端，而不是用TempData，具体步骤如下：

1. 修改控制器的Action，返回JSON结果 #

把原来存TempData的逻辑改成直接返回包含状态和消息的JSON对象：

[HttpPost]
public ActionResult AddAppointment(AddBookingsViewModel AddBookingVM)
{
    BookingsRepository BookingRep = new BookingsRepository();
    if (ModelState.IsValid)
    {
        int ReturnRowsCount = BookingRep.InsertCustomerAppointments(AddBookingVM, out bool ReturnStatus, out string ReturnMessage, out int ReturnBookingID);
        if (ReturnRowsCount > 0)
        {
            // 返回成功状态、消息和预约ID
            return Json(new { Success = true, Message = ReturnMessage, BookingID = ReturnBookingID });
        }
        else
        {
            // 返回失败状态和错误消息
            return Json(new { Success = false, Message = ReturnMessage });
        }
    }
    // 模型验证不通过时，收集所有错误信息返回
    var errorMessages = ModelState.Values
                                  .SelectMany(v => v.Errors)
                                  .Select(e => e.ErrorMessage);
    return Json(new { Success = false, Message = string.Join(" ", errorMessages) });
}

2. 更新前端Ajax代码，处理返回的消息 #

你需要修改Ajax的回调函数，接收返回的JSON数据，然后把消息显示在页面上的指定容器里：

// 假设你的表单ID是addAppointmentForm，消息容器ID是messageContainer
$('#addAppointmentForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        success: function(response) {
            // 根据返回的状态显示不同样式的消息
            var messageElement = $('#messageContainer');
            if (response.Success) {
                messageElement.html('<div class="alert alert-success">' + response.Message + '</div>');
                // 可选：重置表单
                $('#addAppointmentForm')[0].reset();
            } else {
                messageElement.html('<div class="alert alert-danger">' + response.Message + '</div>');
            }
        },
        error: function() {
            $('#messageContainer').html('<div class="alert alert-danger">请求失败，请稍后重试</div>');
        }
    });
});

3. 在视图中添加消息显示容器 #

确保你的页面上有一个用来展示消息的元素：

<div id="messageContainer" class="mb-3"></div>

如果你非要坚持用TempData（非常不推荐，因为这违背了Ajax无刷新的初衷），那只能在Ajax请求成功后重新加载页面，或者发起另一个请求去获取TempData里的内容，但这样就失去了Ajax的优势，所以还是推荐上面的JSON方案。

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