asp.net 使用UpdatePanel回发的 AJAX “正在加载”图标

vnzz0bqm  于 2023-03-20  发布在  .NET
关注(0)|答案(3)|浏览(216)

我有一个使用 AJAX (内置于.NET Ajax和UpdatePanel中)根据用户选择动态构建的表单。
我怎么能插入一个“标准” AJAX 加载图标(也许有它附加到鼠标指针),而回发正在发生,然后删除它时,回发完成?
如果有帮助的话,我确实安装了AjaxToolKit。

mznpcxlj

mznpcxlj1#

使用更新工具包的进度:希望这将帮助你

<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>
4xrmg8kj

4xrmg8kj2#

我在this article, 3 Different Ways to Display Progress in an ASP.NET AJAX Application中找到了一些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>
gpfsuwkq

gpfsuwkq3#

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

相关问题