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

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. How can I achieve this?

You could use different methods for every action. Then you could update the first label and execute a javascript function to post back to the server immediately. Therefore you could `click()` a hidden button and handle it's click-event on serverside to execute the next action and so on. — Tim Schmelter, Oct 04 '12 at 11:49
@Tim: Well, I can't afford a Page_reload in my case, so hidden button is out of question. Is AJAX helpful in this situation? — Viral Jain, Oct 04 '12 at 11:52
The simplest way would probably be to poll the server using an ajax request. In that case you would have to persist the state of the server side operation somewhere that a service/PageMethod can access it. — PHeiberg, Oct 04 '12 at 11:55

Graham · Answer 1 · 2012-10-08T12:59:20.170

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.

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

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?

edited May 23 '17 at 12:12

Community

1
1

answered Oct 04 '12 at 11:46

ankur

4,565
14
64
100

Here's the detailed question bro: http://stackoverflow.com/questions/12720666/asp-net-ajax-updatepanel-issue – Viral Jain Oct 04 '12 at 11:48
What I understand after going through your question. Some how you have to show the progress of your execution till the time it gets completed. for that you can use an http://api.jquery.com/jQuery.ajax/ call and before it hits your server side update your label or even cover the page with an overlay with an spining icon and once your request goes in success handler hide the overlay or again update your label. – ankur Oct 04 '12 at 11:55
use this for your reference http://stackoverflow.com/questions/9691648/delaying-the-loading-spinner-while-doing-ajax-requests-in-jquery http://stackoverflow.com/questions/12108937/jquery-ajax-post-animation-during-ajax-process – ankur Oct 04 '12 at 11:58

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

2 Answers2