csdnceshi73
喵-见缝插针
采纳率0%
2009-06-16 08:13

ASP.net页面加载弹出窗口

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • csdnceshi80 胖鸭 12年前

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

    点赞 评论 复制链接分享
  • weixin_33682719 weixin_33682719 12年前

    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.

    点赞 评论 复制链接分享
  • csdnceshi60 ℡Wang Yan 12年前

    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>
    

    点赞 评论 复制链接分享

相关推荐