Updating label text several times during click event using ASP.Net

Question

I have a simple application that is written in C# using VS2012, in a web forms application.

There is one button that starts the processing and I would like to give the user updates to the progress of the processing by putting some text in a Label. I thought I could put the Label control in an UpdatePanel and then during the Button click event trigger the change in the Label text by calling the UpdatePanel Update() method. However, the only time the label text changes is after the click event completes and the Label text is displayed, 'Process complete'.

This is my xml:

This is the code behind:

protected void btnCreateFiles_Click(object sender, EventArgs e)
    {
        //Do some stuff

        //Show the message that the application is processing
        lblCaption.Text = "Processing...updating label data";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();      

        //Call to database to insert labels
        //Call to database to get the labels 

        lblCaption.Text = "Processing...creating label files.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   

       //Create Text files from data

        lblCaption.Text = "Processing...updating label counts.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   

        //Database call to insert count records
        //Create file of count records

        lblCaption.Text = "Processing...completed.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   
    }

The only text displayed is the last update..."Processing...completed."

Why won't the other updates trigger the label text to be changed?

Thanks

UPDATED REQUIREMENTS

I have changed my requirements a little. Instead of multiple updates. I added a label in the Progress Template to display an initial message when the processing starts and then another message using the lblCaption label when the processing completes. However, when the button is clicked a second time, both of the messages are shown: 'Please wait while the files are created...' and 'Processing...completed'.

How do I reset the text in the Progress Template to only display the 'Please wait...' message and NOT the 'Processing...complete' message also?

This is the aspx file now:

Now the Button Event handler method looks like this:

protected void btnCreateFiles_Click(object sender, EventArgs e)
        {
            //All of the processing is done here...

            //This works correctly the first time a user click the button
            //But the second time, this text remains and the 'Please wait...' text from the lblProgress label
            // is added above this text.
            ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
            ProgressUpdatePanel.Update();   
            lblCaption.Text = "Processing...completed.";

        }

UPDATE I have tried the following to clear the text in the label, lblCaption. I have stepped thru the code and this code is executed for the label text is not cleared.
I tried reseting the label in the Page_Load() method as shown below:

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            txtBoxEnvironment.Text = CurrentEnvironment;
            DAL.setConnectionString(CurrentEnvironment);
        }
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   
        lblCaption.Text = "";
    }

I have removed the ProgressUpatePanel methods and have tried just setting the label text and it is not reset.

What am I missing?

Solution 1

The Update method on the UpdatePanel does not work the way you're expecting.

From MSDN http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.update(v=vs.110).aspx: Call the Update method if you have server code that must execute to determine whether an UpdatePanel control should be updated.

If you wanted to simulate a process progressing, you could fire off multiple partial postbacks by calling hidden buttons. Each button would do another step and call the button click for the next via javascript. This could be error prone and is inefficient. But is one way to do what you're attempting. Another would be to use JQuery and (still make several calls) using $.ajax, call the next step in the success callback.

Using your code as an example, this is a basic working example of what you're wanting - the way I understand:

Markup

<asp:UpdatePanel ID="ProgressUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnCreateFiles" runat="server" Text="Go" OnClick="btnCreateFiles_Click" />
        <asp:Label ID="lblCaption" runat="server" Text="" />
    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    $(document).ready(function () {
        bindButton();
    });
    function bindButton() {
        $('#<%=btnCreateFiles.ClientID%>').on('click', function () {
            $('#<%=lblCaption.ClientID%>').html('Please Wait...');
    });
}
</script>

Code Behind

    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            //txtBoxEnvironment.Text = CurrentEnvironment;
            //DAL.setConnectionString(CurrentEnvironment);
        }
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();
        lblCaption.Text = "";

    }

    protected void btnCreateFiles_Click(object sender, EventArgs e) {
        //All of the processing is done here...

        //This works correctly the first time a user click the button
        //But the second time, this text remains and the 'Please wait...' text from the lblProgress label
        // is added above this text.
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();
        lblCaption.Text = "Processing...completed.";
        System.Threading.Thread.Sleep(1000);

        ScriptManager.RegisterClientScriptBlock(Page, typeof(string), "bindButton", "bindButton();", true);
    }

