A day with .Net

My day to day experince in .net

Real-time progress bar using JQuery UI and SignalR

Posted by vivekcek on December 26, 2012

So your web application do some long running process, like calling some 10 web services and consolidate information and display to user.In such scenarios it is a best practice to show a progress bar to the user, that display how much processing is finished or how much percentage completed.

Why SignalR?

SignalR can be used to avoid continuous polling to the server by client to know about the status of work.
SignalR can initiate call from the server to client after some operation is finished.

Other things you can learn from this post

1. Call SignalR hub method on page load
2. Redirect to another page from SignalR hub method.
3. Access the query string through java-script.

Example Idea

An application that post a status update to social medias like Facebook,twitter etc through single window.

6

Quick to code

1. I recommend Visual Studio 2012, because the web site template project include jquery and jquery ui pre installed.

2. Create a new website (not web application project)

1

3. Use Nuget Package Manager and install SignalR as shown below

2

4. Install Json2.js using Nuget as shown below.

3

5. Check the script folder and ensure all script files shown in below picture are present.

4

6. Ensure CSS for Jquery Ui is present in Content folder.

5

7. Create 3 WebForm’s Default.aspx, Progress.aspx and Result.aspx

8. In Default.aspx add a button. In the click event add below code.

 protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("Progress.aspx?message=hai");
    }

9. In App_Code folder add a class named Social. This class perform a virtual log running process. This class contain a hub method named ‘postStatus(string message)’.We will call this method in the Progress.aspx page load.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading;
using SignalR;
using SignalR.Hubs;
/// <summary>
/// Summary description for Server
/// </summary>
namespace SignalR
{
    [HubName("social")]
    public class Social : Hub
    {

        public void postStatus(string message)
        {

           
            Caller.updateGaugeBar(10);
            Caller.displayMessage(String.Format("Posted to: {0} ...", "Facebook.com"));
            Thread.Sleep(2000);

            
            Caller.updateGaugeBar(40);
            Caller.displayMessage(String.Format("Posted to:: {0} ...", "googleplus.com"));
            Thread.Sleep(3000);

            
            Caller.updateGaugeBar(64);
            Caller.displayMessage(String.Format("Posted to:: {0} ...", "Twitter.com"));
            Thread.Sleep(2000);

            Caller.updateGaugeBar(77);
            Caller.displayMessage(String.Format("Posted to:: {0} ...", "Diggit.com"));
            Thread.Sleep(2000);

            Caller.updateGaugeBar(92);
            Caller.displayMessage(String.Format("Posted to:: {0} ...", "blogger.com"));
            Thread.Sleep(2000);

            Caller.displayMessage(String.Format("Processing Result"));
            Caller.updateGaugeBar(100);
            Thread.Sleep(2000);
            
            Caller.redirectMe("Result.aspx");
        }


    }
}

10. Add the below code in HTML of Progress.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Progress.aspx.cs" Inherits="Progress" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.signalR-0.5.3.js" type="text/javascript"></script>
    <script type="text/javascript" src='<%= ResolveClientUrl("~/signalr/hubs") %>'></script>
    

    <script type="text/javascript">

        var proxy = $.connection.social;
        proxy.displayMessage = function (message) {
            $("#msg").html(message);
        };

        proxy.redirectMe = function (target) {
            var url = target;
            location.href = '<%= Page.ResolveUrl("'+url+'") %>';
        };

        proxy.updateGaugeBar = function (perc) {
            $("#bar").progressbar({value:perc})
        };

        $.connection.hub.start().done(function () {
            var msg = querySt("message");
            proxy.postStatus(msg);
        });

        function querySt(Key) {
            var url = window.location.href;
            KeysValues = url.split(/[\?&]+/);
            for (i = 0; i < KeysValues.length; i++) {
                KeyValue = KeysValues[i].split("=");
                if (KeyValue[0] == Key) {
                    return KeyValue[1];
                }
            }
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
     <div>
            <b>Status:</b>&nbsp;&nbsp;&nbsp;<span id="msg"></span>
        </div>
        <div id="bar"></div>
    </form>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s