2017年6月16日 星期五

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>