logo标签列表

使用UpdatePanel后台提交时的Ajax“加载”图标

c#asp.netajaxupdatepanelpostback
15

我有一个表单，根据用户选择动态构建，使用Ajax（内置于.NET Ajax与UpdatePanel中）。

在进行后台请求时，如何插入一个“标准”的ajax加载图标（可能附加到鼠标指针），然后在请求完成后将其移除？

如果需要，我已安装AjaxToolKit。

4个回答
42

使用工具包的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>
10

使用以下代码...

 <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";
}
4
我在这篇文章《ASP.NET AJAX应用中3种不同的显示进度方式》中发现了一些JavaScript代码，可以让您自己制作更新进程，并且您可以将其放置在页面的任何位置，也可以在页面上的任何更新面板中使用它。作者是Suprotim Agarwal。 
    <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>
1
经过一些有限的测试，我发现在使用框架的asp:updateprogress控件动态添加DOM元素时存在轻微延迟。相反，连接相关JS事件的这种方法可以立即给出UI反馈。 - Red Taz
是的，它更快一些，但如果您有一个包含大量DOM的重页面，则可以区分两者的速度。 - Anant Dabhi
1
这对我的情况非常有效，因为我在一个区域中有3-7个更新面板，如果我想要进行任何更新，我都可以监听它们并按照需要显示、隐藏和操作DOM，谢谢！ - Jon R.
1
<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/加载图像

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接