Click here to Skip to main content
14,176,272 members
Click here to Skip to main content
Add your own
alternative version

Stats

53.9K views
33 bookmarked
Posted 6 Sep 2016
Licenced MIT

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

, 8 Sep 2016
Rate this:
Please Sign up or sign in to vote.
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.

Introduction

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

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

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)
        {
            ConfigureAuth(app);

            app.MapSignalR();
        }
    }
}
...

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;
            console.log(progress);

            // 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
                $('#ProgressMessage').width(percentage);
                
                //closing modal when the progress gets to 100%
                if (percentage == "100%") {
                    ProgressBarModal();
                }                
            };

            //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 = $.connection.hub.id;
                console.log(connectionId);
            });

        });

SignallR Hub

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()
        {
    //THIS COULD BE SOME LIST OF DATA
    int itemsCount = 100;

    for (int i = 0; i <= itemsCount; i++)
    {
        //SIMULATING SOME TASK
        Thread.Sleep(500);

        //CALLING A FUNCTION THAT CALCULATES PERCENTAGE AND SENDS THE DATA TO THE CLIENT
        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)
        {
            //IN ORDER TO INVOKE SIGNALR FUNCTIONALITY DIRECTLY FROM SERVER SIDE WE MUST USE THIS
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();

            //CALCULATING PERCENTAGE BASED ON THE PARAMETERS SENT
            var percentage = (progressCount * 100) / totalItems;

            //PUSHING DATA TO ALL CLIENTS
            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...

License

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

Share

About the Author

Denis Lazendić
Web Developer
Croatia Croatia
No Biography provided

You may also be interested in...

Comments and Discussions

 
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 
PraiseServer Invoked SignalR Pin
robertburgh12-Sep-16 7:04
memberrobertburgh12-Sep-16 7:04 
QuestionSignal R Progress Bar Pin
RB Starkey9-Sep-16 20:03
professionalRB Starkey9-Sep-16 20:03 
GeneralMy vote of 5 Pin
Carsten V2.08-Sep-16 20:20
memberCarsten V2.08-Sep-16 20:20 
PraiseAwesome Work Pin
Rohit Reddy8-Sep-16 8:36
memberRohit Reddy8-Sep-16 8:36 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190525.1 | Last Updated 8 Sep 2016
Article Copyright 2016 by Denis Lazendić
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid