C# ajax"；“装载”；带有UpdatePanel回发的图标
我有一个表单，它是使用Ajax（内置于.NETAjax和UpdatePanel）根据用户选择动态构建的 如何在回发过程中插入“标准”ajax加载图标（可能将其连接到鼠标指针），然后在回发完成后将其删除C# ajax"；“装载”；带有UpdatePanel回发的图标,c#,asp.net,ajax,updatepanel,postback,C#,Asp.net,Ajax,Updatepanel,Postback,我有一个表单，它是使用Ajax（内置于.NETAjax和UpdatePanel）根据用户选择动态构建的 如何在回发过程中插入“标准”ajax加载图标（可能将其连接到鼠标指针），然后在回发完成后将其删除 如果有帮助的话，我确实安装了AjaxToolKit。使用工具包的更新进度：希望这对您有所帮助 <asp:updatepanel id="ResultsUpdatePanel" runat="server"> <contenttemplate> <div st
如果有帮助的话，我确实安装了AjaxToolKit。使用工具包的更新进度：希望这对您有所帮助
<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>
//你的控制代码
<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";
}
处理。。。
受保护的无效btnInvoke_单击（对象发送者，事件参数e）
{
系统线程线程睡眠（3000）；
lblText.Text=“处理完成”；
}
<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>
//获取PageRequestManager的实例。
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
//添加initializeRequest和endRequest
添加初始化请求（prm\U initializeRequest）；
prm.add_endRequest（prm_endRequest）；
//在异步回发开始时调用
函数prm_InitializeRequest（发送方，参数）{
//获取divImage并将其设置为可见
var panelProg=$get（'divImage'）；
panelProg.style.display=''；
//重置标签文本
var lbl=$get（“”）；
lbl.innerHTML=''；
//禁用导致回发的按钮
$get（args.\u postBackElement.id）.disabled=true；
}
//异步回发结束时调用
函数prm_EndRequest（发送方，参数）{
//获取divImage并再次隐藏它
$（'divImage'）.hide（）；
//导致回发的启用按钮
$get（sender.\u postBackSettings.sourceElement.id）.disabled=false；
}
经过一些有限的测试后，我发现在使用框架的
控件时，动态添加DOM元素有一点延迟。相反，这种连接相关JS事件的方法提供了即时的UI反馈。是的，它速度更快，但有一点，但如果你有一个包含大量dom的沉重页面，你可以区分两者的速度。这对我的情况很好，因为我在一个区域有3-7个更新面板，如果有任何更新，我想做一些“工作”这使我能够听他们所有的和显示，隐藏和操纵dom，因为我需要，谢谢！
<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>