minG: 使用ASP.NET 的 AJAX 時，顯示 Loading 字樣

HTML 部份

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

    <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />

</ContentTemplate>

</asp:UpdatePanel>

.CS 部份

仍然依照原先的寫法

protected void Button1_Click(object sender, EventArgs e)

{

    GetSomeData();

}

樣式的部份

<style type="text/css">

body

{

    margin: 0;

    padding: 0;

}

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

資料來源：http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx

minG