在页面加载数据时使用母版页显示加载消息 asp.net答案

【问题标题】：Show a Loading Message using master pages while page loads data asp.net在页面加载数据时使用母版页显示加载消息 asp.net
【发布时间】：2012-08-06 11:33:37
【问题描述】：

我花了几个小时在谷歌上搜索和搜索过去的问题，但很难找到这些答案（无论是我无法正确地将其纳入我的解决方案，或者它不适合我，因为他们没有母版页)。

我的问题是，我有几个 asp.net 页面可能需要一段时间才能加载（有时 5 秒以上），因为在 Page_Load 方法中从数据库请求了大量数据。为了阻止用户认为页面已崩溃并刷新页面或执行其他操作，我想在页面加载时显示加载消息，隐藏页面上的所有其他内容（菜单除外）。

我正在使用带有母版页和 C# 编码的 ASP.Net 4.0。

我获得最大成功的一个是在我的母版页上使用 UpdatePanel，其中内容模板覆盖了 contentplaceholder，但是我知道这不是最好的方法，而且它只显示一次，即用户登录后，会出现加载消息，一旦所有数据都加载到主页（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 会很棒？

谢谢。

【问题讨论】：

标签： c# asp.net .net-4.0 master-pages page-loading-message

【解决方案1】：

好的，所以我知道我做错了什么，我想我会发布我所做的以希望帮助其他可能最终遇到同样问题的人......

基本上我没有从逻辑上考虑过。在更新面板之外有一些控件，例如 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>

希望这对其他人有帮助！

【讨论】：

【解决方案2】：

您可以使用 UpdateProgress 控件。您可以从 Ajax Extensions 选项卡下的 Toll 框中获取它。我在给你描述一个场景：
假设我有一个更新面板名称 UpdatePnl1 ，其中我有一个按钮说 GO。当我们点击 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。

【讨论】：

感谢您的快速回复。使用像 Example.aspx 这样的加载页面，这不会影响用户单击后退按钮的时间吗？我的母版页中有 UpdateProgress 和脚本管理器。