Click here to Skip to main content
13,734,245 members
Click here to Skip to main content
Add your own
alternative version

Stats

23.6K views
1.1K downloads
15 bookmarked
Posted 21 Apr 2015
Licenced CPOL

Long Running Process Status Check with SignalR in ASP.NET MVC

, 21 Apr 2015
Rate this:
Please Sign up or sign in to vote.
This small tip will explain how you can check status of long running processes in ASP.NET MVC web application using SignalR by sending messages from server to client during execution.

Introduction

There are many project types that may have long running processes, e.g., complex calculation, multiple databases operations and Windows Workflows execution through MVC web app that are required to send current status to user.

Let's Start

I am using Visual Studio 2013 for this sample. Create a new MVC application with no authentication. Right click on References folder and select Manage NuGet Packages... option. Search for SignalR and Install Microsoft SignalR ASP.NET SignalR. This will install SignalR, its dependencies and SingalR JavaScript files:

Don't forget to install Microsoft jQuery Unobstrusive Ajax, you can get it from NuGet Packages too:

The next step is to create SignalR server side Startup and Hub classes to pass status from server to MVC Razor view. Create Startup.cs on root folder and paste the following code:

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

This is good practice to create a new folder for Hub. Create the following ProgressHub.cs class in Hub folder:

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)
        {
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
            hubContext.Clients.All.sendMessage(string.Format(msg));
        }
    }
}

Edit HomeController from Controllers folder and add the following function:

public ActionResult ProcessApplication()
      {
          ProgressHub.SendMessage("Long Running Process Started<br>");

          ProgressHub.SendMessage("Process 1 is started...");
          System.Threading.Thread.Sleep(6000);
          ProgressHub.SendMessage("Process 1 is Finished");

          System.Threading.Thread.Sleep(2000);

          ProgressHub.SendMessage("Process 2 is started...");
          System.Threading.Thread.Sleep(6000);
          ProgressHub.SendMessage("Process 2 is Finished");

          ProgressHub.SendMessage("<br>Long Running Process Finished");

          System.Threading.Thread.Sleep(3000);

          return PartialView("_Result");
      }

This function has few System.Threading.Thread.Sleep statements to behave like long running processes. Before and after each Sleep statement, there is ProgressHub.SendMessage method call that will send string message to client where it is being displayed to the end user. I tried to keep this example simple, you can also implement Eventhandler and call ProgressHub.SendMessage in event method against any trigger, e.g., against variable value update.

The next step is to move to client side, edit Index.cshtml from Views/Home folder and replace the existing code with the following:

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>

@using (Ajax.BeginForm("ProcessApplication", "Home", "Post", 
	new AjaxOptions { UpdateTargetId = "divResult", OnComplete = "ReturnData" }))
{
    <script src="~/signalr/hubs"></script>
    
    <button type="submit" id="btnSubmit" 
    class="btn btn-default">Call Method</button>
    
    <div id="divResult"> </div>

   <div id="divStatus"></div>
    
    <script type="text/javascript">

        var final = "";

        $(function () {
            var progressNotifier = $.connection.progressHub;

            progressNotifier.client.sendMessage = function (message) {
                UpdateProgress(message);
            };

            $.connection.hub.start().done(function () {
            });
        });

        function UpdateProgress(message) {
            if (message != 'undefined') {
                final += message + "<br>";
                $("#divStatus").html(final);
            }
        }

        function ReturnData() {
            $('#divStatus').hide();
            $('#divResult').show();

        }

    </script>
}

The connection to hub is created as soon the page is finished loading. When server will call ProgressHub.SendMessage function, the client will receive this message and call UpdateProgress function where it is appended in DIV control for display, very simple!

History

  • Created: 4/21/2015

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yaseer Mumtaz
Software Developer (Senior)
United States United States
A Programmer mostly working in .Net technologies and Client Side frameworks. My blogs: https://fullstackhub.io

You may also be interested in...

Pro

Comments and Discussions

 
QuestionHow to clear the old messages? Pin
11-Oct-18 21:52
member11-Oct-18 21:52 
QuestionQuick Question about long running process check with signal R Pin
Himaan Singh6-Dec-16 1:15
memberHimaan Singh6-Dec-16 1:15 
QuestionLong Running Process Status Check with Signal R Pin
peteragregory20-Dec-15 4:51
memberpeteragregory20-Dec-15 4:51 
BugMissing code sample Pin
rtpHarry31-Aug-15 9:27
professionalrtpHarry31-Aug-15 9:27 
GeneralRe: Missing code sample Pin
Yaseer Mumtaz1-Sep-15 4:33
professionalYaseer Mumtaz1-Sep-15 4:33 
QuestionMy Vote of 5 Pin
aarif moh shaikh21-Apr-15 23:03
professionalaarif moh shaikh21-Apr-15 23:03 
AnswerRe: My Vote of 5 Pin
Divyam Sharma21-Apr-15 23:05
professionalDivyam Sharma21-Apr-15 23:05 

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
Web01-2016 | 2.8.180920.1 | Last Updated 21 Apr 2015
Article Copyright 2015 by Yaseer Mumtaz
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid