javascript - 为什么调用 RedirectToAction 时我的网页不刷新？

Question

所以我目前正在开发一个网页，其中有一个包含一些表格数据的表格，表格数据的每一行都有一个按钮，负责启动一个进程，当我单击其中一个按钮时，它会触发一个ajax调用。一旦ajax调用完成，它就会更新网页上的一些东西，这个“东西”是一个span元素，它更新类和文本。

但是，如果我在触发 ajax 调用时单击按钮和完成之间手动刷新页面，则它不会更新。

让我用一些代码来解释这一点。

我有这个按钮，单击时会调用 ajax 调用

<button type="button" class="btn btn-icon waves-effect waves-light btn-success" onclick="@("StartProcess('"+model.ProcessName+"')")"> <i class="fa fa-power-off"></i> </button>

Ajax 调用如下所示

 function StartProcess(ProcessName) {

        var dataPost = { processName: ProcessName};
        $.ajax({
            data: dataPost,
            url: '@Url.Action("Start", "Dashboard")',
            type: "POST",
            dataType: "text",
            beforeSend: function () {
                // Handle the beforeSend event
                $("#" + ProcessName).removeClass("badge-danger").addClass("badge-info").html("Starting");
            },
            success: function (redirect) {
                // Handle the complete event
                window.location = redirect;
                $("#" + ProcessName).removeClass("badge-info").addClass("badge-success").html("Online");


            },
            error: function() {
                //AJAX request not completed
                $("#" + ProcessName).removeClass("badge-info").addClass("badge-danger").html("Error");
    }
            // ......
        });
    };

它的作用是向后端的 IActionResult 发出请求，该请求运行得很好。它看起来是这样的，请记住，它每次都会到达 RedirectToAction，无论我是否刷新。

 [HttpPost]
        public IActionResult Start(string ProcessName)
        {
            ProcessFactory.StartProcess(ProcessName, _user);
            while (ProcessFactory.ServerFlag == null)
            {
                //Stalling until "ProcessFactory.StartProcess" has finished

            }

            //It reaches this no matter what
            if (ProcessFactory.ServerFlag == "Online")
            {
                Debug.Print("===========ONLINE============");
                Response.StatusCode = 200;

                //It reaches this no matter what
                return RedirectToAction("Dashboard", "Dashboard");
            }
            else if (ProcessFactory.ServerFlag == "Already running")
            {
                Response.StatusCode = 200;
                return RedirectToAction("Dashboard", "Dashboard");
            }
            else if (ProcessFactory.ServerFlag == "Error")
            {
                Response.StatusCode = 401;
                return RedirectToAction("Dashboard", "Dashboard");
            }

            return RedirectToAction("Dashboard", "Dashboard");
        }

这是我面临的问题，当我单击开始并且只是让它运行而不刷新页面时，它工作得很好，它更新了元素而没有任何问题。

但是，如果我在单击开始按钮后刷新浏览器，当它在 while 循环内时，它会通过点击 RedirectToAction 以完全相同的方式完成，但这次它不会刷新浏览器，它甚至不调用“仪表板”IActionResult。我尝试在刷新页面之前在其中放置一个断点，并且它击中了它，但是当我再次尝试时，但这次刷新页面，它没有击中断点。请记住，它每次都会在其中一个 if 语句中到达 RedirectToAction，无论发生什么，即使我是否刷新。

public async Task<IActionResult> Dashboard()
        {
            ProcessFactory.LoadProcesses(_user);

            //Load all processes
            var model = ProcessFactory.LoadProcesses(_user);

            return View(model);
        }

这是失去上下文的情况还是这里发生了什么？

Answer 1

您正在向 JavaScript 返回一个 RedirectToAction() (相当于 302)，但它不知道如何处理它。我发现您正在尝试手动设置响应代码，但最简单的解决方案是简单地更改要返回到 URL 的内容。

[HttpPost]
public IActionResult Start(string ProcessName)
{
    ProcessFactory.StartProcess(ProcessName, _user);
    //[....lots of stuff]
    return Json(Url.Action("Dashboard", "Dashboard"));
}

在 JavaScript 上，将返回类型更改为 JSON。可以说，您可以从 Controller 返回一个字符串，而不用 JSON 包装，但这允许您将来返回更多数据(如果您选择)(只需向 JSON 响应添加更多数据)

function StartProcess(ProcessName) {

    var dataPost = { processName: ProcessName};
    $.ajax({
        data: dataPost,
        url: '@Url.Action("Start", "Dashboard")',
        type: "POST",
        dataType: "json",
        beforeSend: function () {
            // Handle the beforeSend event
            $("#" + ProcessName).removeClass("badge-danger").addClass("badge-info").html("Starting");
        },
        success: function (redirect) {
            // Handle the complete event
            window.location = redirect;
            //changing any part of the UI is redundant here as you are redirecting
            //the browser window
        },
        error: function() {
            //AJAX request not completed
            $("#" + ProcessName).removeClass("badge-info").addClass("badge-danger").html("Error");
}
        // ......
 });
};