如何在页面完成加载之前使 div 可见

Question

我有一个使用 WebForms 在 ASP.NET 中构建的页面。

我有几个似乎工作正常的 UpdatePanel。但是我遇到了问题。

我有一个组合框，当值更改时，它会连接到 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。

所以我认为每次回发完成时（即每次我更改组合时）然后它会回到默认状态。还是我在错误的地方？

Answer 1

TestSuite_SelectedIndexChanged 是一个服务器端事件，因此在回发之前它不会向您显示任何内容。在启动之前，您需要使用 javascript 或 jquery 在客户端执行一些操作，或者您可以添加 AjaxUpdate 控件：http://www.asp.net/ajax/documentation/live/overview/updateprogressoverview.aspx