FineUI小技巧（4）關閉窗體那些事

前言

FineUI中的Window控件經常使用做選擇、新增或編輯內容。而關閉Window控件卻有不少技巧，瞭解這些技巧有助於項目的快速開發。

如何關閉Window控件

第一個問題就是如何關閉Window控件，最明顯的方式就是右上角的關閉圖標了。總的說來，有三種方式：

1. ESC按鍵（在Window控件所在頁面獲取焦點的狀況下，按下鍵盤的ESC將會關閉當前激活窗體）
2. 窗體右上角的關閉圖標
3. 用戶自定義的關閉按鈕

前兩種方式自沒必要說，那麼如何自定義關閉按鈕呢？有兩種作法：

1. 按鈕禁用回發，在頁面初始化時註冊關閉腳本

   1 <f:Button ID="btnHideInClient" CssClass="inline" Text="隱藏窗體（客戶端代碼）" EnablePostBack="false"
   2             runat="server">
   3 </f:Button>

   1 protected void Page_Load(object sender, EventArgs e)
   2 {
   3     if (!IsPostBack)
   4     {
   5         btnHideInClient.OnClientClick = Window2.GetHideReference();
   6     }
   7 }
   8  

2. 按鈕回發，在回發事件中設置窗體Hidden屬性，

   1 <f:Button ID="btnHideInServer" Text="隱藏窗體（服務端代碼）" runat="server" OnClick="btnHideInServer_Click">
   2 </f:Button>

   1 protected void btnHideInServer_Click(object sender, EventArgs e)
   2 {
   3     Window2.Hidden = true;
   4 }

   或者註冊關閉腳本：

   1 protected void btnHideInServer_Click(object sender, EventArgs e)
   2 {
   3     PageContext.RegisterStartupScript(Window2.GetHideReference());
   4 }

 固然，這裏按鈕是和Window控件在一樣一個頁面的。

對於另外一種常見狀況，也即啓用IFrame的Window控件，位於IFrame頁面內的按鈕如何關閉父頁面中的這個Window控件呢？

顯然，咱們沒法在IFrame頁面內獲取Window控件的實例！

不要緊，FineUI提供了ActiveWindow類來處理這個常見問題：

1 protected void btnSaveContinue_Click(object sender, EventArgs e)
2 {
3     PageContext.RegisterStartupScript(ActiveWindow.GetHideReference());
4 }

 

關閉窗體的方式

前面提到的關閉窗體，只是簡單的關閉，並未作任何其餘處理。其實FineUI提供了三種關閉窗體的方式：

1. 直接關閉：也就是前面提到的 GetHideReferene 方法返回的腳本
2. 關閉窗體，而後回發窗體所在的頁面，觸發Window控件的Close事件：可使用內置的 GetHidePostBackReference 方法
3. 關閉窗體，而後刷新窗體所在的頁面：可使用內置的 GetHideRefreshReference 方法

再回到前面介紹的"如何關閉窗體"，顯然前兩種關閉方法（ESC，右上角關閉圖標）沒法使用 GetHide***Reference 方法，怎麼辦？

FineUI同時爲Window控件提供了 CloseAction 屬性，可能的值爲 Hide，HidePostBack 和 HideRefresh，分別對應上述方法。

來看一個例子：

1. 初始顯示
   
2. 點擊右上角關閉圖標，觸發了Close事件
   
   這個行爲是由Window控件的CloseAction屬性控制的，來看下控件標籤：

   1 <f:Window ID="Window2" Width="650px" Height="300px" Icon="TagBlue" Title="窗體" Hidden="true"
   2     EnableMaximize="true" EnableCollapse="true" runat="server" EnableResize="true"
   3     IsModal="false" CloseAction="HidePostBack" OnClose="Window2_Close" Layout="Fit">
   4 </f:Window>

   後臺的事件處理代碼：

   1 protected void Window2_Close(object sender, WindowCloseEventArgs e)
   2 {
   3     Alert.ShowInTop("窗體被關閉了。參數：" + (String.IsNullOrEmpty(e.CloseArgument) ? "無" : e.CloseArgument));
   4 }

   CloseAction沒法定義返回參數，因此這裏顯示"無"！

3. 點擊頁面上的"隱藏窗體，帶回發參數"，觸發了Close 事件，此時的頁面顯示
   
   這個按鈕的響應腳本是在頁面初始化時註冊的，以下所示（注意參數是如何設進去的）：

   1 protected void Page_Load(object sender, EventArgs e)
   2 {
   3     if (!IsPostBack)
   4     {
   5         btnHideInClient2.OnClientClick = Window2.GetHidePostBackReference("btnHideInClient2");
   6     }
   7 }

    

 一樣，對於啓用IFrame的Window控件，其IFrame內按鈕的關閉窗體處理，對應於ActiveWindow的幾個方法：

1. ActiveWindow.GetHideReference
2. ActiveWindow.GetHidePostBackReference
3. ActiveWindow.GetHideRefreshReference

 

關閉窗體的確認對話框

這個特性可能不少人都不知道，不過存在很強的實用性。

簡單描述：啓用IFrame的Window控件，若是IFrame頁面內任意表單字段發生改變，則在關閉窗體時彈出確認框。

目的是防止用戶在輸入表單內容後，還沒來的及保存，一個誤操做把彈出窗體關了。

1. 頁面初始顯示
   
2. 在"數字輸入框"內輸入任意值，而後點擊右上角的關閉圖標，彈出確認對話框
   
3. 清空 "數字輸入框"內的值（也便是還原到其初始狀態），而後點擊右上角的關閉圖標，則直接關閉窗體

 上述操做是由Window控件的 EnableConfirmOnClose 屬性控制（默認爲false），下面是這個Window實例的標籤訂義：

1 <f:Window ID="Window1" Hidden="true" EnableIFrame="true" runat="server" EnableConfirmOnClose="true"
2     EnableMaximize="true" EnableResize="true" Height="450px" Width="800px" Title="窗體一">
3 </f:Window>

 

對於上述頁面中的"關閉"按鈕，行爲和右上角的關閉圖標一致，不過這種一致性也是認爲控制的，來看看"關閉"按鈕的腳本：

1 protected void Page_Load(object sender, EventArgs e)
2 {
3     if (!IsPostBack)
4     {
5         btnClose.OnClientClick = ActiveWindow.GetConfirmHideReference();
6     }
7 }

 

本章小結

本篇文章介紹了三種關閉Window控件的方法（ESC、關閉圖標、自定義），以及三種FineUI定義的處理方式（隱藏、隱藏後回發、隱藏後刷新）。對於IFrame內的關閉按鈕，FineUI提供了ActiveWindow來生成關閉腳本。同時還介紹了一個FineUI內置的屬性 EnableConfirmOnClose ，用來控制是否彈出關閉窗體的確認對話框。

源代碼與在線示例

本系列全部文章的源代碼都可自行下載：http://fineui.codeplex.com/

在線示例：

1. http://fineui.com/demo/#/demo/window/window.aspx
2. http://fineui.com/demo/#/demo/iframe/window.aspx

 

若是本文對你有所啓發或者幫助，請猛擊「好文要頂」，支持原創，支持三石！

 

24張專業版高清大圖

 

 

 

《FineUI小技巧》系列文章目錄