我只想在长时间运行服务器调用时创建进度条。当控制器执行长时间运行的作业时,我无法向控制器创建ajax post请求。
我想创建一个额外的操作来获取当前长时间运行任务的实际语句。 我尝试在ajax请求中创建轮询,然后我可以从服务器端返回状态并将其显示在客户端进度条中。有任何想法吗 ?
答案 0 :(得分:43)
使用SignalR这是正确而最简单的方法。请在https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.2
下载Microsoft SignalR在名为hubs的项目路径中的单独文件夹中创建一个hub类,将两个类文件添加到hubs文件夹中
Startup.cs
using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}
ProgressHub.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace RealTimeProgressBar
{
public class ProgressHub : Hub
{
public string msg = "Initializing and Preparing...";
public int count = 1;
public static void SendMessage(string msg , int count)
{
var message = "Process completed for " + msg;
var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
hubContext.Clients.All.sendMessage(string.Format(message), count);
}
public void GetCountAndMessage()
{
Clients.Caller.sendMessage(string.Format(msg), count);
}
}
}
在控制器中,
// assemblies
using Microsoft.AspNet.SignalR;
using RealTimeProgressBar;
//call this method inside your working action
ProgressHub.SendMessage("initializing and preparing", 2);
在视图中,
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script type="text/javascript">
$(document).ready(function () {
$("#progressBar").kendoProgressBar({
min: 0,
max: 100,
type: "percent",
});
});
function StartInvoicing()
{
var progressNotifier = $.connection.progressHub;
// client-side sendMessage function that will be called from the server-side
progressNotifier.client.sendMessage = function (message, count) {
// update progress
UpdateProgress(message, count);
//alert(message);
};
// establish the connection to the server and start server-side operation
$.connection.hub.start().done(function () {
// call the method CallLongOperation defined in the Hub
progressNotifier.server.getCountAndMessage();
});
}
// Update the progress bar
function UpdateProgress(message, count) {
var result = $("#result");
result.html(message);
$("#progressBar").data("kendoProgressBar").value(count);
}
</script>
有关详细信息,请参阅google
帮助下的一些现有文章答案 1 :(得分:1)
我有一个长期服务,我在下面给出了一个基本的想法。根据您的要求使用它。
ProgressArgs
getProgress()
,它将通过ajax返回JSON字符串进度。getProgress()
函数,该函数一旦启动就会定期调用服务器,直到进程完成为止。我给出了一个粗略的例子来实现它。希望它可以帮助你。
进度参数结构的类
public class ProgressArgs
{
public int Completed { get; set; }
public int Total { get; set; }
public int Percentage { get; set; }
public string Status { get; set; }
}
在过程中,我一直在更新数据库中的统计数据
public void LongRunningProcess()
{
ProgressArgs result = new ProgressArgs();
result.Completed = 0;
result.Total = userList.Count;
foreach (var item in itemList)
{
//Do Some processing which u want to do
result.Total++;
result.Percentage = (result.Completed * 100) / result.Total;
result.Status = "Processing";
string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
//update the strToSave to the database somewhere.
}
//after completing of processing
result.Total++;
result.Percentage = (result.Completed * 100) / result.Total;
result.Status = "Completed";
string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
//update the strToSave to the database somewhere.
}
通过ajax获取进度的C#动作
public string getProgress()
{
string strJSON = config.GetValue("progress"); //Get stats from the database which is saved in json
return strJSON;
}
Javascript代码
//Ajax Get Progress function
function getProgress() {
var dataToSend = '';
$.ajax({
url: '@Url.Action("getProgress")', //Link to the action method
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
success: function (response) {
console.log(response);
if (response != null) {
data = JSON.parse(response);
console.log(data);
//update the progressbar
progressbar.progressbar("value", data.Percentage);
//When the jobalert status is completed clear the interval
if (data.Status == 0) {
setTimeout(getProgress, 800); //TImout function to call the respective function at that time
}
serviceCompleted(data); function to call after completing service
}
},
error: function (xhr) {
alert('Error: There was some error while posting question. Please try again later.');
}
});
}