如何使用jQuery Ajax调用Action方法时返回指定视图OfferOrderView

嘿，我来帮你搞定这个问题～你现在的核心问题是用AJAX调用Action后，想返回OfferOrderView视图，但当前的写法可能因为数据类型不匹配或者处理方式不对没达到预期，我分两种常见场景给你解决方案：

场景1：在当前页面异步加载OfferOrderView的内容（局部刷新） #

如果不想跳转页面，只是把OfferOrderView的内容嵌入到当前页面的某个区域，可以这么做：

第一步：修改后端Action方法 #

让Action返回PartialView（不带布局页的视图片段），而不是普通View，避免加载整个布局：

public ActionResult OfferOrderView(int EstId)
{
    // 这里写你的业务逻辑，比如根据EstId获取对应数据
    var viewModel = GetOfferOrderViewModel(EstId); // 假设这是你的数据获取方法
    
    // 返回指定的PartialView，第二个参数是视图需要的模型
    return PartialView("OfferOrderView", viewModel);
}

第二步：调整前端AJAX代码 #

把dataType改成html（因为返回的是HTML内容，不是JSON），然后在success回调里把返回的视图内容插入到页面的容器中（比如你可以在页面加一个<div id="offerOrderContainer"></div>用来放视图）：

$(document).ready(function () { 
    $("#Add").click(function () { 
        $.ajax({
            url: '@Url.Action("OfferOrderView","Sales")', 
            type: "POST", 
            dataType: "html", // 关键：改成html，匹配后端返回的PartialView
            data: JSON.stringify({EstId: EstId}), // 因为contentType是json，要序列化数据
            contentType: 'application/json; charset=utf-8', 
            success: function (result) { 
                // 将返回的视图内容插入到指定容器
                $("#offerOrderContainer").html(result);
            }, 
            error: function (xhr, ajaxOptions, thrownError) { 
                console.error("加载视图失败：", thrownError);
            }
        });
    });
});

场景2：直接跳转到OfferOrderView的完整页面（整页刷新） #

如果你的需求是点击按钮后直接跳转到OfferOrderView页面，那其实不需要用AJAX，直接跳转或者提交表单就行：

方式1：GET跳转（简单快捷，适合参数不敏感的情况） #

$(document).ready(function () { 
    $("#Add").click(function () { 
        // 直接通过URL跳转，把EstId作为参数传递
        window.location.href = '@Url.Action("OfferOrderView","Sales")?EstId=' + EstId;
    });
});

方式2：POST提交（适合参数敏感或必须用POST的场景） #

如果业务要求必须用POST请求，可以动态创建一个隐藏表单提交：

$(document).ready(function () { 
    $("#Add").click(function () { 
        // 创建一个临时表单
        var tempForm = $('<form>', {
            method: 'POST',
            action: '@Url.Action("OfferOrderView","Sales")'
        });
        // 添加隐藏参数EstId
        tempForm.append($('<input>', {
            type: 'hidden',
            name: 'EstId',
            value: EstId
        }));
        // 把表单加到页面并提交
        tempForm.appendTo('body').submit();
    });
});

为什么原来的代码没生效？ #

你原来的AJAX设置了dataType: "json"，但如果后端Action返回的是View（HTML内容），前端会因为解析JSON失败触发error回调，所以才没得到预期的结果～

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