Update progress inside update panel

Question

i have two buttons inside a update panel.i need to trigger update progress and show a .gif image for each button click.when i press a button1 only the associated update progress should be displayed and the other one should be invisible

Answer 1

After a long search, trial and error, i've come up with something that worked for me.

You'll need to combine some Javascripting and dual panels in your update panel.
Please note this is done in VB.NET
Please note that my example is using masterpages
Please note that the ID's of the buttons and panels are hardcoded (not ideal)

This is the codebehind..

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        registerscript()
    Else
        System.Threading.Thread.Sleep(5000)
    End If

End Sub
Private Sub registerscript()

    Dim clientscriptname As String = "popup"
    Dim clientscripttype As Type = Me.GetType()
    Dim cs As ClientScriptManager = Page.ClientScript
    'checck if clienscript is already registered, if not register it
    If Not (cs.IsClientScriptBlockRegistered(clientscripttype, clientscriptname)) Then

        Dim myscript As New StringBuilder
        myscript.AppendLine("<script language=" & Chr(34) & "javascript" & Chr(34) & " type=" & Chr(34) & "text/javascript" & Chr(34) & ">")
        myscript.AppendLine("        var prm = Sys.WebForms.PageRequestManager.getInstance();")
        myscript.AppendLine("        prm.add_initializeRequest(InitializeRequest);")
        myscript.AppendLine("prm.add_endRequest(EndRequest);")
        myscript.AppendLine("var postBackElement;")
        myscript.AppendLine("function InitializeRequest(sender, args) {")
        myscript.AppendLine("postBackElement = args.get_postBackElement();")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel2').style.display = 'none'; ")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel4').style.display = 'none'; ")
        myscript.AppendLine("if (postBackElement.id == 'ctl00_ctl00_Centerofpage1_Main_Btn1') {")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel2').style.display = 'block'; ")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel4').style.display = 'none'; ")
        myscript.AppendLine("                                                                  }")
        myscript.AppendLine("else                                                               ")
        myscript.AppendLine("                                                                  {")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel2').style.display = 'none'; ")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel4').style.display = 'block'; ")
        myscript.AppendLine("                                                                  }")
        myscript.AppendLine("}")
        myscript.AppendLine("function EndRequest(sender, args) {")
        myscript.AppendLine("if (postBackElement.id == 'ctl00_ctl00_Centerofpage1_Main_Btn1') {")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel2').style.display = 'none'; ")
        myscript.AppendLine("           $get('ctl00_ctl00_Centerofpage1_Main_Panel4').style.display = 'none'; ")
        myscript.AppendLine("}")
        myscript.AppendLine("}")
        myscript.AppendLine("        </script>")
        cs.RegisterStartupScript(clientscripttype, clientscriptname, myscript.ToString, False)

    End If
End Sub

This is the main aspx page .

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Title" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Main" Runat="Server">
<cc1:toolkitscriptmanager id="ScriptManager1" runat="server">
</cc1:toolkitscriptmanager>


<asp:UpdatePanel ID="UPL1" runat="server" UpdateMode="Conditional"   >
<ContentTemplate >
<asp:Button ID="Btn1" runat="server" Text="Test1"   />
<asp:Button ID="Btn2" runat="server" Text="Test2"  />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPG1" runat="server" AssociatedUpdatePanelID="UPL1"  Visible="true"  >
<ProgressTemplate >
 <asp:Panel ID="Panel1" CssClass="overlay" runat="server">
            <asp:Panel ID="Panel2" CssClass="loader" runat="server" >
            .BTN1 : form posting in progress.
                    <br />
                    <asp:Image ID="LoadImage" runat="server" ImageUrl="../Masterpages/images/updateprogress/ajax-loader.gif" />
            </asp:Panel>
                        <asp:Panel ID="Panel4" CssClass="loader" runat="server"  >
            .BTN2 : form posting in progress.
               <br />
                    <asp:Image ID="LoadImage2" runat="server" ImageUrl="../Masterpages/images/updateprogress/ajax-loader.gif" />
            </asp:Panel>
        </asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>

The javascript code will intercept the postback operation for the updatepanel and hide or show the respective panels accordingly.

Cssclass=Overlay and CssClass=Loader are some CSS styles to make the page opaque and postion the feedback in the middle

Pressing button1 ...

Pressing button2

Answer 2

You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

Reference: http://msdn.microsoft.com/en-us/library/bb386421.aspx