Показывать сообщение о загрузке с использованием главных страниц, пока страница загружает данные asp.net

Я часами гуглял и искал прошлые вопросы, но изо всех сил пытался найти ответы на эти вопросы (будь то, что я не могу правильно включить это в свое решение, или оно мне не подходит, поскольку у них нет главных страниц).

У меня вопрос: у меня есть пара страниц asp.net, загрузка которых может занять некоторое время (иногда 5 секунд и более), так как из базы данных по методу Page_Load запрашивается много данных. Чтобы пользователи не думали, что страница потерпела крах, и обновляют страницу или делают что-то еще, я хочу выложить сообщение "Загрузка", скрывающее все остальное на странице (кроме меню) во время загрузки.

Я использую ASP.Net 4.0 с мастер-страницами и кодирования на C#.

Тот, где я добился наибольшего успеха, использует 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>

Не могли бы вы показать мне лучший способ сделать это и где я иду не так? Также, как я могу скрыть ContentTemplate, когда шаблон UpdateProgress показывает, что было бы здорово?

Благодарю.

Источник

2 ответа

Решение

Хорошо, так что я понял, что я делаю неправильно, я думал, что опубликую то, что я сделал, чтобы, надеюсь, помочь кому-то еще, кто может оказаться с такими же проблемами...

По сути, я не думал об этом логически. За пределами панели обновления есть элементы управления, такие как NavigationMenu, которые никогда не будут запускать процесс обновления, поскольку они не имеют ничего общего с Panel! Мне пришлось добавить триггеры на панель обновлений, чтобы справиться со всем, что происходит за пределами панели.

Итак, на моей главной странице у меня был следующий код

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

Надеюсь, это поможет кому-то еще!

Источник

Вы можете использовать элемент управления UpdateProgress. Вы можете получить его из поля Toll на вкладке Ajax Extensions. Я описываю вам сценарий:
Предположим, у меня есть One Upadate Panel с именем 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.

Источник
Другие вопросы по тегам