Question:

How to update a label multiple times asynchronously after button click?

Solution:

If you are aiming for 1000+ processing events, then using SignalR will be the better option. Refer to this> link and learn about SignalR.

The following is the code that you can refer to:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Button ID="cmdProcess" runat="server" Text="to hide button" ClientIDMode="Static"

OnClick="cmdProcess_Click" style="display:none" />

<asp:Button ID="Button1" runat="server" Text="Start the Reactor"

ClientIDMode="Static" CssClass="btn"

OnClientClick="startprocessor('Processing',1,18);return false"

<br />

<asp:HiddenField ID="pStep" runat="server" ClientIDMode="Static" />

<asp:HiddenField ID="pSteps" runat="server" ClientIDMode="Static" />

<style>

.ui-progressbar-value {background: lightskyblue;}

</style>

<div id="pbar"

style="width:400px">

</div>

<asp:Label ID="lblmsg" runat="server" Text="" ClientIDMode="Static"></asp:Label>

<br />

</div>

</ContentTemplate>

</asp:UpdatePanel>

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(EndRequestH);

function EndRequestH(sender, args) {

// code here

lbl = $('#lblmsg')

if (lbl.text() !== "") {

// more processing required

$('#MessageArea').show()

iStep = $('#pStep').val()

iSteps = $('#pSteps').val()

lbl.text("(" + iStep + "/" + iSteps + ") " + lbl.text())

$('#pbar').progressbar({ value: iStep / iSteps * 100 });

$('#cmdProcess').click()

}

function startprocessor(sMsg, iStep, iSteps) {

var mymsg = "(1/" + iSteps + ") " + sMsg

$('#lblmsg').text(sMsg)

$('#pStep').val(iStep)

$('#pSteps').val(iSteps)

EndRequestH()

}

</script>

Setup processing step in the updated panel and click a button. This will enable you to run the code. After this, check for the client-side code then click on the button again.

protected void Page_Load(object sender, EventArgs e)

{

}

protected void cmdProcess_Click(object sender, EventArgs e)

{

int Step = Convert.ToInt32(pStep.Value);

int Steps = Convert.ToInt32(pSteps.Value);

switch (Step)

{

case 1:

// code here for step one

Thread.Sleep(2000);

// if more steps, then setup next message

pStep.Value = "2";

lblmsg.Text = "Sending emails...";

return;

case 2:

// code here for step 2

Thread.Sleep(3000);

pStep.Value = "3";

lblmsg.Text = "Building Projects for customers...";

return;

case 3:

// code here for step 3 - Building project for custoemrs

Thread.Sleep(2000);

pStep.Value = "4";

lblmsg.Text = "Taking pet dog for a walk..";

return;

case int n when (n > 3) && (n < Steps):

Thread.Sleep(1000);

pStep.Value = (Step + 1).ToString();

lblmsg.Text = "Working, please wait";

return;

case int n when (n == Steps):

// process code here for last step

Thread.Sleep(1000);

// we done last step, so stop

// last step - clear out lbl msg to STOP processing

lblmsg.Text = ""; // blank message - stop processor

return;

}

Output:

Thus, the aforementioned method works for roughly 20 to 75 process steps. If additional steps are needed, you should use a different technology, like SignalR.

>>Testing react components using Hooks and Mocks

>>Use Firebase Realtime Database with ASP.NET MVC App

>>How to assign multiple const variables in a single declaration in TypeScript?

>>How to handle more than 100 cases neatly on Typescript?

>>Type inference with 'as const' IN TypeScript

>>Use of Singletons in .NET Core in AWS Lambda