为什么我的网页在调用重定向到操作时不刷新?

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发出请求，该确实可以完美运行。 这是它的样子，请记住，即使我是否刷新，它每次都会到达重定向到操作。

[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。 可以说，您可以在不包装 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");
}
// ......
});
};