加载后，ASP.NET Web表单事件处理程序修改页面组件

Question

我正在显示一个加载图像，直到页面加载完成为止，我想再次显示此图像，直到按钮单击事件处理程序完成。但是由于ASP.NET Web表单中的页面生命周期，我无法实现这一目标。关于如何做的任何建议？

Answer 1

一个选项是使用更新面板，尽管您也可以通过jQuery实现此目标。在更新的面板中，您可以具有带有加载指示器的DIV，然后在您单击按钮时会出现。

信用转到此链接http://www.aspsnippets.com/articles/show-loading-progress-indicator-using-gif-image-mimage-when-phen-phen-panepanel-is-is-ispan--ipdating-in-aspnet.aspxp

  <asp:ScriptManager runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="modal">
                <div class="center">
                    <img alt="" src="loader.gif" />
                </div>
            </div>
        </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div align="center">
                <h1>
                    Click the button to see the UpdateProgress!</h1>
                <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
        </asp:UpdatePanel>

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
    }

//CSS

<style type="text/css">
body
{
    margin: 0;
    padding: 0;
    font-family: Arial;
}
.modal
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center
{
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
.center img
{
    height: 128px;
    width: 128px;
}
</style>