[英]ajax “loading” icon with UpdatePanel postbacks
我有一個根據用戶選擇使用Ajax動態構建的表單(使用UpdatePanel在.NET Ajax中構建)。
如何在回發發生時插入“標准” ajax加載圖標(也許已將其附加到鼠標指針),然后在回發完成時將其刪除?
如果有幫助,我確實安裝了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";
}
在這里,我找到了一些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>
<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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.