更新面板更新進度

Question

我在更新面板中有兩個按鈕，我需要觸發更新進度併爲每個按鈕單擊顯示一個.gif圖像。當我按下按鈕1時，只應顯示關聯的更新進度，另一個一個應該是不可見的

Answer 1

通過設置進度控件的AssociatedUpdatePanelID屬性，可以將UpdateProgress控件與單個UpdatePanel控件相關聯。在這種情況下，UpdateProgress控件僅在回發源自關聯的UpdatePanel控件內時才顯示消息。

參考：http://msdn.microsoft.com/en-us/library/bb386421.aspx

Answer 2

經過長時間的搜尋，試錯後，我想出了一種適合我的工作。

您需要在更新面板中結合一些Javascripting和雙面板。
請注意，這是在VB.NET
完成請注意，我的例子是使用masterpages
請注意，按鈕和麪板的ID是硬編碼（不理想）

這是代碼隱藏...

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頁面。

<%@ 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代碼將攔截updatepanel的回發操作並相應地隱藏或顯示相應的面板。

的CssClass =疊加，的CssClass =裝載機一些CSS樣式，使頁面不透明，現在的位置在中間

按下按鈕1反饋...

按下按鈕2