ASP.NET MVC 从 Ajax 请求更新 HTML 组件答案

【问题标题】：ASP.NET MVC Update HTML component from Ajax requestASP.NET MVC 从 Ajax 请求更新 HTML 组件
【发布时间】：2017-09-18 15:46:04
【问题描述】：

有什么方法可以在服务器端更新 Ajax 请求中的 HTML 进度条（或任何组件）？

例如（模拟）：

JavaScript：

$.ajax({
url: '/Sales/SaveStoreByType',
type: 'POST',
data: {
    locationId: id
},
success: function (result) {
         ...
},
 error: function (xhr, ajaxOptions, thrownError) {
         ...
},
update: function(percent){
   MyProgressBar('update',percent);
}
});

和服务器端：

public IActionResult SaveStoreByType(short locationId)
{
   foreach (var item in collection)
   {
     //here simule a heavy process and update progress bar
     i++;
     ajaxrequest.update(i);
   }
   return Json(new { error = 0 });
}

谢谢

【问题讨论】：

没有。服务器端代码不能操纵网络浏览器，它只能返回一个响应。您尝试做的事情听起来像是 SignalR 之类的合理用例，它有助于在客户端和服务器端代码之间提供更“实时”的体验。

标签： javascript c# ajax asp.net-mvc

【解决方案1】：

您可以使用 SignalR 与服务器通信，并获取任务状态，因此您可以更新状态栏

但您也可以使用递归函数和 setTimeout() 函数在循环中发出请求，如下所示：

function viewProgress() {
    $.get('@Url.Action("GetTaskStatus", "YourController")', function (data) {
        if(data.Success){
            //finished
        }
        else{
            //update your status bar from data.Percent
            setTimeout(viewProgress(), 1000);
        }
    });
}

您必须在 YourController 中有一个 Action: GetTaskStatus，它返回一个 JsonResult，其中包含一个包含 Success 和 Percent 属性的对象

【讨论】：