Как сделать div видимым до завершения загрузки страницы?

Question

У меня есть страница, которую я построил в ASP.NET, используя WebForms.

У меня есть пара UpdatePanels, которые, кажется, работают нормально. Но я столкнулся с проблемой.

У меня есть выпадающий список, и когда значение изменяется, он подключается к TFS и получает сведения о проектах, чтобы заполнить список. Это может занять некоторое время, так как наш TFS-сервер находится в Австралии, а я в Великобритании, поэтому я подумал, что мне нужно отобразить небольшую графику, чтобы указать пользователю, что он загружается в деталях.

Итак, вот пример того, что я имею до сих пор:

HTML:

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:Panel ID="InnerPannelLeft" runat="server" CssClass="innerContentPanel_Left">
    <asp:Panel ID="Panel2" runat="server" CssClass="innerContentPanel_Border">
        <asp:Panel ID="Panel3" runat="server" CssClass="runResultsPanels">
            <asp:Label ID="Label2" runat="server" Text="Test Suite:  "></asp:Label>
            <asp:DropDownList ID="TestSuite" runat="server" OnSelectedIndexChanged="TestSuite_SelectedIndexChanged" AutoPostBack="True">
                <asp:ListItem Selected="True">Select a Test Suite</asp:ListItem>
                <asp:ListItem>Trades</asp:ListItem>
                <asp:ListItem>Dividends</asp:ListItem>
            </asp:DropDownList>
        </asp:Panel>
    </asp:Panel>
</asp:Panel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TestSuite" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="LoadingPanel" CssClass="innerContentPanel_Border" runat="server" Visible="false">
            <asp:Panel ID="TimeDiv" runat="server">
                <asp:Label ID="Label6" runat="server" Text="Loading..."></asp:Label>
                <asp:Panel ID="TimerAnimation" CssClass="timer" runat="server"></asp:Panel>
            </asp:Panel>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

C#:

protected void TestSuite_SelectedIndexChanged(object sender, EventArgs e)
{
    if (TestSuite.SelectedIndex > 0)
    {
         //Show the loading div
         LoadingPanel.Visible = true;

         //Long running code that grabs stuff from TFS

         //Grabbing stuff from TFS has finished so hide the div
         //LoadingPanel.Visible = false;
    }
}

Итак, есть код. Но в основном происходит то, что он не будет отображать div до тех пор, пока не будет завершена обработка внутри измененного метода combobox.

Есть ли способ заставить этот div показываться сразу же, пока этот комбобокс не начал делать все, что нужно для долгого выполнения?

Я думал, что размещение div в панели обновления и добавление триггера позволит ему асинхронно обновлять панель? Прошу прощения за мое невежество, если я ошибаюсь, сайт MSDN смутил меня.

РЕДАКТИРОВАТЬ: я добавил несколько JQuery, и он работает для отображения предупреждения на основе события onchange. Но то, что он не сделает, это сделает div видимым.

вот код:

$(document).ready(function ()
{
    $("#<%=TestSuite.ClientID%>").change(function()
    {
        if ($(this).find('option:selected').text() === "Select a Test Suite")
        {
            alert("Hide the panel");
            $("#<%=LoadingPanel.ClientID%>").hide();
        }
        else
        {
            alert("Show the panel");
            $("#<%=LoadingPanel.ClientID%>").show();
        }
    })
})

Я предполагаю, что это как-то связано с постбэком и забыванием изменений? Видимость по умолчанию для DIV установлена ​​в false.

Так что я думаю, что каждый раз, когда выполняется обратная передача (то есть каждый раз, когда я меняю комбо), затем происходит возврат к настройкам по умолчанию. Или я здесь не в том районе?

Answer 1

TestSuite_SelectedIndexChanged - это событие на стороне сервера, поэтому оно ничего не покажет до обратной передачи. Вам нужно будет что-то сделать на стороне клиента с помощью javascript или jquery, прежде чем он заработает, или вы можете добавить элемент управления AjaxUpdate: http://www.asp.net/ajax/documentation/live/overview/updateprogressoverview.aspx