2009-06-16 109 views
1

我想知道是否有可能在頁面加載時顯示modalpopup,並說該頁面正在加載。我有一個從外部獲取大量數據的頁面,這意味着在實際填充任何控件之前需要一點時間。 我想要一個彈出窗口或類似的東西來告訴用戶頁面正在加載。ASP.net頁面加載彈出框

我嘗試這樣做:

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

與虛擬按鈕btnLoader讓我訪問演出,並從代碼躲在後面。我一直在尋找頁面生命週期中的.show方法,但我似乎無法找到一種方法讓頁面在加載時顯示(並在加載完成時消失)。這在過濾數據時也是需要的,從而獲得基於過濾器數據的新數據。

回答

1

很難說,最好的解決辦法是什麼沒有更多的信息,但一個可能的方式去是讓第一頁只是作爲含對話和一些JavaScript將與阿賈克斯加載實際的頁面,「加載器」。

就像我之前寫的那樣,它非常依賴於你想要完成的事情:-)!

但是,如果您嘗試加載的頁面非常簡單,像列表中沒有任何狀態/回傳控件的一種方法是使用jQuery來創建「Loader」頁面,如代碼belov並使用UrlToLoad查詢param動態加載哪個頁面。

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

+0

,你會如何建議我做到這一點? 我是客戶端腳本編程的一個小菜鳥。 – 2009-06-22 07:48:18

1

你有沒有考慮使用jQuery?有一些優秀的模式對話框插件可用。我過去廣泛使用了Eric Martin的SimpleModal,並且對此非常滿意。它在顯示對話框之前和之後都具有回調的鉤子,因此您可以執行任何使用函數所需的檢查。

使用jQuery的路線 - 你可以有包圍所有仍在加載內容的DIV,並且已經變暗了/有顯示你的頁面加載「消息的模式對話框禁用。然後,您可以利用jQuery中的$document.ready()功能來確定頁面何時完成加載。在這一點上,你可以刪除的對話框,並在褪色的頁面

+0

沒有這仍然留下不顯示,直到頁面加載彈出的問題? 我應該將加載程序添加到主頁面嗎? – 2009-06-16 09:25:04

0

我所做的是使我們要在裝入PreLoader.aspx頁面,將「保持」,直到頁面:

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

的按鈕實際上使得傳輸

<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()); 
    } 

我喜歡這個,因爲它可以爲每個重數據頁被重用......