Geeks With Blogs
Amit's Blog Sharing Thoughts and Learning

Modal Progress Dialog

If you ever like to show a Modal Progress dialog like the above for any ajax operation no matter which Update Panel or Web Service call is responsible for it, the following code will do the same.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [System.Web.Services.WebMethod()]
    public static string GetDate()
    {
        //Doing a fake delay for 3 seconds
        System.Threading.Thread.Sleep(3000);

        return DateTime.Now.ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDate1.Text = lblDate2.Text = DateTime.Now.ToString();
        }
    }

    protected void btnDate1_Click(object sender, EventArgs e)
    {
        //Doing a fake delay for 3 seconds
        System.Threading.Thread.Sleep(3000);
        lblDate1.Text = DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Modal Dialog Progress</title>
    <style type="text/css">
        .modalBackground
        {
            background-color:#e6e6e6;
            filter:alpha(opacity=60);
            opacity:0.60;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <fieldset>
            <legend>UpdatePanel</legend>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblDate1" runat="server"></asp:Label>
                        <asp:Button ID="btnDate1" runat="server" Text="Get Date" OnClick="btnDate1_Click" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </fieldset>
        <fieldset>
            <legend>PageMethods</legend>
            <div>
                <asp:Label ID="lblDate2" runat="server"></asp:Label>
                <asp:Button ID="btnDate2" runat="server" Text="Get Date" OnClientClick="return btnDate2_Click()" />
            </div>
        </fieldset>
        <asp:Panel ID="pnlProgress" runat="server" style="background-color:#ffffff;display:none;width:400px">
            <div style="padding:8px">
                <table border="0" cellpadding="2" cellspacing="0" style="width:100%">
                    <tbody>
                        <tr>
                            <td style="width:50%"></td>
                            <td style="text-align:right">
                                <img alt="" src="indicator-big.gif" />
                            </td>
                            <td style="text-align:left;white-space:nowrap">
                                <span style="font-size:larger">Loading, Please wait ...</span>
                            </td>
                            <td style="width:50%"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </asp:Panel>
        <ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="pnlProgress" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" DropShadow="true" />
    </form>
    <script type="text/javascript">

        Sys.Net.WebRequestManager.add_invokingRequest(onInvoke);
        Sys.Net.WebRequestManager.add_completedRequest(onComplete);

        function onInvoke(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').show();
        }

        function onComplete(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').hide();
        }

        function btnDate2_Click()
        {
            PageMethods.GetDate (
                                    function(result)
                                    {
                                        var lbl = $get('<%= lblDate2.ClientID %>');

                                        if (document.all)
                                        {
                                            lbl.innerText = result;
                                        }
                                        else
                                        {
                                            lbl.textContent = result;
                                        }
                                    }
                                );

            return false;
        }

        function pageUnload()
        {
            Sys.Net.WebRequestManager.remove_invokingRequest(onInvoke);
            Sys.Net.WebRequestManager.remove_completedRequest(onComplete);
        }

    </script>
</body>
</html>

The main trick is hooking the two special events of Sys.Net.WebRequestManager class. This class is responsible for managing all kinds of communication with the server, even a manual invoke of a Sys.Net.WebRequest class will bring this class into action. It fires the invokingRequest before making an Ajax call and fires the completeRequest once the method completes. We are simply showing/hiding the modal popup extender in these events.

Download: Full Source

kick it on DotNetKicks.com

Posted on Friday, August 24, 2007 7:13 PM Asp.net Ajax , Tips/Tricks | Back to top


Comments on this post: Showing Modal Progress Dialog in all Ajax Operation

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
This is very cool! Outside the traditional "ATLAS" or just do it yourself (from scratch) there's not much AJAX stuff around the internet targeting the .net framework. There's everything you could dream of for PHP, but it's nice to see C# get some love, too.
Left by Forrest on Aug 30, 2007 4:52 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
you forgot the demo!
Left by Carlos on Sep 03, 2007 4:08 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Hi, The GeekswithBlogs does not allow to upload file, thus i have to host it in an external site. Just click the full source link at the bottom of the post my shared folder at box.net will open where you can downloas the sourcecode of this post.
Left by Kazi Manzur Rashid on Sep 03, 2007 4:28 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
very nice job, thank you
Left by Morteza on Sep 03, 2007 11:44 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
VERY NICE..
Left by MIM on Sep 28, 2007 3:00 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
grate job! thank you!
Left by Gokhan ZER on Oct 04, 2007 1:57 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks. Good article
Left by Resim Yükle on Oct 12, 2007 4:02 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Excelente. Gracias por compartirlo.
Left by Ricardo Chois on Jan 11, 2008 5:50 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks. Good article
Left by kız oyunları on Feb 19, 2008 8:28 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
thanks admin
Left by msn nick on Feb 28, 2008 3:23 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
if you have two different buttons on the page and want to display different progress panels (text/images) for each, how would u do that. In this example it looks like all post back events would use the same progress panel.

Thanks,
-ac
Left by vladimir on Mar 08, 2008 3:50 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
very nice
Left by game on Mar 14, 2008 6:52 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
thnkx nice script
Left by nameless on Mar 14, 2008 6:59 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thank You for another very interesting article. So please try to keep up the great work all the time.
Left by resimler on Apr 17, 2008 2:02 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Hope, it is not too late to say thank you for your work!
Left by nata on Apr 26, 2008 2:36 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks. Good article.
Left by video izle on May 08, 2008 4:51 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thank you wermacThank you wermacThank you wermac
Left by aşk şiirleri on Jun 15, 2008 1:00 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
"if you have two different buttons on the page and want to display different progress panels (text/images) for each, how would u do that. In this example it looks like all post back events would use the same progress panel."

In respose to your question, in order to have different pannels for different buttons use the OnClientClick property of the button, and remove the hook:

i.e

<asp:Button ID="bSearch" runat="server" Text="Search" Width="80px" OnClick="bSearch_Click" OnClientClick="onInvoke()" />&nbsp;<asp:Button
ID="bClearFilter" runat="server" Text="Clear Filter" Width="80px" />

//Sys.Net.WebRequestManager.add_invokingRequest(onInvoke);
Sys.Net.WebRequestManager.add_completedRequest(onComplete);

function onInvoke()
{
$find('<%= mpeProgress.ClientID %>').show();

}
Left by Jeremy Leigh on Jul 23, 2008 2:45 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Hi,

I would like this trick to be applying on each page of my website.
Is there any way to specify a delay, after which the modal popup would be displayed (i.e : 2 seconds) ? I don't want the popup to be displayed for small postback...
I've been playing with the Ajax Timer component but couldn't get it toi work.

Thanks for your help
Left by djflex on Aug 01, 2008 8:21 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Sohbet
Left by Hicran on Aug 05, 2008 12:57 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks for the very useful article.

I have one question: using this methodology, do you know if it is possible to invoke a delay before displaying the modal update progress, as can be set using the DisplayAfter property of the <asp:UpdateProgress> control?
Left by Wolfy on Aug 19, 2008 3:50 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks..But i not found demo :(
Left by Driver Download on Sep 12, 2008 3:46 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
thanks for post
Left by Michel on Oct 10, 2008 1:15 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
thanks admin good share
Left by yeni oyunlar on Oct 29, 2008 4:27 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Thanks very nice realy,;)
Left by Oda oyunları on Nov 06, 2008 3:41 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
thanks geekswithblogs
Left by iddaa on Nov 18, 2008 4:33 AM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
If I want to check for a particular control before show modal dialog ? Thanxs
Left by Manlio on Nov 24, 2008 10:18 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
really nice job
Left by gregale on Dec 19, 2008 2:59 PM

# re: Showing Modal Progress Dialog in all Ajax Operation
Requesting Gravatar...
Really nice article.
But it doesnt works if doctype tag is removed from the page.
Any solution for that ???
Left by Prajakta on Dec 24, 2008 7:49 PM

Your comment:
 (will show your gravatar)


Copyright © Kazi Manzur Rashid | Powered by: GeeksWithBlogs.net | Join free