我有一个更新panel.i内的两个按钮需要触发更新进度，并显示.gif图像为每个按钮click.when我preSS一个按钮1应该只显示相关的更新进度，应该在另一个是不可见的。

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

推荐答案

一个漫长的探索，反复试验后，我想出的东西，为我工作。

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

您将需要一些JavaScript编程和双面板结合起来，你的更新面板。 请注意，这是在VB.NET 完成 请注意，我的例子是使用masterpages 请注意，ID的按键和面板都很难codeD（不理想）

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)

这是在codebehind ..

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

这是主要的aspx页面。

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>

JavaScript的code将截获的UpdatePanel的回传操作，隐藏或显示相应的各自的面板。

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

的CssClass =叠加和的CssClass =装载机是一些CSS样式，使页面不透明，现在的位置在中间反馈

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

pressing按钮1 ...

Pressing button1 ...

pressing按钮2

Pressing button2