[英]How can I make a div visible Before the page has finished loading
我有一個使用WebForms在ASP.NET中構建的頁面。
我有幾個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。
有沒有辦法讓該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。
因此,我想每次回發完成(即每次更改組合時),然后它將恢復為默認值。 還是我在錯誤的地方?
TestSuite_SelectedIndexChanged是服務器端事件,因此在回發之前不會顯示任何內容。 在啟動之前,您需要使用javascript或jquery做客戶端操作,或者可以添加AjaxUpdate控件: http : //www.asp.net/ajax/documentation/live/overview/updateprogressoverview.aspx
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.