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

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

Last I faced to fix an issue to create client side progress bar for long running server side call. so the way I thought to fix this issue as Producer Consumer Approach. Normally Producer updates the results and Consumer will poll the results and display in a J query progress bar. Then I found the Microsoft SignalR library is the most easiest way to fix this issue. Normally we can use this library to chat applications also.

First need to download SignalR using nuget,

https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.2

Second Step, 

Create folder named as hubs in your project directory. 

Create two classes inside hubs folder, 

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

Now in long running controller action, we need to update / send the progress to client action.

In controller,

// assembly

using Microsoft.AspNet.SignalR;
using RealTimeProgressBar;   

//call this method inside your working action

ProgressHub.SendMessage("initializing and preparing",  2);

// View, establishing the connection to server and updating the 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.--> 

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

// Using kendo progress bar to update view

 function UpdateProgress(message, count) {
        var result = $("#result");
        result.html(message);
        $("#progressBar").data("kendoProgressBar").value(count);
    }

Instead of kendo progress bar you can use some jquery progress bars to update this percentage.