Loading Image due to post back in asp.net page by Ajax-toolkit
Ajax Image Loading due to post back in asp.net web page: Download Source Code : Download Demo: Register Ajax-toolkit: <%...
Ajax Image Loading due to post back in asp.net web page:
Download Source Code : DownloadDemo:
Register Ajax-toolkit:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>Now Design a Update Progress Panel into Body tag :
<body>/*--------*/
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="button" OnClick="btnSubmit_Click" />
/*----------*/
<asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxToolkit:ModalPopupExtender ID="modalPopup" runat="server" DropShadow="false" BackgroundCssClass="modalPopup" RepositionMode="RepositionOnWindowResizeAndScroll" TargetControlID="UpdateProgress" PopupControlID="UpdateProgress" />
/*---------*/
</body>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
prm.add_beginRequest(BeginRequestHandler);
// Raised after an asynchronous postback is finished and control has been returned to the browser.
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Shows the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.show();
}
}
function EndRequestHandler(sender, args) {
//Hide the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.hide();
}
}
</script>Add Fake Delay to simulate long running process in .cs file:
protected void btnSubmit_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); /*---------------*/ }