Multithreading Process With Real-Time Updates In ASP.NET Core Web Application

GetMultiprocessStatus Stored procedure    
SET ANSI_NULLS ON    
GO    
SET QUOTED_IDENTIFIER ON    
GO    
-- =============================================    
-- Author:      <Author,,Name>    
-- Create date: <Create Date,,>    
-- Description: <Description,,>    
-- =============================================    
ALTER PROCEDURE [dbo].[GetMultiprocessStatus]    
(    
@UserId NVARCHAR(200),    
@Module NVARCHAR(200)    
)    
AS    
BEGIN    
    SELECT TOP 1 * FROM MultiProcessStatus WHERE UserId = @UserId AND Module = @Module ORDER BY Id DESC    
END    
    
    
InsertMultiprocessStatus Stored procedure    
SET ANSI_NULLS ON    
GO    
SET QUOTED_IDENTIFIER ON    
GO    
-- =============================================    
-- Author:      <Author,,Name>    
-- Create date: <Create Date,,>    
-- Description: <Description,,>    
-- =============================================    
ALTER PROCEDURE [dbo].[InsertMultiprocessStatus]    
(    
@UserId NVARCHAR(200),    
@Module  NVARCHAR(200),    
@TotalRecords INT,    
@ReturnId INT OUTPUT    
)    
AS    
BEGIN    
    SET @ReturnId = 0    
    INSERT INTO MultiProcessStatus (UserId,Module,TotalRecords,FailedRecords,SuccessRecords,Percentage,IsCompleted,CreatedDate)    
    VALUES (@UserId,@Module,@TotalRecords,0,0,0,0,GETDATE())    
    
    SET @ReturnId = @@IDENTITY    
END    
    
UpdateMultiprocessStatus Stored procedure    
SET ANSI_NULLS ON    
GO    
SET QUOTED_IDENTIFIER ON    
GO    
-- =============================================    
-- Author:      <Author,,Name>    
-- Create date: <Create Date,,>    
-- Description: <Description,,>    
-- =============================================    
ALTER PROCEDURE [dbo].[UpdateMultiprocessStatus]     
(    
@Id INT,    
@Percentage DECIMAL(18,2),    
@IsCompleted BIT,    
@FailedRecords INT,    
@SuccessRecords INT    
)    
AS    
BEGIN    
    IF(@Percentage > 99)    
    BEGIN    
        SET @IsCompleted = 1    
    END    
    UPDATE MultiProcessStatus SET Percentage = @Percentage,IsCompleted = @IsCompleted,    
    FailedRecords = @FailedRecords,SuccessRecords = @SuccessRecords     
    WHERE Id = @Id     
END

<div class="row">  
  <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">  
        <div id="myProgress" class="progress nodisplay">  
            <div id="myProgressBar" class="progress-bar-striped progress-bar-animated"></div>  
            <div id="emptyProgress">  
                <div class="fast-loader"></div>  
            </div>  
        </div>  
    </div>  
</div>

<div id="snackbar"></div>

<script>  
    var multiProcessStatusGetUrl = "@Url.Action("GetMultiProcessStatus","User")";  
    var userId = "Ravi";  
    var moduleName = "User";  
</script> 

public JsonResult Test()  
{  
    var isDone = true;  
    var msg = "Process submitted";  
    Task.Factory.StartNew(() =>  
    {  
        var conStr = appSettings.Value.DbConn;  
        var client = DbClientFactory<MultiprocessDbClient>.Instance;  
        var totalRecords = 50;  
        var id = client.InsertMultiprocessStatus(conStr, "Ravi", "User", totalRecords);  
        int success = 0, fail = 0;  
        var isComplete = false;  
        for (int i = 0; i < totalRecords; i++)  
        {  
            isComplete = false;  
            Thread.Sleep(500);  
            decimal percentage = Convert.ToDecimal((Convert.ToDecimal(i + 1) / Convert.ToDecimal(totalRecords))) * Convert.ToDecimal(100);  
            success++;  
            if ((success + fail) == totalRecords)  
                isComplete = true;  
            client.UpdateMultiprocessStatus(conStr, id, percentage, isComplete, fail, success);  
        }  
    });  
    var obj = new { isSuccess = isDone, returnMessage = msg };  
    return Json(obj);  
}

