Update progress inside update panel

旧城冷巷雨未停 提交于 2019-12-24 09:59:07

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!