[ASP.NET 控制項實作 Day6] 事件與 PostBack

一般類別的事件撰寫很單純，不過在 ASP.NET 中與前端使用者互動產生的事件就不是那麼簡單了；在以往的 ASP 年代是沒有事件這回事的，而在 ASP.NET 把網頁程式撰寫真正的對象導向化，用戶端使用者的操作透過 PostBack 來產生相對應的事件。例如前端使用者按鈕後會引發伺服端 Button 的 Click 事件，當前端使用者輸入文字框完畢後離開後會引發伺服端 TextBox 的 TextChanged 事件，在本文中就是要說明如何透過 PostBack 來產生與使用者互動的事件。

 

一、IPostBackEventHandler 與 IPostBackDataHandler 介面

控制項要處理 PostBack 產生的事件，必須實作 IPostBackEventHandler 或 IPostBackDataHandler 介面，這二個介面有什麼差別呢？例如 Button 是實作IPostBackEventHandler 介面，由控制項產生的 PostBack 直接引發事件，如 Button 的 Click 事件。例如 TextBox 是實作 IPostBackDataHandler 介面，當頁面產生 PostBack 時，會傳用戶端輸入的新值給控制項，由控制項本身去決定是否引發該事件；以 TextBox 舉例來說，它會判斷新值與舊值不同時才會引發 TextChanged 事件。

 

二、IPostBackEventHandler 介面實作

首先介紹 IPostBackEventHandler 介面，它包含 RaisePostBackEvent 方法，控制項在此方法中需處理要引發那些事件。我們繼承 WebControl 撰寫 MyButton 類別來說明 IPostBackEventHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入按鈕的 HTML 原始碼，並定義一個 Click 事件。實作 IPostBackEventHandler 介面的 RaisePostBackEvent 方法，在此方法中直接引發 Click 事件。

<ToolboxData("<{0}:MyButton runat=server></{0}:MyButton>")> _

Public Class MyButton

    Inherits WebControl

    Implements IPostBackEventHandler

    ''' <summary>

    ''' Click 事件。

    ''' </summary>

    Public Event Click As EventHandler

    ''' <summary>

    ''' 引發 Click 事件。

    ''' </summary>

    Private Sub OnClick(ByVal e As EventArgs)

        RaiseEvent Click(Me, e)

    End Sub

    Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent

        Dim e As New EventArgs()

        OnClick(e) '引發 Click 事件

    End Sub

    ''' <summary>

    ''' 覆寫 Render 方法。

    ''' </summary>

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

        Dim sHTML As String

        sHTML = String.Format("<INPUT TYPE=Submit Name={0} Value = '按鈕'/>", Me.UniqueID)

        writer.Write(sHTML)

    End Sub

End Class

 

在頁面上拖曳 MyButton 控制項，在屬性視窗找到 Click 事件，點二下產生 Click 事件處理函式，並撰寫測試程式碼如下。

    Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click

        Me.Page.Response.Write("MyButton Click 事件")

    End Sub

 

執行程式，當按下 MyButton 按鈕時，就會執行它的 RaisePostBackEvent 方法，進而引發 Click 事件，也就會執行 Click 事件處理函式的程式碼。

 
 

三、IPostBackDataHandler 介面實作

IPostBackDataHandler 介面包含 LoadPostData 及 RaisePostDataChangedEvent 方法，當頁面 PostBack 時，會尋找具 IPostBackDataHandler 介面的控制項，先執行LoadPostData 方法，控制項在 LoadPostData 方法中會判斷用戶端傳入值決定是否引發事件，若 LoadPostData 傳回 True 表示要引發事件，此時會執行RaisePostDataChangedEvent 方法去決定要引發那些事件，反之傳回 False 表示不引發事件。

我們繼承 WebControl 撰寫 MyText 類別來說明 IPostBackDataHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入文字框的 HTML 原始碼，並定義一個 TextChanged 事件。在 LoadPostData 方法中我們會判斷用戶端傳入值與目前的值是否不相同，不相同時才會傳回 True，此時才會執行 RaisePostDataChangedEvent 方法，進而引發  TextChanged 事件。

<ToolboxData("<{0}:MyTextbox runat=server></{0}:MyTextbox>")> _

Public Class MyTextbox

    Inherits WebControl

    Implements IPostBackDataHandler

    Public Property Text() As String

        Get

            Return CType(Me.ViewState("Text"), String)

        End Get

        Set(ByVal value As String)

            Me.ViewState("Text") = value

        End Set

    End Property

    ''' <summary>

    ''' TextChanged 事件。

    ''' </summary>

    Public Event TextChanged As EventHandler

    ''' <summary>

    ''' 引發 TextChanged 事件。

    ''' </summary>

    Private Sub OnTextChanged(ByVal e As EventArgs)

        RaiseEvent TextChanged(Me, e)

    End Sub

    Public Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As System.Collections.Specialized.NameValueCollection) As Boolean Implements System.Web.UI.IPostBackDataHandler.LoadPostData

        '前端使用者輸入值

        Dim oNewValue As String = postCollection.Item(postDataKey)

        If oNewValue <> Me.Text Then

            Me.Text = oNewValue

            Return True

        Else

            Return False

        End If

    End Function

    Public Sub RaisePostDataChangedEvent() Implements System.Web.UI.IPostBackDataHandler.RaisePostDataChangedEvent

        Dim e As New EventArgs()

        '引發 TextChanged 事件

        OnTextChanged(e)

    End Sub

    ''' <summary>

    ''' 覆寫 Render 方法。

    ''' </summary>

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

        Dim sHTML As String

        sHTML = String.Format("<INPUT Type=text Name={0} Value={1} >", Me.UniqueID, Me.Text)

        writer.Write(sHTML)

    End Sub

End Class

 

在頁面上拖曳 MyTextbox 及 MyButton 控制項，在 MyButton 的 Click 及 MyTextbox 的 TextChanged 事件撰寫如下測試程式碼。

    Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click

        Me.Page.Response.Write("MyButton Click 事件")

        Me.Page.Response.Write("<br/>")

    End Sub

    Protected Sub MyTextbox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyTextbox1.TextChanged

        Me.Page.Response.Write("MyTextbox TextChanged 事件")

        Me.Page.Response.Write("<br/>")

    End Sub

 

執行程式，第一次 MyTextbox 不輸入值，直接按下 MyButton，此時只會引發 MyButton Click 事件。

 

第二次在 MyTextbox 輸入 "A"，再按下 MyButton，因為 MyTextbox 的值「Null 字元串->"A"」，所以會引發 MyTextbox 的 TextChanged 事件及 MyButton 的 Click 事件。

 

備忘：本文同步發佈於「第一屆iT邦幫忙鐵人賽」，如果你覺得這篇文章對您有協助，記得連上去推鑒此文增加人氣 ^^
http://ithelp.ithome.com.tw/question/10011861