1

我在更新面板中有两个按钮。我需要触发更新进度并为每个按钮单击显示一个 .gif 图像。当我按下一个按钮 1 时，应该只显示相关的更新进度，另一个应该是不可见的

4

2 回答 2

2

经过长时间的搜索，反复试验，我想出了一些对我有用的东西。

您需要在更新面板中结合一些 Javascripting 和双面板。
请注意这是在 VB.NET 中完成的
请注意我的示例使用母版页
请注意按钮和面板的 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 代码将拦截更新面板的回发操作并相应地隐藏或显示相应的面板。

Cssclass=Overlay 和 CssClass=Loader 是一些 CSS 样式，用于使页面不透明并将反馈放置在中间

按下按钮 1 ...

在此处输入图像描述

按下按钮2 在此处输入图像描述

于 2011-06-07T09:53:45.237 回答
2

您可以通过设置进度控件的 AssociatedUpdatePanelID 属性将 UpdateProgress 控件与单个 UpdatePanel 控件相关联。在这种情况下，仅当回发源自关联的 UpdatePanel 控件内部时，UpdateProgress 控件才会显示消息。

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

于 2011-06-06T16:11:28.433 回答