Обновление прогресса внутри панели обновления - PullRequest
Новая
       44

Обновление прогресса внутри панели обновления

1 голос
/ 06 июня 2011

У меня есть две кнопки внутри панели обновления. Мне нужно запускать процесс обновления и показывать .gif изображение для каждого нажатия кнопки. Когда я нажимаю кнопку1, должен отображаться только связанный прогресс обновления, а другая должна быть невидимой

Ответы [ 2 ]

2 голосов
/ 07 июня 2011

После долгих поисков, проб и ошибок я придумал что-то, что сработало для меня.

Вам понадобится объединить несколько Javascripting и двойных панелей в панели обновлений.
Обратите внимание, это сделано в VB.NET
Обратите внимание, что мой пример использует мастер-страницы
Обратите внимание, что идентификаторы кнопок и панелей жестко закодированы (не идеально).

Это код позади .. 

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 ...

enter image description here

Нажатие кнопки2 enter image description here

2 голосов
/ 06 июня 2011

Вы можете связать элемент управления UpdateProgress с одним элементом управления UpdatePanel, установив свойство AssociatedUpdatePanelID элемента управления прогрессом.В этом случае элемент управления UpdateProgress отображает сообщение только в том случае, если внутри связанного элемента управления UpdatePanel возникает обратная передача.

Ссылка: http://msdn.microsoft.com/en-us/library/bb386421.aspx

...