如何使用回调更新页面上的元素?

Question

我的页面上有一个元素，看起来像这样

<td><span class="badge badge-danger">Stopped</span></td>

我想根据代码中发生的事情更新它。

以这个例子为例。我有一个按钮和那个元素，当我单击该按钮时，我想开始下载名称列表。一旦启动，我希望该范围内的文本说"已开始"而不是"已停止"，而不是一旦代码完成运行，也就是名称列表已下载，我希望它说"完成"而不是"已开始">

我一直在来回阅读有关如何执行此操作的信息，似乎我需要以某种方式实现 ajax，但我不确定如何实现。

我猜这个按钮会调用一个asp-action="StartDownload"，然后它看起来像这样。

public ActionResult StartDownload()
{
StartDownload();
return View("WhereSpanIs");
}

private void StartDownload()
{
//Set span text to "Started" some how
//Finished download
//Set span text to "Done" some how
}

Answer 1

为了在控制器方法请求时在浏览器中操作 HTML，就像在你的方法中一样，你需要像 SignalR 这样的东西来启用服务器(即控制器(和客户端(即浏览器(之间的通信。

正如你已经发现的，在这种情况下，使用Ajax更新文本更容易(使用JavaScript/JQuery(。如以下示例所示，您可以在单击按钮和请求完成时设置文本：

在视图中：

<script type="text/javascript">
// call this method on button click
function startDownload() {
// loading, TODO: update the text)
$.ajax({
type: "GET",
url: '@Url.Action("StartDownload", "Home")',
contentType: "application/json; charset=utf-8",
success: function(data) {/* done, TODO: update the text */ },
error: function() { /* error, TODO: update the text }
});
}
</script>

在(家庭(控制器中：

public ActionResult StartDownload()
{
// TODO: perform the download
return Json(new {status = "OK"});
}

JSON 用于允许结果在 JavaScript 中可解释，尽管此示例中未使用它。 有关详细信息，请参阅购物车教程。