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

I just want to create a progress bar while long running server calls. I could not create a ajax post request to the controller while the controller is doing a long running job.

I want to create an additional action to get the actual statement of current long running task.
I tried to create poll in ajax request then i can able to return the status from the server side and display it in a client side progress bar. Any ideas ?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The right and easiest way to do this is with SignalR. Please download Microsoft SignalR in https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.2

Create a hub class in separate folder in project path called hubs, add two class files into the 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 string msg = "Initializing and Preparing...";
        public int count = 1;

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

        public void GetCountAndMessage()
        {
            Clients.Caller.sendMessage(string.Format(msg), count);
        }
    }
}

In controller,

// assemblies
using Microsoft.AspNet.SignalR;
using RealTimeProgressBar;   


//call this method inside your working action
ProgressHub.SendMessage("initializing and preparing",  2);

In 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.--> 
<script type="text/javascript">
  $(document).ready(function () {

    $("#progressBar").kendoProgressBar({
        min: 0,
        max: 100,
        type: "percent",
    });
});

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

// Update the progress bar 
function UpdateProgress(message, count) {
    var result = $("#result");
    result.html(message);
    $("#progressBar").data("kendoProgressBar").value(count);
}
</script>

For more details refer some existing articles with the help of google

Method 2

I had a long running service for that, I have given a basic idea below. Use it as per your requirements.

  1. I made a structure of the progress arguments ProgressArgs
  2. In the long running service LongRunningProcess(), updated the progress values at regular interval and saved in JSON format in the database
  3. Created a Action method getProgress() which will return a JSON string progress by ajax.
  4. Created a function Javascript getProgress() function which once started will call the server at regular intervals for progress till the process is completed.

I have given a rough example to implement it. Hope it may help you.

The class for progress arguments structure

public class ProgressArgs
{
    public int Completed { get; set; }
    public int Total { get; set; }
    public int Percentage { get; set; }
    public string Status { get; set; }
}

In the Process I kept on updating the stats in the database

    public void LongRunningProcess()
    {

        ProgressArgs result = new ProgressArgs();
        result.Completed = 0;
        result.Total = userList.Count;
        foreach (var item in itemList)
        {
           //Do Some processing which u want to do

            result.Total++;
            result.Percentage = (result.Completed * 100) / result.Total;
            result.Status = "Processing";
            string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
            //update the strToSave to the database somewhere.
        }

        //after completing of processing
        result.Total++;
        result.Percentage = (result.Completed * 100) / result.Total;
        result.Status = "Completed";
        string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
        //update the strToSave to the database somewhere.

    }

The C# Action to get the progress by ajax

    public string getProgress()
    {    
        string strJSON = config.GetValue("progress");  //Get stats from the database which is saved in json
        return strJSON;
    }

The Javascript Code

//Ajax Get Progress function
    function getProgress() {
        var dataToSend = '';
        $.ajax({
            url: '@Url.Action("getProgress")', //Link to the action method
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: dataToSend,
            success: function (response) {
                console.log(response);
                if (response != null) {
                    data = JSON.parse(response);
                    console.log(data);
                    //update the progressbar
                    progressbar.progressbar("value", data.Percentage);
                    //When the jobalert status is completed clear the interval
                    if (data.Status == 0) {
                        setTimeout(getProgress, 800); //TImout function to call the respective function at that time
                    }
                    serviceCompleted(data); function to call after completing service
                }
            },
            error: function (xhr) {
                alert('Error: There was some error while posting question. Please try again later.');
            }
        });
    }


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x