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

Question

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

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

У меня есть combobox, и когда значение изменено, оно подключается к 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, чтобы он появился прямо перед тем, как этот combobox начнет делать все длинное работающее вещество?

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

EDIT: Я добавил несколько 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(); 
     } 
    }) 
}) 

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

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

Answer 1

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