问题
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
回答1:
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
回答2:
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
来源:https://stackoverflow.com/questions/6254774/update-progress-inside-update-panel