Click here to Skip to main content
14,659,351 members
Articles » Web Development » ASP.NET » General
Posted 6 Sep 2016


38 bookmarked

SignalR Progress Bar Simple Example - Sending Live Data from Server to Client

Rate this:
4.94 (26 votes)
Please Sign up or sign in to vote.
4.94 (26 votes)
8 Sep 2016MIT
Simple project that shows how to use SignalR in ASP.NET MVC application to track progress of some long running process and display on clientside using Bootstrap modal.

Image 1


You have a long running task in your application and you want your users to know what's going on while they wait for the process to finish? That's exactly why you would want to use SignalR functionality. You could show progress bar saying "In progress" and remove it when the process is done, but wouldn't it be even better if you could give them more detailed information about the status of the process in progress. It was always complicated to do that in web apps until the introduction of SignalR.

This simple app will show you how you can implement SignalR in your MVC application in a matter of minutes.

Adding SignalR to the Project

First thing you need to do to start working with SignalR is to add it in your project. You can use Nuget Package Manager Console.

Go to: Tools > NuGet Package Manager > Package Manager Console

Image 2

Insert the following command and press Enter: Install-Package Microsoft.AspNet.SignalR

Image 3

Visual Studio will install it for you.

After the installation has finished, you can go to your Startup.cs file (which is automatically added in MVC5 project, but if you don't have it, check out this link to see what it is and why you would use it. Startup.cs) and map SignalR to your application.

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(SignalRProgressBarSimpleExample.Startup))]
namespace SignalRProgressBarSimpleExample
    public partial class Startup
        public void Configuration(IAppBuilder app)


Next, we must include some scripts preferably in this order. I've included it in my _Layout.cshtml file.

  1. jQuery - @Scripts.Render("~/bundles/jquery") - MVC project already has Jquery included, but you can include it anyway you want
  2. Bootstrap - We're using bootstrap to style our web app and to use Modal Popup div to show our progress
  3. SignalR - jquery.signalR-2.0.2.min.js
  4. /signalr/hubs"

You can download all of these scripts from my demo project.

Below our added scripts, we add a little bit of JavaScript that we will use to get data from the server.

Starting Connection and Handling Data Sent from Server

