Jayakaran Theivendramoorthy Jayakaran Theivendramoorthy - 3 months ago 123
Ajax Question

Progress bar for long running server calls in ASP.Net MVC

I just want to create a progress bar while long running server calls. I could not create a ajax post request to the controller while the controller is doing a long running job.

I want to create an additional action to get the actual statement of current long running task.
I tried to create poll in ajax request then i can able to return the status from the server side and display it in a client side progress bar. Any ideas ?


The right and easiest way to do this is with SignalR. Please download Microsoft SignalR in https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.2

Create a hub class in separate folder in project path called hubs, add two class files into the hubs folder


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


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);

In controller,

// assemblies
using Microsoft.AspNet.SignalR;
using RealTimeProgressBar;   

//call this method inside your working action
ProgressHub.SendMessage("initializing and preparing",  2);

In View,

<!--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 () {

        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);

    // establish the connection to the server and start server-side operation
    $.connection.hub.start().done(function () {
        // call the method CallLongOperation defined in the Hub

// Update the progress bar 
function UpdateProgress(message, count) {
    var result = $("#result");

For more details refer some existing articles with the help of google