从服务器回调到客户端
本文关键字:客户端 回调 服务器 | 更新日期: 2023-09-27 17:56:00
我正在使用 ASP.NET MVC 4应用程序,我需要通过在客户端中发送消息来显示客户端中的消息。
我的要求是用户在 UI 中单击一个按钮,我将处理服务器上的文件,并在我处理的每个文件末尾在 UI 中显示消息。 我需要使用 MVC 在客户端中显示文件名 ASP.NET。
任何人都可以通过每次从服务器调用客户端方法来帮助如何在客户端中显示消息 for-each 循环。
我可以调用控制器和每个控制器的结束,我将向 UI 发送最终消息,但是如何在每个 foreach 循环迭代上发送?
试试这个:根据所需的预定义间隔更新进度的脚本方法
控制器:
public class HomeController : Controller
{
private static IDictionary<Guid, int> tasks = new Dictionary<Guid, int>();
public ActionResult Index()
{
return View();
}
public ActionResult Start()
{
var taskId = Guid.NewGuid();
tasks.Add(taskId, 0);
Task.Factory.StartNew(() =>
{
for (var i = 0; i <= 100; i++)
{
tasks[taskId] = i; // update task progress
Thread.Sleep(50); // simulate long running operation
}
tasks.Remove(taskId);
});
return Json(taskId);
}
public ActionResult Progress(Guid id)
{
return Json(tasks.Keys.Contains(id) ? tasks[id] : 100);
}
}
视图:
<script type="text/javascript">
function updateMonitor(taskId, status) {
$("#" + taskId).html("Task [" + taskId + "]: " + status);
}
$(function () {
$("#start").click(function (e) {
e.preventDefault();
$.post("Home/Start", {}, function (taskId) {
// Init monitors
$("#monitors").append($("<p id='" + taskId + "'/>"));
updateMonitor(taskId, "Started");
// Periodically update monitors
var intervalId = setInterval(function () {
$.post("Home/Progress", { id: taskId }, function (progress) {
if (progress >= 100) {
updateMonitor(taskId, "Completed");
clearInterval(intervalId);
} else {
updateMonitor(taskId, progress + "%");
}
});
}, 100);
});
});
});
开始新任务...
您必须编写一个逐步将结果写入响应的ActionResult
。 因此,您可以在每次 foreach 循环迭代中向用户显示一些数据。我写了一个简单的ActionResult
,每 2 秒写一个数字:
public class ProgressiveResult : ActionResult
{
public override void ExecuteResult(ControllerContext context)
{
for (int i = 0; i < 20; i++)
{
context.HttpContext.Response.Write(i.ToString());
Thread.Sleep(2000);
context.HttpContext.Response.Flush();
}
context.HttpContext.Response.End();
}
}
这是一个返回此结果的操作:
public ActionResult LongProcess()
{
return new ProgressiveResult();
}
因此,您可以编写ActionResult
并在ExecuteResult
方法中编写foreach
代码。
更新:
您可以使用 Ajax 请求进行此调用,并使用类似于以下代码的简单代码返回结果:
var result = "";
function showResult() {
if (result !== oReq.responseText) {
result = oReq.responseText;
console.log(result);
}
}
var oReq = new XMLHttpRequest();
oReq.open("get", "/Home/LongProcess", true);
oReq.send();
setInterval(showResult, 1000);