How to Freeze Webpage while it is being processed in .Net 2.0 using AJAX?
Blocking a webpage seems to be difficult task while the data on the page is being posted back to the server or it is being refreshed. It becomes tricky to track the postback and reloading of the page. Though this can be achieved by using Response.Flush() method but it requires some extra effort.
But thanks to AJAX Update Progress Panel.
Using Update Progress Panel its just the mater of putting it on the page. The real magic lies in this panel and the DIV tag inside it. The panel takes care of the events required during the page updation and the DIV blocks the page till the panel is active. The magic that actually blocks the page lies in the DIV tag. I leave this to readers to find the crux of the magic.
Following is the Code you can use to block the Webpage.
I have used simple DIV tag but it can be enhanced using an animated gif file or other custom JavaScript for showing loading image or processing time.
Note:If you are using this code on the local server than AJAX might be so fast that the effect of this may not be visible.
So try to use this code where the server requires some time to process the request OR use Thread.Sleep(5000) on your page.
Sample Code Using Code Behind Modal:
Blocking a webpage seems to be difficult task while the data on the page is being posted back to the server or it is being refreshed. It becomes tricky to track the postback and reloading of the page. Though this can be achieved by using Response.Flush() method but it requires some extra effort.
But thanks to AJAX Update Progress Panel.
Using Update Progress Panel its just the mater of putting it on the page. The real magic lies in this panel and the DIV tag inside it. The panel takes care of the events required during the page updation and the DIV blocks the page till the panel is active. The magic that actually blocks the page lies in the DIV tag. I leave this to readers to find the crux of the magic.
Following is the Code you can use to block the Webpage.
<div style="top: 0px; height: 1000px; background-color: white; opacity: 0.75; filter: alpha(opacity=75); vertical-align: middle; left: 0px; z-index: 999999; width: 1000px; position: absolute; text-align: center;"></div>
I have used simple DIV tag but it can be enhanced using an animated gif file or other custom JavaScript for showing loading image or processing time.
Note:If you are using this code on the local server than AJAX might be so fast that the effect of this may not be visible.
So try to use this code where the server requires some time to process the request OR use Thread.Sleep(5000) on your page.
Sample Code Using Code Behind Modal:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WaitForRequest.aspx.cs"
Inherits="WaitForRequest" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Wait For Request</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajax:ScriptManager ID="ScriptManager1" runat="server">
</ajax:ScriptManager>
<ajax:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnGetDate" runat="server" Text="Get Date" OnClick="btnGetDate_Click">
</asp:Button>
<asp:Label ID="lblTime" runat="server"></asp:Label>
</ContentTemplate>
</ajax:UpdatePanel>
<ajax:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="top: 0px; height: 1000px; background-color: White; opacity: 0.75; filter: alpha(opacity=75);
vertical-align: middle; left: 0px; z-index: 999999; width: 1000px; position: absolute;
text-align: center;">
</div>
</ProgressTemplate>
</ajax:UpdateProgress>
</div>
</form>
</body>
</html>
using System;
using System.Threading;
using System.Data;
using System.Configuration;
using System.Collections;
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;
public partial class WaitForRequest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnGetDate_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
lblTime.Text = DateTime.Now.ToString();
}
}
5 comments:
excellent... thx for sharing
can we have two update panels on same page?
Yes, you can surely have more than one update pannel in a single web page.
[...] How to Freeze Webpage while it is being processed in .Net 2.0 using AJAX? June 20083 comments 5 [...]
thanks for the 'crux of magic' :)
works like a charm
Post a Comment