In today's article, we will see how to implement multithreading with real-time updates shown in ASP.NET Core 2.0 web application.
Why do we need this?
In real-world applications, once in a while, we are faced with the issue of having to process too much data. Real life examples are
- Processing hundreds of records at once, the user has a checkbox and can check as many he/she wants.
- There might be a procedure that takes a few minutes to execute for a single record and you have to process multiple records at once.
In all of these situations, you have to think about the processing time and database timeout. So, for these issues, we can use multithreading. We can execute our time-consuming methods in a separate thread so that the processing of the main thread is not blocked and all the records are processed.
Let’s get started.
Here is the DB structure and Stored Procedures (Microsoft SQL Server).
Table structure of MultiProcessStatus
![ASP.NET Core]()
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
Now, we will create our ASP.NET Core 2.0 Web Application. We will select ASP.NET Core Web Application which will be under .NET Core.
![ASP.NET Core]()
Then, we will select the Web Application(Model-View-Controller) as our template.
![ASP.NET Core]()
Once our project is created, we will create a new controller (UserController in this case) and work on that.
Now, first of all, we will make some HTML, CSS, and jQuery changes to show our progress bar which will show the status of multithreading process.
Add this piece of HTML in _layout.cshtml just below where <nav> tag ends.
<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>
Once you have done that, place this HTML just below the <div class=”container”> ends.
<div id="snackbar"></div>
When you are done with that, place this piece of the script just above @RenderSection(“Scripts”,required:false).
<script>
var multiProcessStatusGetUrl = "@Url.Action("GetMultiProcessStatus","User")";
var userId = "Ravi";
var moduleName = "User";
</script>
This script section just defines a URL and two variables that we will use in the AJAX call to get the status of multithreading process. (Will be explained later)
Now we have to define some CSS but I will not post the CSS here because it's not so much relevant. However, I will leave a link for the entire code for you guys to download.
Now, we will create a view in our user controller and will add a button. On the click event of this button, we will start our heavy processes.
For database operations, I have used the factory pattern with lazy loading, I will not get into the details of the architecture, I have already written an article explaining this architecture. Click here to read that article.
Now, we will add a Test method in our UserController which will be called to perform heavy operations.
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);
}
In the above method, I have created a new thread with Task.Factory.StartNew.
Inside the body of new thread I have declared a client, and then inserted a multiprocess request in our database with parameters as connectionString, username i.e Ravi (hardcoded for testing purpose, you will pass it as the user id of the logged in user).
Next is moduleName i.e User (again hardcoded for testing purpose, you will pass the module on which user is going to perform the action such as User, Employee, Leave etc.).
Next is total records (these will be the total number of records that you need to processed, generally a list will be posted so this will be the list.Count)
Now. I have written a simple for loop to iterate up to my total records (in real case scenario you will be iterating through each item of the list posted by the user). Then, I have written Thread.Sleep(500).
This is just to replicate a database operation where you will take values from an item of the list and post them to your database. Now once the operation is completed, then you will get the result whether its failure or success.
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.
![ASP.NET Core]()
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.
![ASP.NET Core]()
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!