ModalPopupExtender 控件 , 創建視窗遮罩 , 背景變灰 , 顯示訊息

1. 創建一 Web Button Control , 建立 Button_Event , 事件內容假設為伺服器工作時間期間為 2 秒 .
2. 創建一 "Loading... , Please wait." 訊息畫面
3. 加入一 ModalPopupExtender 控件 , 設定相關屬性
4. 測試結果
5. 在 Page_Load 事件中註冊 ClientScriptManager.GetPostBackEventReference() 方法 ,
用戶端回呼後可回傳至 Server 處理 Button_Event 事件
5. 測試結果
6.完成

-------- HTML Start --------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Server Loading Message</title>
<style type="text/css">
/*Modal Popup*/
.modalBackground
{
background-color: #000000;
filter: alpha(opacity=40);
/* opacity: 0.7; */
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<h1>
Server Loading Message
</h1>
<br />
1. 創建一 Web Button Control , 建立 Button_Event , 事件內容假設為伺服器工作時間期間為 2 秒 .
<br />
2. 創建一 "Loading... , Please wait." 訊息畫面
<br />
3. 加入一 ModalPopupExtender 控件 , 設定相關屬性
<br />
4. 測試結果
<br />
5. 在 Page_Load 事件中註冊 ClientScriptManager.GetPostBackEventReference() 方法 ,
<br />
    用戶端回呼後可回傳至 Server 處理 Button_Event 事件
<br />
5. 測試結果
<br />
6.完成
<p>
<asp:Button ID="btnShowLoading" runat="server" Text="Click here on Testing" OnClick="btnShowLoading_Click" />
</p>
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowLoading"
PopupControlID="loadingWord" BackgroundCssClass="modalBackground" DropShadow="True">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel runat="server" ID="loadingWord" Style="display: none; background-color: #ffffff;
font-family: Tahoma; width: 250px; height: 60px">
<br />
<div align="center">
Loading... , Please wait.</div>
</asp:Panel>
</form>
</body>
</html>

-------- HTML End --------

public partial class ModalPopupFinal : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
//調用 ClientScriptManager.GetPostBackEventReference 方法 , 注意:此方法在 .NET Framework 2.0 版中是新增的。
btnShowLoading.Attributes.Add("onclick", cs.GetPostBackEventReference(btnShowLoading, btnShowLoading.ID));
}

protected void btnShowLoading_Click(object sender, EventArgs e)
{
//假設伺服器工作期間
System.Threading.Thread.Sleep(2000);
}
}

沒有留言: