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?

Answer 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);
    }

Answer 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

Answer 3

I agree with Rick S we really need to see the processing code; the code you have here would more than like process too quickly to see the other messages. This would cause the problem you are seeing where the only message displayed is the last message.