ASP.NET: How to update client-side from server side? - asp.net

Question

I want to update a label on client side from server side while the function is still under execution at server side. How can I achieve this?
Here's the code snippet:
protected void Button1_Click(object sender, EventArgs e)
{
string Result = "Success";
if (Result == "Success")
{
Label1.Text = "Plan mst Completed";
Thread.Sleep(2000); //Some functionality here
Label1.Text = "Packing date mst Started";
}
if (Result == "Success")
{
Label1.Text = "Packing date mst Completed";
Thread.Sleep(2000); //Some functionality here
Label1.Text = "Etd mst Started";
}
if (Result == "Success")
{
Label1.Text = "Etd mst Completed";
Thread.Sleep(2000); //Some functionality here
Label1.Text = "Inner box mst Started";
}
}
I want all changes in label1.text to be reflected on client side, while function is still under execution.
Please help!!!

Answer 1

Direct communication with the Front End from inside that method is going to be hard. Here's how I'd do it.
1) Split "Plan mst", "Packing date mst", "Etd mst", and "Inner box mst" into 4 separate functions.
2) Have the button click event on the page fire a JavaScript function to hit each of the 4 methods, one after the other, via AJAX. Make up a new ASPX page for each function ("InnerBox.aspx", etc). If you have jquery, it would look something like this:
$("#SubmitButton").click(function () {
DoPlanMst();
});
function DoPlanMst(argumentObj) {
SetLabel("Plan MST Started");
$.ajax({
url: "PlanMst.aspx",
type: "POST",
data: argumentObj, // your post params
success: function () {
SetLabel("Plan MST Completed");
DoPackingDateMst();
}
});
}
function DoPackingDateMst(argumentObj) {
SetLabel("Packing Date MST Started");
$.ajax({
url: "PackingDate.aspx",
type: "POST",
data: argumentObj, // your post params
success: function () {
SetLabel("Packing Date MST Completed");
DoEtdMst();
}
});
}
function DoEtdMst(argumentObj) {
SetLabel("ETD MST Started");
$.ajax({
url: "EtdMst.aspx",
type: "POST",
data: argumentObj, // your post params
success: function () {
SetLabel("ETD MST Completed");
DoInnerBoxMst();
}
});
}
function DoInnerBoxMst(argumentObj) {
SetLabel("Inner Box MST Started");
$.ajax({
url: "InnerBoxMst.aspx",
type: "POST",
data: argumentObj, // your post params
success: function () {
SetLabel("Inner Box MST Completed");
}
});
}
function SetLabel(message) {
$("#Label1").val(message);
}
If you don't want 4 sep ASPX pages, that's fine. You can roll them into a single file called "ProcessMSTs.aspx" that looks for a query string param to determine the method in its code behind to call, while still passing in POST params.
EDIT: fixed a typo in the function names in the success function of the AJAX calls.

Answer 2

how are you calling this function from the browser.Is it an asynchronous call then you can manage that in client side it self. if it is an synchronous one then it will not be possible as your response to you request is still pending.
use this
Jquery Ajax post animation during ajax process?