摘要:利用ajax 的UpdateProgress來達到loading 圖示
#################### css 樣式 #########################
<style type="text/css" >
.loading {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 30%;
left: 45%;
width: 110px;
height: 117px;
z-index: 10000;
_display: none;
}
.item
{
display: block;
margin: 103px auto 0 auto;
color: #195343;
text-align: center;
z-index: 10001;
}
</style>
####################### 控制項 ################################
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="讀取" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading" >
<img class="item" src="x/img/ajax-loader1.gif" /> </div>
</ProgressTemplate>
</asp:UpdateProgress>
################### cs 程式碼 ##########################
protected void Button1_Click(object sender, EventArgs e)
{ System.Threading.Thread.Sleep(20000); }
loading圖示製作: http://ajaxload.info/#preview