ASP.NET Core 8 MVC中Ajax POST请求下TempData消息显示问题

核心问题点 #

• TempData键拼写错误：控制器错误分支中写的是TempData["Notificacion"]（多了一个字母c），但视图里读取的是TempData["Notification"]，这直接导致错误提示无法被读取渲染。
• Ajax响应处理不完整：当前Ajax仅处理了成功重定向的场景，当控制器返回视图HTML时，代码没有做任何DOM更新操作，页面自然不会显示新的错误提示和保留的模型状态。
• Gallery JS冲突：该JS可能通过修改DOM结构、隐藏特定类元素或拦截渲染逻辑，干扰了提示元素的正常显示。

修复步骤 #

1. 修正TempData键拼写
   把控制器错误分支的代码改成：

   TempData["Notification"] = "处理请求时出错，请联系支持人员";
   return View(model);
   

2. 完善Ajax的响应处理逻辑
   当控制器返回视图HTML时，需要把返回内容替换到页面的表单容器中，才能保留模型状态并显示错误提示：

   var url = '@Url.Action("EditBook", "Account")';
   $.ajax({
       cache: false,
       async: true,
       type: "POST",
       url: url,
       data: $("#bookEditForm").serialize(), // 用表单序列化确保模型绑定正确，替换成你的表单ID
       success: function (response, xhr) {
           if (response.redirectToUrl != undefined) {
               window.location.href = response.redirectToUrl;
           } else {
               // 替换成你页面中承载表单的容器选择器
               $("#bookEditContainer").html(response);
           }
       }
   });
   

   注意：原代码中data: { model }的写法可能导致模型绑定失败，建议用表单序列化方式传递数据。

3. 解决Gallery JS冲突

   • 排查Gallery JS代码，看是否有隐藏.alert类元素、批量修改DOM节点的逻辑，针对性调整代码让它忽略提示元素。
   • 如果编辑页面不需要Gallery JS功能，直接在该视图中禁用它：

     @section Scripts {
         <!-- 保留其他必要脚本 -->
         <!-- 注释掉Gallery JS的引用 -->
         <!-- <script src="~/js/gallery.js"></script> -->
     }
     

额外说明 #

TempData在ASP.NET Core中默认依赖会话，若需在Ajax请求后强制保留TempData，可在控制器中添加TempData.Keep("Notification")，不过修复Ajax处理逻辑后，返回的视图HTML已包含提示元素，这一步通常不需要。

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