$(function () {

            // Reference the auto-generated proxy for the hub.
            var progress = $.connection.progressHub;

            // Create a function that the hub can call back to display messages.
            progress.client.addProgress = function (message, percentage) {
                //at this point server side had send message and percentage back to the client
                //and then we handle progress bar any way we want it
                //Using a function in Helper.js file we show modal and display text and percentage
                ProgressBarModal("show", message +  " " + percentage);
                //We're filling blue progress indicator by setting the width property to the variable
                //that was returned from the server
                //closing modal when the progress gets to 100%
                if (percentage == "100%") {

            //Before doing anything with our hub we must start it
            $.connection.hub.start().done(function () {
                //getting the connection ID in case you want to display progress to the specific user
                //that started the process in the first place.
                var connectionId = $;


SignallR Hub

Image 4

Next, we create a new folder called Hubs, and create a class called ProgressHub.cs which inherits from Hub. We must have this class in order for SignalR to communicate between server and client. We don't have to define any method here because in this example we want to send data directly from server. Every other chat tutorial calls the method from client and then sends data back to every other client that is connected at that point.

Our example uses some other method to do some work and then we send the data from outside of the hub.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRProgressBarSimpleExample.Hubs
    public class ProgressHub : Hub

In our HomeController, there is a method that we called from button on the client side that does some work and sends data to the client every time it iterates through each item in the loop.

public JsonResult LongRunningProcess()
    int itemsCount = 100;

    for (int i = 0; i <= itemsCount; i++)

        Functions.SendProgress("Process in progress...", i , itemsCount);

    return Json("", JsonRequestBehavior.AllowGet);

At the end of each task done, we call Functions.SendProgress("Process in progress...", i , itemsCount); that sends data back to client.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using SignalRProgressBarSimpleExample.Hubs;

namespace SignalRProgressBarSimpleExample.Util
    public class Functions
        public static void SendProgress(string progressMessage, int progressCount, int totalItems)
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();

            var percentage = (progressCount * 100) / totalItems;

            hubContext.Clients.All.AddProgress(progressMessage, percentage + "%");

hubContext.Clients.All.AddProgress(progressMessage, percentage + "%"); - sends data to all clients connected at that time (for the purpose of this tutorial). See more information about SignalR Clients, Groups...

Points of Interest

After reading many tutorials about implementing SignalR, I decided to make this tutorial (which is my first ever) to help you get started quickly with SignalR. This example is not another chat tutorial, but a progress bar tutorial.

Please fell free to download the sample project and test it...


This article, along with any associated source code and files, is licensed under The MIT License


About the Author

Denis Lazendić
Web Developer
Croatia Croatia
No Biography provided

Comments and Discussions

QuestionMake progress bar for application pool in Classic Pin
Member 1460772726-Mar-20 21:00
MemberMember 1460772726-Mar-20 21:00 
Questionapplies to ASP.Net Web forms? Pin
kiquenet.com20-Dec-19 23:08
professionalkiquenet.com20-Dec-19 23:08 
PraiseMy vote of 5 Pin
Member 1455783113-Aug-19 0:50
MemberMember 1455783113-Aug-19 0:50 
QuestionGreat Work Pin
Member 1153378612-Jul-19 3:36
MemberMember 1153378612-Jul-19 3:36 
QuestionUpdate to ASP.NET Core SignalR 2.2? Pin
asafgo18-Mar-19 23:28
Memberasafgo18-Mar-19 23:28 
Questionprogress bar only to current browser Pin
traci dukes1-Mar-19 15:07
Membertraci dukes1-Mar-19 15:07 
Questionprogress bar only to current browser Pin
traci dukes1-Mar-19 15:07
Membertraci dukes1-Mar-19 15:07 
QuestionDelay in Progress bar popup using SignalR in IE Pin
Member 867461430-Jan-19 1:39
MemberMember 867461430-Jan-19 1:39 
Suggestionnew solution Pin
PureDeveloper16-Jan-19 13:31
MemberPureDeveloper16-Jan-19 13:31 
GeneralRe: new solution Pin
traci dukes4-Mar-19 7:35
Membertraci dukes4-Mar-19 7:35 
PraiseSuperb Article Pin
veeru prabhu12-Jul-18 20:51
Memberveeru prabhu12-Jul-18 20:51 
Questionprogress bar with SignalR2 is not working properly after deploying on aws server ie EC2 instance Pin
Member 1387299114-Jun-18 6:14
MemberMember 1387299114-Jun-18 6:14 
PraiseVery helpful Pin
Vladimir Emelyanov22-May-18 5:15
MemberVladimir Emelyanov22-May-18 5:15 
QuestionVery Helpful. Thank you! nm Pin
nathan bisges9-Feb-18 8:26
Membernathan bisges9-Feb-18 8:26 
Questioni have error when launch sample appplication in VS process with an id of 38232 is not running Pin
taoufik rais30-Jan-18 23:01
Membertaoufik rais30-Jan-18 23:01 
Questionsample code is unavailable Pin
Member 1324963420-Sep-17 17:58
MemberMember 1324963420-Sep-17 17:58 
AnswerRe: sample code is unavailable Pin
Member 1324963420-Sep-17 19:04
MemberMember 1324963420-Sep-17 19:04 
QuestionCancel the progress Pin
Grabosen20-Aug-17 1:36
MemberGrabosen20-Aug-17 1:36 
QuestionProgress Bar is not getting hidden - Help needed urgent Pin
Member 1295872219-Jan-17 11:38
MemberMember 1295872219-Jan-17 11:38 
AnswerRe: Progress Bar is not getting hidden - Help needed urgent Pin
Denis Lazendić24-Jan-17 11:05
MemberDenis Lazendić24-Jan-17 11:05 
GeneralRe: Progress Bar is not getting hidden - Help needed urgent Pin
Member 1295872225-Jan-17 3:54
MemberMember 1295872225-Jan-17 3:54 
QuestionQuestion Pin
Aakash Bashyal30-Nov-16 5:31
MemberAakash Bashyal30-Nov-16 5:31 
AnswerRe: Question Pin
Denis Lazendić4-Dec-16 7:19
MemberDenis Lazendić4-Dec-16 7:19 
GeneralRe: Question Pin
rvberloo12-Jan-17 1:25
Memberrvberloo12-Jan-17 1:25 
GeneralMy vote of 5 Pin
Anurag Gandhi19-Oct-16 21:28
professionalAnurag Gandhi19-Oct-16 21:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.