带UpdatePanel回发的ajax“正在加载”图标
[英]ajax “loading” icon with UpdatePanel postbacks
问题描述
I have a form that is being dynamically built depending on user selection using Ajax (built in .NET Ajax with UpdatePanel). 
我有一个根据用户选择使用Ajax动态构建的表单（使用UpdatePanel在.NET Ajax中构建）。
how can I insert a "standard" ajax loading icon (maybe have it attached to the mouse pointer) while the postback is happening then remove it when the post back is finished? 如何在回发发生时插入“标准” ajax加载图标（也许已将其附加到鼠标指针），然后在回发完成时将其删除？
I do have the AjaxToolKit installed if that helps. 如果有帮助，我确实安装了AjaxToolKit。
4 个解决方案
解决方案1
41 已采纳 2010-05-11 19:06:37
use updateprogress of tool kit :hope this will help you 使用工具包的更新进度：希望这会帮助您
<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>
解决方案2
10 2012-03-01 06:00:08
Use following code... 使用以下代码...
<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";
}
解决方案3
4 2012-09-01 20:19:56
here I found some JavaScript to make update process yourself and also you can put it anywhere in page and it work any update panel in page . 在这里，我找到了一些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>
解决方案4
1 2015-09-22 17:25:26
<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>
Loading images from: http://loading.io/ 从以下位置加载图像： http : //loading.io/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.