MVC5中Ajax调用控制器后无法实现页面重定向问题求助

首先，你遇到的问题其实是Ajax和表单提交两种方案的特性差异导致的，咱们一步步拆解解决：

为什么Ajax提交后页面没反应？ #

Ajax本质是异步局部请求，它只会默默接收控制器返回的响应内容，但不会自动触发浏览器的页面跳转。你现在控制器返回View("CompareItemsList",obj)，Ajax拿到的是这个视图的HTML代码，但没做任何处理，所以页面看起来毫无变化。

为什么表单提交时控制器接收值为null？ #

你之前的表单提交代码里，只是在点击事件里定义了data.CartList = "cart_list"，但根本没把localStorage里的真实JSON数据添加到表单的提交参数中，控制器的cart_list参数自然拿不到值。

方案一：修改Ajax请求，手动实现页面跳转 #

如果你想继续用Ajax，可以让控制器返回目标页面的URL，前端收到后主动跳转；或者直接返回视图HTML替换当前页面内容。

步骤1：调整控制器代码

把返回View改成返回包含跳转地址的Json结果：

[HttpPost]
[OutputCache(Duration = 20, VaryByParam = "none")]
public async Task<ActionResult> CompareItemsList(string cart_list, string brandList)
{
    // 你的业务逻辑代码保持不变...
    
    // 生成目标页面的跳转URL
    var redirectUrl = Url.Action("CompareItemsList", "Compare");
    return Json(new { success = true, redirectUrl = redirectUrl });
}

步骤2：修改前端Ajax逻辑

在请求成功后执行跳转：

$("#btna").click(function (evt) {
    evt.preventDefault(); // 阻止按钮默认的提交行为
    var temp = localStorage.getItem("cart");
    var value = $('#brandList option:selected').val();
    $.ajax({
        type: 'POST',
        dataType: "json",
        data: { cart_list: temp, brandList: value },
        url: '@Url.Action("CompareItemsList", "Compare")',
        success: function(response) {
            if(response.success) {
                // 跳转到目标页面
                window.location.href = response.redirectUrl;
            }
        },
        error: function(xhr) {
            // 处理错误，比如打印日志或提示用户
            console.error("请求出错：", xhr.responseText);
        }
    });
});

方案二：修复表单提交，把localStorage数据加入表单 #

既然你需要整页跳转，其实表单提交更适配这个场景，只需要在表单里加个隐藏字段，提交前把localStorage的数据赋值进去就行。

步骤1：修改表单代码

添加一个hidden类型的input，命名为cart_list（和控制器参数名一致）：

@using (Html.BeginForm("CompareItemsList", "Compare", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="smartcart" hidden></div>
    <!-- 新增隐藏字段存储localStorage数据 -->
    <input type="hidden" name="cart_list" id="cart_list" />
    <div class="col-md-6">
        <select name="brandList" id="brandList" class="form-control">
            @foreach (var item in Model.Subbrands)
            {
                foreach (var item2 in Model.selectedBrands)
                {
                    if (item.Title != item2)
                    {
                        <option>@item.Title</option>
                    }
                }
            }
        </select>
    </div>
    <div class="col-xs-1">
        <button type="submit" command="submit" class="btn btn-success" id="btna" value="compare">
            Compare with this brand
        </button>
    </div>
    <script>
        $("#btna").click(function (evt) {
            // 把localStorage里的cart数据赋值给隐藏字段
            $("#cart_list").val(localStorage.getItem("cart"));
            // 不用阻止默认行为，表单会正常提交并跳转
        });
    </script>
}

步骤2：控制器代码保持不变

原来的控制器代码可以直接接收cart_list参数，因为表单提交时会把隐藏字段的值一起传过去。

为什么模态框里的类似功能能正常运行？ #

大概率是模态框里的提交逻辑要么是同步表单提交（自然触发页面跳转），要么是Ajax请求后手动处理了页面更新/跳转，和你当前的代码逻辑不一样。

推荐优先选方案二，因为表单提交更贴合整页跳转的场景，代码也更简洁直观。

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