ASP.Net MVC中长时间运行的服务器调用的进度条

时间:2014-12-05 10:16:02

标签: asp.net ajax asp.net-mvc

我只想在长时间运行服务器调用时创建进度条。当控制器执行长时间运行的作业时,我无法向控制器创建ajax post请求。

我想创建一个额外的操作来获取当前长时间运行任务的实际语句。 我尝试在ajax请求中创建轮询,然后我可以从服务器端返回状态并将其显示在客户端进度条中。有任何想法吗 ?

2 个答案:

答案 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)

我有一个长期服务,我在下面给出了一个基本的想法。根据您的要求使用它。

  1. 我制作了进度参数ProgressArgs
  2. 的结构
  3. 在长时间运行的服务LongRunningProcess()中,定期更新进度值并以JSON格式保存在数据库中
  4. 创建了一个Action方法getProgress(),它将通过ajax返回JSON字符串进度。
  5. 创建了一个函数Javascript getProgress()函数,该函数一旦启动就会定期调用服务器,直到进程完成为止。
  6. 我给出了一个粗略的例子来实现它。希望它可以帮助你。

    进度参数结构的类

    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.');
                }
            });
        }