文章出處

前言

FineUI中的絕大部分回發事件都是由控件觸發了，比如按鈕的點擊事件，下拉列表的改變事件，表格的排序分頁事件。但有時我們可能會要自己觸發頁面回發，這時就要知道怎么使用 JavaScript 來做了，當然這個過程還是 FineUI 所默認支持的AJAX。

手工調用__doPostBack函數

相信每一位使用ASP.NET WebForms的同學都知道這個著名的函數，因為幾乎每個頁面的源代碼中都能看到他的身影：

 1 <script type="text/javascript">
 2 var theForm = document.forms['_form1'];
 3 if (!theForm) {
 4     theForm = document._form1;
 5 }
 6 function __doPostBack(eventTarget, eventArgument) {
 7     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
 8         theForm.__EVENTTARGET.value = eventTarget;
 9         theForm.__EVENTARGUMENT.value = eventArgument;
10         theForm.submit();
11     }
12 }
13 </script>

這個函數接受兩個參數，分別是事件源（eventTarget）和事件參數（eventArgument），用來提交表單（也即頁面回發）。

FineUI在頁面初始化時會攔截這個函數，并把他改造成AJAX過程，當然這個過程對開發人員是透明的，你依然只需要調用這個函數，整個過程卻是FineUI的AJAX形式。

下面看個示例：

在第一個文本輸入框中輸入一些字符，并按回車鍵

 1 <script type="text/javascript">
 2     var textbox1ID = '<%= TextBox1.ClientID %>';
 3 
 4     F.ready(function () {
 5 
 6         F(textbox1ID).on("specialkey", function (box, e) {
 7             if (e.getKey() == e.ENTER) {
 8                 __doPostBack('', 'TextBox1_ENTER');
 9             }
10         });
11 
12     });
13 
14 </script>

注意其中對__doPostBack的調用，將事件參數定義為TextBox1_ENTER。

自定義的JavaScript代碼會捕獲這個事件并回發頁面，后臺C#代碼將第二個文本輸入框的值用第一個輸入框值填充

 1 protected void Page_Load(object sender, EventArgs e)
 2 {
 3     if (IsPostBack)
 4     {
 5         if (GetRequestEventArgument() == "TextBox1_ENTER")
 6         {
 7             TextBox2.Text = TextBox1.Text;
 8             TextBox2.Focus(true);
 9         }
10     }
11 }

1 public string GetRequestEventArgument()
2 {
3     return Request.Form["__EVENTARGUMENT"];
4 }

注意，由于沒有依附于某個控件的服務器端事件，所以處理放在 if(IsPostBack) 中進行。

手工調用F.customEvent函數

對于上述調用，FineUI進行了簡單的封裝：由于每個頁面都需要PageManager控件，所以可以把讓PageManager來處理用戶定義回發事件。

現在的代碼更清晰了：

為PageManager定義CustomEvent事件聲明，以及處理函數

<f:PageManager ID="PageManager1" OnCustomEvent="PageManager1_CustomEvent" runat="server" />

1 protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)
2 {
3     if (e.EventArgument == "TextBox1_ENTER")
4     {
5         TextBox2.Text = TextBox1.Text;
6         TextBox2.Focus(true);
7     }
8 }

將對__doPostBack的調用，改為對 F.customEvent 的調用

 1 <script type="text/javascript">
 2     var textbox1ID = '<%= TextBox1.ClientID %>';
 3 
 4     F.ready(function () {
 5 
 6         F(textbox1ID).on("specialkey", function (box, e) {
 7             if (e.getKey() == e.ENTER) {
 8                 F.customEvent('TextBox1_ENTER');
 9             }
10         });
11 
12     });
13 
14 </script>

響應確認對話框的“確定”和“取消”按鈕

來看下滿足這個常見需求的示例：

頁面上有一個按鈕，點擊彈出確認對話框

頁面標簽如下（注意PageManager的CustomEvent事件和按鈕的EnablePostBack參數）：

1 <f:PageManager ID="PageManager1" OnCustomEvent="PageManager1_CustomEvent" runat="server" />
2 <f:Button Text="操作（點擊確定、取消都會回發頁面）" runat="server" ID="btnOperation" EnablePostBack="false">
3 </f:Button>

按鈕的點擊事件是在后臺通過C#代碼注冊的JavaScript腳本完成的：

 1 protected void Page_Load(object sender, EventArgs e)
 2 {
 3     if (!IsPostBack)
 4     {
 5         btnOperation.OnClientClick = Confirm.GetShowReference("確認執行操作？", 
 6             String.Empty, 
 7             MessageBoxIcon.Question, 
 8             PageManager1.GetCustomEventReference("Confirm_OK"),
 9             PageManager1.GetCustomEventReference("Confirm_Cancel"));
10     }
11 }

PageManager實例的GetCustomEventReference用來返回頁面回發的腳本。

點擊對話框的“確定”和“取消”按鈕，都會進行響應

 1 protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)
 2 {
 3     if (e.EventArgument == "Confirm_OK")
 4     {
 5         Alert.Show("執行了確定操作！");
 6     }
 7     else if (e.EventArgument == "Confirm_Cancel")
 8     {
 9         Alert.Show("執行了取消操作！");
10     }
11 }

本章小結

本篇文章介紹了如何調用__doPostBack函數進行頁面回發，注意這個回發過程已經被FineUI改造成了AJAX。FineUI還提供了F.customEvent函數來取代__doPostBack函數的工作，以便產生更加直觀的代碼。最后，我們實現了對確認對話框（Confirm）的“確定”和“取消”按鈕的響應，同樣我們也可以實現對Alert對話框按鈕的響應。