ASP.NET MVC Ajax调用后ViewBag值未在视图显示该如何解决

问题根因 #

• AJAX请求逻辑缺失：你通过AJAX向服务端发起请求后，服务端返回的Index视图HTML仅存在于AJAX的响应结果中，你的代码没有编写处理响应、更新当前页面DOM的逻辑，当前浏览的页面始终是初始加载的旧版本，自然看不到ViewBag更新的内容。
• 提交行为冲突：你绑定点击事件的按钮是form内的submit类型，没有阻止默认提交行为，AJAX触发后浏览器还会执行form的默认提交逻辑，相当于重复发起两次请求，执行逻辑混乱。
• 响应类型不匹配：AJAX配置的dataType: "json"指定期望接收JSON格式响应，但你的Controller返回的是HTML格式的视图，类型不匹配会导致AJAX直接进入错误回调，无法拿到正确返回结果。
• 表单参数缺失：原生form提交场景下，你的输入框仅设置了id属性，没有设置name="message"，服务端无法接收到传入的文本内容，也会导致ViewBag赋值为空。

解决方案 #

你可以根据需求选择以下任意一种方案：

方案1：保留AJAX实现无刷新更新 #

1. 调整Controller的Create方法，直接返回JSON结果，不需要返回完整视图：

[HttpPost]
public ActionResult Create(string message)
{
    return Json(new { success = true, message = message });
}

2. 修改前端JS逻辑，阻止默认提交行为，新增成功回调更新页面元素：

$('#btnSubmit').click(function (event) {
    // 阻止form默认提交行为
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "/Home/Create",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            'message': $('#txtMessage').val()
        }),
        success: function(res) {
            if(res.success) {
                // 直接更新页面上的提示文案
                $('#Message').text(res.message);
            }
        }
    });
});

方案2：移除AJAX，使用原生form提交 #

如果不需要无刷新效果，可以直接删掉整段绑定btnSubmit点击事件的JS代码，同时给输入框加上name属性即可：

<input type="text" id="txtMessage" name="message" />

form会自动提交请求到Create方法，服务端返回Index视图后浏览器会自动加载新页面，ViewBag.Message的内容会正常渲染。

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