How to Freeze Webpage while it is being processed in .Net 2.0 using AJAX?

4 06 2008

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.

<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>

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" CodeFile="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" "href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="href="http://www.w3.org/1999/xhtml">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();
    }
}

Advertisements

Actions

Information

4 responses

12 06 2008
y2kstephen

excellent… thx for sharing

9 01 2009
Pravara

can we have two update panels on same page?

16 01 2009
Dhaval Upadhyaya

Yes, you can surely have more than one update pannel in a single web page.

25 03 2011
emerald

thanks for the ‘crux of magic’ 🙂
works like a charm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: