значок загрузки ajax с обратными передачами UpdatePanel

У меня есть форма, которая динамически создается в зависимости от выбора пользователя с использованием Ajax (построена в .NET Ajax с UpdatePanel).

как я могу вставить «стандартный» значок загрузки ajax (возможно, прикрепить его к указателю мыши), пока происходит обратная передача, а затем удалить его, когда обратная отправка будет завершена?

У меня установлен AjaxToolKit, если это поможет.


c# ajax asp.net postback updatepanel
person Kyle    schedule 11.05.2010    source источник

Ответы (4)


arrow_upward
42
arrow_downward

используйте updateprogress набора инструментов: надеюсь, это поможет вам

<asp:updatepanel id="ResultsUpdatePanel" runat="server">    
<contenttemplate>

<div style="text-align:center;">
    <asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
                        <progresstemplate>

                           <img src="support/images/loading.gif">

                        </progresstemplate>
                    </asp:updateprogress>

                    </div>

 //your control code
</contenttemplate>
</asp:updatepanel>
person Pranay Rana    schedule 11.05.2010

arrow_upward
10
arrow_downward

Используйте следующий код...

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title></title>
 </head>
 <body>
    <form id="form1" runat="server">
     <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
          </asp:ScriptManager>
    <asp:UpdateProgress ID="updProgress"
    AssociatedUpdatePanelID="UpdatePanel1"
    runat="server">
        <ProgressTemplate>            
        <img alt="progress" src="images/progress.gif"/>
           Processing...            
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
            <br />
            <asp:Button ID="btnInvoke" runat="server" Text="Click" 
                onclick="btnInvoke_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>         
      </div>
   </form>
  </body>
</html>


protected void btnInvoke_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    lblText.Text = "Processing completed";
}
person ankit rajput    schedule 01.03.2012

arrow_upward
4
arrow_downward

здесь я нашел немного JavaScript, чтобы сделать процесс обновления самостоятельно, а также вы можете поместить его в любое место на странице, и он будет работать с любой панелью обновления на странице.

<script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);

             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
                 panelProg.style.display = '';
                 // reset label text
                 var lbl = $get('<%= this.lblText.ClientID %>');
                 lbl.innerHTML = '';

                 // Disable button that caused a postback
                 $get(args._postBackElement.id).disabled = true;
             }

             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                     $('divImage').hide();                
                  // Enable button that caused a postback
                 $get(sender._postBackSettings.sourceElement.id).disabled = false;
             }
         </script>
person Anant Dabhi    schedule 01.09.2012
comment
После некоторого ограниченного тестирования я обнаружил небольшую задержку в динамическом добавлении элементов DOM при использовании элемента управления <asp:updateprogress> фреймворка. Напротив, этот метод подключения соответствующих событий JS давал мгновенную обратную связь с пользовательским интерфейсом. - person Red Taz; 05.10.2012
comment
да, это быстрее, но немного, но если у вас тяжелая страница с большим количеством доменов, вы можете различать скорости обоих - person Anant Dabhi; 05.10.2012
comment
Это хорошо сработало для моей ситуации, так как у меня есть от 3 до 7 панелей обновлений в одной области, и если какое-либо обновление я хотел выполнить какую-то работу, это позволило мне слушать их все, а также показывать, скрывать и манипулировать домом по мере необходимости, спасибо! - person Jon R.; 16.03.2016

arrow_upward
1
arrow_downward 

<asp:UpdateProgress ID="updateProgress" runat="server">
            <ProgressTemplate>
                <div class="loading-panel">
                    <div class="loading-container">
                        <img src="<%= this.ResolveUrl("~/images/gears.gif")%>" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <style>
            .loading-panel {
                background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
                position: relative;
                width: 100%;
            }

            .loading-container {
                background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
                color: #fff;
                font-size: 90px;
                height: 100%;
                left: 0;
                padding-top: 15%;
                position: fixed;
                text-align: center;
                top: 0;
                width: 100%;
                z-index: 999999;
            }
        </style>

Загрузка изображений с:http://loading.io/

person OldTrain    schedule 22.09.2015