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 に設定されています。
したがって、ポストバックが完了するたびに(コンボを変更するたびに)、デフォルトに戻ると考えています。それとも私はここで間違った地域にいますか?