ASP.net Page Loading popup

Go To StackoverFlow.com

1

I was wondering if it is possible to have a modalpopup show up on page load, saying that the page is loading. I have a page that gets a lot of data from an external source which means it takes a bit before any of the controls are actually filled. I would like to have a popup or something similar that tells the user the page is loading.

I tried this:

<ajax:ModalPopupExtender ID="mpeLoader" runat="server" TargetControlID="btnLoader"
    PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="100px" Style="display: none;">
    <div class="detailspopup">
        <table>
            <tr>
                <td><asp:Image ID="imgLoader" runat="server" ImageUrl="~/App_Themes/Main/img/loading.gif" /></td>
            </tr>
            <tr>
                <td>Loading...</td>
            </tr>
        </table>
    </div>
</asp:Panel>

with a dummy button btnLoader to allow me to access the show and hide from code behind. I've been toying with the .show method in the page lifecycle but I can't seem to find a way to have the poopup show when the page is loading (and disappear when loading is done). This would also be needed upon filtering the data, thus getting new data based on filter data.

2009-06-16 08:13
by Jan W.


1

Hard to say what the best solution is without more information, but one possible way to go is to make the first page just act as a "loader" containing the dialog and some javascript that will load the actual page with ajax.

Like I wrote before it depends very much on what you are trying to accomplish :-) !

But one way to do it with jQuery, if the page you are trying to load is very simple like a list without any state / postback controls is to create a "Loader"-page like the code belov and use the UrlToLoad query param for what page to load dynamically.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function()
        {
            $("form").load("<%= this.Request["UrlToLoad"] %> form");
        });
    </script>
</head>

<body>
    <form runat="server">           
        Loading...
    </form>
</body>

2009-06-16 08:21
by bang
and how would you propose I do this? I'm a noob at clientside scripting - Jan W. 2009-06-22 07:48


1

Have you considered using jQuery? There are some excellent modal dialog plugins available. I've used Eric Martin's SimpleModal extensively in the past, and have been very happy with it. It has hooks for callbacks both before and after displaying the dialog, so you could perform any checks you need to using functions.

Using the jQuery route - you could have a div that surrounds all the content that is still loading, and have is dimmed out/disabled with a modal dialog showing your 'page loading' message. Then you could make use of the $document.ready() functionality in jQuery to determine when the page is done loading. At this point, you could remove the dialog and fade the page in.

2009-06-16 08:22
by Mark Struzinski
doesn't this still leave the problem of the popup not showing until the page is loaded? should I add the loader to the masterpage maybe - Jan W. 2009-06-16 09:25


0

What I did is make a PreLoader.aspx page that will "hold" untill the page we want is loaded:

<script type="text/javascript" language="javascript">
window.onload=function()
{
    $get("ctl00_ContentPlaceHolder1_btnNav",document).click();
    setTimeout('document.images["Loader"].src="App_Themes/Main/img/loading.gif"', 200);         
}
</script>

the button actually makes the transfer

<asp:Label ID="lblLoading" runat="server" Text="Loading the requested page. Please wait ..." />
            <asp:Button ID="btnNav" Style="display: none;" runat="server" OnClick="NavTo" />

protected void NavTo(object sender, EventArgs e)
    {
        Response.Redirect(Request.QueryString["url"].ToString());
    }

I like this as it can be reused for every heavy data page ...

2009-06-22 08:40
by Jan W.