Question

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

Answer 1

一个选项是使用更新面板，尽管你也可以通过jquery实现这一点。在更新的面板中，您可以使用加载指示器的div，然后当您单击按钮时会显示此信息，请尝试。

此信用额转到此链接http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx

  <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>

ASP.NET Web窗体事件处理程序在加载后修改页面组件

1 个答案: