के साथ AJAX "लोडिंग" आइकन मेरे पास एक ऐसा फॉर्म है जो अजाक्स (अपडेट पैनेल के साथ .NET अजाक्स में निर्मित) का उपयोग करके उपयोगकर्ता चयन के आधार पर गतिशील रूप से बनाया जा रहा है।अपडेट पैनेल पोस्टबैक
पोस्टबैक होने पर मैं "मानक" AJAX लोडिंग आइकन (शायद यह माउस पॉइंटर से जुड़ा हुआ) कैसे डाल सकता हूं, फिर पोस्ट बैक समाप्त होने पर इसे हटा दें?
यदि मेरे पास मदद करता है तो मेरे पास AjaxToolKit इंस्टॉल है। टूल किट की
उपयोग 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>
उपयोग में मदद मिलेगी कोड निम्नलिखित ...
<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";
}
यहाँ मैं कुछ जावास्क्रिप्ट अद्यतन प्रक्रिया अपने आप को बनाने के लिए मिल गया है और यह भी आप रख सकते हैं यह पृष्ठ में कहीं भी है और यह पृष्ठ में कोई भी अद्यतन पैनल काम करता है। से
<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/
कुछ सीमित परीक्षण के बाद मैं वहाँ पाया जब ढांचे के 'का उपयोग कर डोम तत्वों की गतिशील अलावा कुछ देरी होने के लिए <एएसपी: UpdateProgress> नियंत्रण'। असल में प्रासंगिक जेएस घटनाओं को जोड़ने की इस विधि ने तुरंत यूआई प्रतिक्रिया दी। –
हाँ यह एक तेज़ लेकिन थोड़ा सा है, लेकिन यदि आपके पास बहुत सारे डोम वाले भारी पृष्ठ हैं तो आप –
दोनों की गति को अलग कर सकते हैं। यह मेरी स्थिति के लिए अच्छा काम करता है क्योंकि मेरे पास एक क्षेत्र में 3-7 अपडेट पैनल है और यदि कोई अपडेट मैं चाहता था कुछ "काम" करने के लिए इसने मुझे उन सभी को सुनने और डोम को दिखाने और छिपाने की इजाजत दी, जैसा कि मुझे चाहिए, धन्यवाद! –