I have seen telernik, component art and other ajax software show a page loading image or message while the request for the page is being processes. Is there a script for this that the average joe coder can use? I would like to have this message displayed
on my slow loading pages.
1)create a custom control that inherits from WebControl, let’s call it Loader
2)In the code for Loader, have it override the Render method and call GetPostBackEvent reference. It should render out clientside script for the pageLoad function that contains
the result of the call to GetPostBackEventReference.
3)The Loader control should also implement the IPostbackEventHandler interface. In the RaisePostBackEvent method call DataBind on the page.
4)Now you can use the control on your page to have the UpdatePanel refreshed when the page loads.
System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace
Samples {
public
class
Loader : System.Web.UI.WebControls.WebControl,
IPostBackEventHandler {
commadercody
Member
194 Points
345 Posts
Page Loading Message
Jun 27, 2007 01:36 PM|LINK
I have seen telernik, component art and other ajax software show a page loading image or message while the request for the page is being processes. Is there a script for this that the average joe coder can use? I would like to have this message displayed on my slow loading pages.
antoniodorne...
Member
184 Points
36 Posts
Re: Page Loading Message
Jun 27, 2007 05:30 PM|LINK
In your page, that need to have ScriptManager use The updateprogress ... like this ...
<asp:UpdateProgress ID="UpdateProgressPartial" runat="server" DisplayAfter="0" DynamicLayout="true"> <ProgressTemplate> Loading....<br/> <asp:Image ID="ImgLoading" runat="server" Height="12" ImageUrl="~/images/loading.gif" /> </ProgressTemplate> </asp:UpdateProgress>... To all pages, u can use with MasterPage ...
commadercody
Member
194 Points
345 Posts
Re: Page Loading Message
Jun 27, 2007 08:31 PM|LINK
I have the following code now and it is not diong anything. What am I missing here besides my brain? :)
<form id="form1" runat="server"><
asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdateProgress ID="UpdateProgressPartial" runat="server" DisplayAfter="0" DynamicLayout="true"> <ProgressTemplate> Loading....<br/><
asp:Image ID="ImgLoading" runat="server" Height="12" ImageUrl="~/images/loading.gif" /> </ProgressTemplate></
asp:UpdateProgress>Access
Member
528 Points
213 Posts
Re: Page Loading Message
Jun 28, 2007 06:12 AM|LINK
1) create a custom control that inherits from WebControl, let’s call it Loader
2) In the code for Loader, have it override the Render method and call GetPostBackEvent reference. It should render out clientside script for the pageLoad function that contains the result of the call to GetPostBackEventReference.
3) The Loader control should also implement the IPostbackEventHandler interface. In the RaisePostBackEvent method call DataBind on the page.
4) Now you can use the control on your page to have the UpdatePanel refreshed when the page loads.
Here is your sample packaged as a custom control.
The Page:
<%
@ Page Language="C#" %><%@ Register TagPrefix="my" Namespace="Samples" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="sm" runat="server" EnablePartialRendering ="true" />
<atlas:UpdatePanel ID="UpdatePanel1" Mode="Always" runat="Server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</atlas:UpdatePanel>
<atlas:UpdateProgress ID ="UpdateProgress1" runat="server">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</atlas:UpdateProgress>
<my:Loader runat="server" />
</div>
</form>
</body>
</html>
And the custom control:
using
System;using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace
Samples {public class Loader : System.Web.UI.WebControls.WebControl, IPostBackEventHandler {
public Loader() {}
protected override void Render(HtmlTextWriter writer) {writer.Write("<script type=\"text/javascript\" >\r\n");
writer.Write("function pageLoad() {\r\n");
writer.Write("alert(\"waiting\");\r\n");
writer.Write(this.Page.GetPostBackEventReference(this));
writer.Write("}\r\n");
writer.Write("</script>\r\n");
}
public void RaisePostBackEvent(string eventArgument) {Label label = this.Page.FindControl("Label1") as Label;
if (label != null) {
label.Text = "updated at last";
}
}
}
}
Also check out this article http://www.codeproject.com/useritems/ASPNETAJAXPageLoader.asp?df=100&forumid=345790&exp=0&select=1698233&tid=1693448
commadercody
Member
194 Points
345 Posts
Re: Page Loading Message
Jul 03, 2007 03:34 PM|LINK
I must be doing something wrong, this is not working.
KaziManzurRa...
Contributor
4802 Points
887 Posts
Re: Page Loading Message
Jul 03, 2007 08:40 PM|LINK
Kazi Manzur Rashid
_________________________
Blog: http //kazimanzurrashid.com
Twitter: http://twitter.com/manzurrashid
KaziManzurRa...
Contributor
4802 Points
887 Posts
Re: Page Loading Message
Jul 03, 2007 08:46 PM|LINK
<
table border="0" cellpadding="0" cellspacing="0" style="width:100%"> <tbody> <tr> <tr> <td style="width:25%"></td> <td style="text-align:left;vertical-align:middle;width:50%"> <asp:UpdateProgress ID="prgResult" runat="server" AssociatedUpdatePanelID="pnlResult"> <ProgressTemplate> <img alt="" src="Images/indicator.gif" /> Loading, Please wait... </ProgressTemplate> </asp:UpdateProgress> </td> <td style="width:25%"></td> </tr> <tr> <td style="width:25%"></td> <td style="text-align:center;vertical-align:middle;width:50%"> <asp:UpdatePanel ID="pnlResult" runat="server"> <ContentTemplate> </ContentTemplate> </asp:UpdatePanel> </td> <td style="width:25%"></td> </tr> </tbody></
table>Kazi Manzur Rashid
_________________________
Blog: http //kazimanzurrashid.com
Twitter: http://twitter.com/manzurrashid
commadercody
Member
194 Points
345 Posts
Re: Page Loading Message
Jul 05, 2007 02:34 PM|LINK
I copied your code verbatium and it still did not work, what would I be missing in regards to this code? :)
rpgivpgmr2
Member
436 Points
91 Posts
Re: Page Loading Message
May 05, 2011 03:54 PM|LINK
Check out the MVP's short and concise answer on this page:
http://codeasp.net/forums/basic-aspnet/web-forms/590/dispaly-progress-image-while-page-loading
chetan.sarod...
All-Star
65729 Points
11138 Posts
Re: Page Loading Message
May 06, 2011 03:26 AM|LINK
http://forums.asp.net/p/1338523/2707831.aspx
http://forums.asp.net/p/1461952/3366376.aspx
http://forums.asp.net/p/1419601/3147250.aspx
http://mattberseth.com/blog/2007/06/aspnet_ajax_rendering_a_gmaill.html
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.