ASP.NET MVC 中如何编写Ajax POST请求实现提交后跳转至指定Action视图

Ajax异步请求默认不会自动遵循后端返回的302重定向响应，只会把重定向目标页的HTML内容作为普通接口响应存入success回调，不会触发浏览器层面的页面跳转，因此后端在Ajax流程中写的RedirectToAction逻辑完全不会生效。
同时原有代码存在几处明确的语法/拼写错误，会进一步导致流程异常：

• 前端Ajax配置中data: data;错误使用分号，触发脚本语法错误
• 前端请求URL中控制器名Datasset拼写错误，正确应为Dataset
• 后端未区分Ajax请求和普通表单提交的返回逻辑，适配性不足

1. 后端Action逻辑调整 #

调整POST版Add_Dataset Action的返回逻辑，对Ajax请求返回带跳转地址的JSON数据，保留普通表单提交的原有重定向逻辑，同时适配带参数的跳转传递：

[HttpPost]
public ActionResult Add_Dataset(Dataset model)
{
    BaseUrl = ConfigurationManager.AppSettings["baseServiceUrl"];
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(BaseUrl);
        client.DefaultRequestHeaders.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        
        // 保留原有调用数据集API更新数据的逻辑
        var postTask = client.PutAsJsonAsync<Dataset>("api/datasets/" + model.Dataset_ID, model);
        postTask.Wait();
        var result = postTask.Result;

        if (result.IsSuccessStatusCode)
        {
            // 区分Ajax请求和普通表单提交
            if (Request.IsAjaxRequest())
            {
                if (!model.add_Contract)
                {
                    return Json(new
                    {
                        dbUpdateResult = "success",
                        redirectUrl = Url.Action("Add_Dataset", "Dataset")
                    });
                }
                else
                {
                    // 跳转Add_Contract时携带数据集关键参数，供后续流程使用
                    return Json(new
                    {
                        dbUpdateResult = "success",
                        redirectUrl = Url.Action("Add_Contract", "Contract", new
                        {
                            datasetId = model.Dataset_ID,
                            datasetPK = model.Dataset_PK
                        })
                    });
                }
            }
            // 普通表单提交保留原有重定向逻辑
            if (!model.add_Contract)
            {
                return RedirectToAction("Add_Dataset");
            }
            else
            {
                return RedirectToAction("Add_Contract", "Contract", model);
            }
        }
    }
    // 操作失败的返回逻辑做兼容
    if (Request.IsAjaxRequest())
    {
        return Json(new { dbUpdateResult = "fail", redirectUrl = Url.Action("Add_Dataset", "Dataset") });
    }
    return RedirectToAction("Add_Dataset");
}

对应调整GET版Add_Contract Action，接收跳转携带的数据集参数，供后续合同提交流程使用：

[HttpGet]
public async Task<ActionResult> Add_Contract(int datasetId, string datasetPK)
{
    // 将接收到的数据集参数传递给视图，避免后续丢失
    ViewBag.CurrentDatasetId = datasetId;
    ViewBag.CurrentDatasetPK = datasetPK;
    var returned = new Contract();
    return View(returned);
}

2. 前端Ajax逻辑调整 #

修正原有代码的语法错误，在success回调中拿到后端返回的跳转地址后，手动触发浏览器页面跳转：

$("#AddContract").click(function () {
    var contractAdd = "true";
    var datasetID = $("#dataset_Id").val();
    var datasetPK = $("#Dataset_PK").val();
    
    // 初始化FormData时补充括号的语法错误
    var data = new FormData();
    data.append("datasetId", datasetID);
    data.append("Dataset_PK", datasetPK);
    data.append("add_Contract", contractAdd);

    $.ajax({
        type: "POST",
        // 修正原有URL的控制器拼写错误
        url: key + "/Dataset/Add_Dataset/",
        // 修正原有配置中的分号语法错误
        data: data,
        contentType: false,
        processData: false,
        success: function (ajaxRespond) {
            if (ajaxRespond.dbUpdateResult == "success") {
                // 手动触发页面跳转
                window.location.href = ajaxRespond.redirectUrl;
            } else {
                alert("数据集更新失败，即将返回列表页");
                window.location.href = ajaxRespond.redirectUrl;
            }
        },
        error: function () {
            alert("请求异常，请稍后重试");
        }
    })
})

调整后即可实现需要的流程：

• 第一步：在Add_Dataset页触发更新数据集操作，Ajax完成数据更新后自动跳转到Add_Contract页
• 第二步：在Add_Contract页录入合同信息，提交时将之前携带的数据集参数、新录入的合同信息一并提交到后端保存
• 第三步：后端完成合同数据保存后，复用同一套Ajax返回/重定向逻辑，跳回Add_Dataset页加载更新完成的数据集+关联合同数据

内容的提问来源于stack exchange，提问作者Paul T. Rykiel