Then, based on that output, increase the number of your fail/success variable and then calculated percentage. After that, we will update the multiprocess status with the id that we got from the inserted method, percentage, isComplete which is computed by checking whether success plus fail equals total or not.

And after the thread, I have returned a JSON object with simply a message as the process has been submitted because this JSON will be returned and our new thread will be executing in parallel.

We will create a MultiprocessModel.

[DataContract]  
public class MultiprocessModel  
{  
    [DataMember(Name = "Id")]  
    public int Id { get; set; }  

    [DataMember(Name = "UserId")]  
    public string UserId { get; set; }  

    [DataMember(Name = "Module")]  
    public string Module { get; set; }  

    [DataMember(Name = "TotalRecords")]  
    public int TotalRecords { get; set; }  

    [DataMember(Name = "FailedRecords")]  
    public int FailedRecords { get; set; }  

    [DataMember(Name = "SuccessRecords")]  
    public int SuccessRecords { get; set; }  

    [DataMember(Name = "Percentage")]  
    public decimal Percentage { get; set; }  

    [DataMember(Name = "IsCompleted")]  
    public bool IsCompleted { get; set; }  
}

Now, let's see my ProcessingDbClient class.

public class MultiprocessDbClient  
{  
    public int InsertMultiprocessStatus(string connString, string userId, string module, int totalRecords)  
    {  
        var outParam = new SqlParameter("@ReturnId", SqlDbType.Int)  
        {  
            Direction = ParameterDirection.Output  
        };  
        SqlParameter[] param = {  
            new SqlParameter("@UserId",userId),  
            new SqlParameter("@Module",module),  
            new SqlParameter("@TotalRecords",totalRecords),  
            outParam  
        };  
        SqlHelper.ExecuteProcedureReturnString(connString, "InsertMultiprocessStatus", param);  

        return (int)outParam.Value;  
    }  

    public void UpdateMultiprocessStatus(string connString, int id, decimal percentage, bool isCompleted,  
        int failRecords, int successRecords)  
    {  
        SqlParameter[] param = {  
            new SqlParameter("@Id",id),  
            new SqlParameter("@Percentage",percentage),  
            new SqlParameter("@IsCompleted",isCompleted),  
            new SqlParameter("@FailedRecords",failRecords),  
            new SqlParameter("@SuccessRecords",successRecords),  
        };  
        SqlHelper.ExecuteProcedureReturnString(connString, "UpdateMultiprocessStatus", param);  
    }  

    public MultiprocessModel GetMultiprocessStatus(string connString ,string userId,string moduleName)  
    {  
        SqlParameter[] param = {  
            new SqlParameter("@UserId",userId),  
            new SqlParameter("@Module",moduleName)  
        };  
        return SqlHelper.ExtecuteProcedureReturnData<MultiprocessModel>(connString,  
           "GetMultiprocessStatus", r => r.TranslateAsMultiprocess(), param);  
    }  
}

Last method in this client will return the process status model on the basis of username and module name

Now we will add a method in our controller to call this last method for status of our multiprocessing operation,

[HttpPost]  
public JsonResult GetMultiProcessStatus([FromBody]MultiprocessModel model)  
{  
    var data = DbClientFactory<MultiprocessDbClient>.Instance.GetMultiprocessStatus(  
        appSettings.Value.DbConn, model.UserId, model.Module);  
    var response = new Message<MultiprocessModel>();  
    response.IsSuccess = true;  
    response.Data = data;  
    return Json(response);  
} 

This is the method that we declared in _layout.cshtml as URL. Now, we will make a JavaScript file and add it in our Index view of UserController, so our Index will look something like this.

I have added a folder inside js folder with name User just to manage my code a bit better. Now, we will add some generic methods to our site.js such as to show the progress bar, to make the AJAX calls etc.

function showSnackbar(msg) {  
    if (msg != '' && msg != null && msg != undefined) {  
        $('#snackbar').html(msg);  
        $('#snackbar').addClass('show');  
  
        setTimeout(function () {  
            $('#snackbar').removeClass('show');  
        }, 3000);  
    }  
}

