ASP.NET AJAX 的 UpdateProgress

雖然 VISUAL STUDIO 有提供 UpdateProgress 可以使用，而且也會在更新時出現，更新後就消失，但總覺得顯示的位置不太好控制，所以就乾脆把整個畫面都變色，這樣就可以達到提醒的作用了，方法如下，將 updateprogress 裡面放上想要顯示的字或 gif，然以用 span 將它包起來，然後再用另一個 div，將全部包起來，再用 css  的效果顯示半透明色和調整位置。

Sample.aspx
<style>
.LoadingCover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: white;
    font-size: 20px;
    line-height: 100%;
    background: rgba(0%,0%,0%,0.6);
    z-index: 998;
}

.LoadingContent {
    width: 200px;
    height: 100px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}
</style>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
    <ContentTemplate>
         要更新的內容
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="LoadingCover">
            <span class="LoadingContent">Loading...</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>      

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