2012-08-06 131 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