The above method is just to show a snackbar/notification.

//Global method to perform ajax calls  
function makeAjaxCall(url, data, loaderId, type) {  
    return $.ajax({  
        url: url,  
        type: type ? type : "GET",  
        data: data,  
        contentType: "application/json",  
        beforeSend: function () { showLoader(loaderId); },  
        complete: function () { hideLoader(loaderId); }  
    });  
}  
  
function showLoader(id) {  
    if (!id)  
        $("#fullLoader").addClass("loader");  
}  
  
function hideLoader(id) {  
    if (!id)  
        $('#fullLoader').removeClass('loader');  
}

The first method is for making AJAX calls with showLoader and hideLoader functions. These two functions are just to show a full page loader.

function showMultiThreadingProgressBar() {  
    $("#myProgress").removeClass("nodisplay");  
    $("#myProgress #myProgressBar").width("1%");  
    $("#myProgress #emptyProgress").width("99%");  
}

The above method is to show our multithreading progress bar.

function updateProgress(percentageBar) {  
    $("#myProgress").removeClass("nodisplay");  
    //Show progress  
  
    $("#myProgress #myProgressBar").width((percentageBar) + "%");  
    $("#myProgress #emptyProgress").width((100 - percentageBar) + "%");  
    isOperationInprogress = true;  
  
    if (percentageBar == 100) {  
        //Process complete message  
        isOperationInprogress = false;  
        setTimeout(function () {  
            $("#myProgress").addClass("nodisplay");  
        }, 800);  
    }  
}

The above method is to update progress bar according to the percentage completed.

function getMultiProcessStatus(isOnLoad) {  
    var obj = { UserId: userId, Module: moduleName }  
    makeAjaxCall(multiProcessStatusGetUrl, JSON.stringify(obj), "nsnn", 'POST')  
        .done(function (response) {  
            if (!response.IsSuccess) {  
                if (isOnLoad != true) {  
                    setTimeout(function () { getMultiProcessStatus(); }, 1000);  
                }  
                return;  
            }  
            if (response.Data != null) {  
                if (!response.Data.IsCompleted) {  
                    setTimeout(function () { getMultiProcessStatus(); }, 1000);  
                }  
                else {  
                    if (isOperationInprogress) {  
                        var msg = "Total Records : ";  
                        msg += response.Data.TotalRecords;  
                        msg += ",<br>";  
                        msg += "Total Success : ";  
                        msg += response.Data.SuccessRecords;  
                        msg += ",<br>";  
                        msg += "Total fail : ";  
                        msg += response.Data.FailedRecords;  
                        showSnackbar(msg);  
                    }  
                }  
                isOperationInprogress = false;  
                if (response.Data.IsCompleted && isOnLoad == true) {  
  
                }  
                else  
                    updateProgress(parseInt(response.Data.Percentage));  
            }  
        });  
}

The above method is to get the status of progress of our task. This will be called on the page load of our page’s JavaScript file. In the above method, you can see that while creating the object, we have used the same variables which we declared in _layout.cshtml, so in our real world application, we will set those variables according to the logged in user and the module of the current user.

function blockCurrentProcessing() {  
    isOperationInprogress = true;  
    showMultiThreadingProgressBar();  
    getMultiProcessStatus();  
}

The above method is to block any other heavy operation. Here isOperationInProgress is a global variable in site.js. So now, in our index JavaScript file, we will add the following code.

getMultiProcessStatus(true); 

We will write the above line on page load.

$('#btnStart').click(function () {  
    if (isOperationInprogress) {  
        alert('process already going on');  
        return;  
    }  
    makeAjaxCall(url).  
        done(function (response) {  
            if (response.isSuccess) {  
                showSnackbar(response.returnMessage);  
                blockCurrentProcessing();  
            }  
        }).  
        fail(function (error) { });  
});

Then, we will write the button click of start button. So, our code is complete. Now, we will run it.

As you can see, we have a working multithreading application with updates shown in real-time. If you wish to see/download the code, please click here!

Summary

In today’s article, we have seen how to implement multithreading in ASP.NET Core 2.0 MVC application and show its updates in real-time in our web application.

Hope you all liked it.

Happy Coding!