2012-08-06 128 views
3

我花了數個小時搜索和搜索以前的問題,但一直在努力獲得這些答案的任何地方(無論如何我無法正確地將其解決到我的解決方案或它不適合我,因爲他們沒有母版頁)。在頁面加載數據時使用母版頁顯示加載消息asp.net

我的問題是,我有一些asp.net頁面可能需要一段時間來加載(有時5秒+),因爲有很多數據在Page_Load方法中從數據庫請求。爲了阻止用戶認爲頁面崩潰並刷新頁面或做其他事情,我想在頁面加載時在頁面上放置一個加載消息(除菜單外)。

我正在使用ASP.Net 4.0與母版頁和編碼在C#中。

我最大的成功之一就是在內容模板覆蓋contentplaceholder的母版頁上使用UpdatePanel,但是我知道這不是最好的方法,反正它只顯示一次,即用戶登錄後,會顯示加載消息,一旦所有數據加載到主頁(dashboard.aspx),加載消息就會消失,這就是我想要的。但是,如果用戶離開該頁面,然後單擊回家,加載消息再也不會出現,只需要一段時間才能加載。它也從來沒有出現任何其他頁面,需要明顯的時間加載。

下面是master.aspx

<body> 
<form runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<div class="page"> 
    <div class="header"> 
     <div class="title"> 
      <h1> 
       Header 
      </h1> 
     </div> 
     <div class="loginDisplay"> 
      <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> 
       <AnonymousTemplate> 
        [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a> 
        ] 
       </AnonymousTemplate> 
       <LoggedInTemplate> 
        Welcome <span class="bold"> 
         <asp:LoginName ID="HeadLoginName" runat="server" /> 
        </span>! [ 
        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" 
         LogoutPageUrl="~/Default.aspx" /> 
        ] 
       </LoggedInTemplate> 
      </asp:LoginView> 
     </div> 
     <div class="clear hideSkiplink"> 
      <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" 
       IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick"> 
       <Items> 
        <asp:MenuItem Text="Home" /> 
        <asp:MenuItem Text="About" /> 
       </Items> 
      </asp:Menu> 
     </div> 
    </div> 
    <div class="main"> 

     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 

       <asp:UpdateProgress ID="UpdateProgress1" runat="server"> 
        <ProgressTemplate> 
         <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center"> 
          <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" /> 
         </asp:Panel> 

        </ProgressTemplate> 
       </asp:UpdateProgress> 
      </ContentTemplate> 
     </asp:UpdatePanel> 


     <asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender" 
      runat="server" Enabled="True" TargetControlID="UpdatePanel1"> 
     </asp:UpdatePanelAnimationExtender> 


    </div> 
    <div class="clear"> 
    </div> 
</div> 
<div class="footer"> 
</div> 
</form> 

及以下的身體爲dashboard.aspx頁面(一個網頁,其中有一個加載時間較長)

<asp:Panel ID="PanelWelcome" runat="server"> 
    <h1> 
     Welcome 
     <asp:Label ID="LabelUserName" runat="server" Text="[User Name]" />&nbsp;to your 
     personal Dashboard.</h1> 
    <table width="100%" cellpadding="5px"> 
     <tr> 
      <td style="width: 70%" valign="top"> 
       <asp:Panel ID="Panel2" runat="server"> 
        <p> 
         &nbsp;</p> 
        <h4> 
         Up and Coming </h4> 
        <br /> 
        <asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left" 
         OnRowDataBound="GridViewItin_RowDataBound"> 
        </asp:GridView> 
       </asp:Panel> 
      </td> 
      <td style="width: 30%"> 
       <asp:Panel ID="PanelProfile" runat="server"> 
        <asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg" 
         Width="150px" /><br /> 
        <h4> 
         Name:</h4> 
        <asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"></asp:Label> 
        <h4> 
         Company:</h4> 
        <asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"></asp:Label> 
        <h4> 
         Date of Birth:</h4> 
        <asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"></asp:Label><br /> 
        <asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click">More details...</asp:LinkButton> 
       </asp:Panel> 
      </td> 
     </tr> 
    </table> 
</asp:Panel> 

你能告訴我最好的方法去做它,我哪裏出錯了?當UpdateProgress模板顯示的時候,我該如何隱藏ContentTemplate?

謝謝。

回答

3

好了,所以我想通了什麼,我做錯了,我想我會後我做了什麼,希望能夠幫助別人誰可能有同樣的問題結束了......

基本上我沒想到關於它的邏輯。更新面板之外有一些控件,例如NavigationMenu,它永遠不會觸發更新進度,因爲它們與面板無關!我必須添加觸發器到更新面板來處理面板外發生的所有事情。

所以,在我的母版頁,我有下面的代碼

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="NavigationMenu" /> 
     </Triggers> 
    </asp:UpdatePanel> 

    <asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0"> 
      <ProgressTemplate> 
       <div id="overlay"> 
        <div id="modalprogress"> 
         <div id="theprogress"> 
          <asp:Image ID="loader" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/loader.gif" /> 
          Please wait... 
         </div> 
        </div> 
       </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 


    <asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender" 
     runat="server" Enabled="True" TargetControlID="UpdatePanel1"> 
    </asp:UpdatePanelAnimationExtender> 

希望這會幫助別人!

1

您可以使用UpdateProgress控件。您可以從Ajax Extensions選項卡下的Toll框中獲取它。 我描述你一個情景:
假設我有一個Upadate面板名UpdatePnl1,在此我有一個按鈕,說GO。當我們打的去應該重定向到另一頁。在此之前它會提醒你請稍候。

現在我的代碼會是這樣的

<asp:UpdatePanel ID="UpdatePnl1" runat="server"> 
<ContentTemplate> 
<asp:Button ID="BtnGO" runat="server" Text="GO" onclick="BtnGO_Click"/> 
</ContentTemplate> 
</asp:Updatepanel> 

按鈕點擊代碼:

protected void BtnGO_Click(object sender, EventArgs e) 
    { 
     Response.Redirect("Example.aspx"); 
    } 

現在,這裏是的UpdateProgress你需要添加

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePnl1" > 
     <ProgressTemplate> 

     <asp:Label ID="LblWaitMsg" runat="server" Text="Processing Request, Please Wait..."></asp:Label>   

     </ProgressTemplate> 
</asp:UpdateProgress> 

注意什麼的代碼:你的頁面應該包含ScriptManager。

+0

感謝您的快速回復。使用像Example.aspx這樣的加載頁面,可能不會影響用戶何時單擊後退按鈕?我的主頁中有UpdateProgress和Script Manager。 – 2012-08-06 12:38:34