Solution 2

I don't think you're going to be able to do what you want without writing some extra code. The UpdatePanel will not provide multiple updates to UI.

This article might help you get there: http://encosia.com/easy-incremental-status-updates-for-long-requests/

This article is a bit old but still might prove useful: http://msdn.microsoft.com/en-us/magazine/cc163393.aspx

Comments

[Gloria Santin]

I added more details to the code behind code. Although it is not relevent. I made several database calls and it does take time to complete.

[Gloria Santin]

Within the MSDN link it states the following: "The content of an UpdatePanel control is updated in the following circumstances: If the UpdateMode property is set to Conditional, and one of the following conditions occurs: You call the Update method of the UpdatePanel control explicitly." I call the Update() method explicitly several times, yet it only updates the panel after the processing has completed.

[InbetweenWeekends]

Correct. And it's no doubt executing the underlying code in that method. However, you're calling Update multiple times within a single asynchronous HTTP request. When that request is complete, the response which is returned is going to contain the HTML for the last state you set the properties to. In your case, "Processing...completed."

[InbetweenWeekends]

You might be able to better see what I'm talking about by firing up Fiddler or Firebug and doing a debug-step through of your code. When you get to the last line of the click event, the value of your label will be the last one you set it to, and that's the HTML which is returned.

[Gloria Santin]

Thanks for your comments and suggestions. I have changed my requirements a little. Instead of multiple updates. I added a label in the Progress Template to display an initial message when the processing starts and then another message using the lblCaption label when the processing completes. However, when the button is clicked a second time, both of the messages are shown: 'Please wait while the files are created...' and 'Processing...completed'. How do I reset the text in the Progress Template to only display the 'Please wait...' message?

[Gloria Santin]

Thanks for your comments and suggestions. I have changed my requirements a little. Instead of multiple updates. I added a label in the Progress Template to display an initial message when the processing starts and then another message using the lblCaption label when the processing completes. However, when the button is clicked a second time, both of the messages are shown: 'Please wait while the files are created...' and 'Processing...completed'. How do I reset the text in the Progress Template to only display the 'Please wait...' message?

[InbetweenWeekends]

I would probably use javascript (JQuery) to change it initially, and let the postback change it to finish. Something like (and I didn't test this) $(document).ready(function(){ $('#<%=btnCreateFiles.ClientID%>').click(function(){ $('#<%=lblCaption.ClientID%>').html('Please Wait...'); }); }); Sorry -- I can't get it to format correctly

[Gloria Santin]

Is there any way to clear the text of the lblCaption when the button is clicked so that it is not displayed the second time the process is run?

[InbetweenWeekends]

You could set a flag which checks how many times the button was clicked and either hide or clear the text on subsequent clicks. That could be done either with javascript or in your code behind. Depending on what else you have cooking on the page would lend better to making the choice of which one to use (full page posts, other things that would update that label, etc).

[Gloria Santin]

I tried setting the text of the Label control, lblCaption in the Page_Load() method. See above under UPDATE. I have stepped thru the code and this code is executed but the label text does not change. I tried just having one line of code that resets the text and nothing works. What am I missing?

[InbetweenWeekends]

Edited my answer with a working example. .Net 4 w/ JQuery 2.1.0 Hope this helps. You should be able to modify this to suit your application.

[Gloria Santin]

I don't understand how it works...but it does. How does the calling the ScriptManager.RegisterClientScriptBlock() at the end of the button click event allow the initial text to be displayed (Please wait)?

[InbetweenWeekends]

RegisterClientScriptBlock lets you emit javascript from your code behind. Since you want some client-side script to run whenever the server-side event executes, this is the method to do that.