動態產生表格及事件攔截 Part2

動態產生表格及事件攔截 Part2

在之前 動態產生表格及事件攔截 的文章中,有示範如何「動態產生了 3 列 2 欄的表格及事件攔截」;本文將以這個範例延伸,當按一下按鈕就動態在表格中加入一筆新的資料列。

首先在頁面上放置一個 ID="btnAddRow" 的 Button,設定其屬性 UseSubmitBehavior="False" ,在 aspx 中的程式碼如下

 

    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnAddRow" runat="server" Text="Button" UseSubmitBehavior="False" /></div>
    </form>

 

在此範例中,利用了一個 HiddenField 來記錄 Table 的資料列數,並由 Request.Form("__EVENTTARGET") 判斷是否由 btnAddRow 按鈕產生的 PostBack。

*.aspx.vb

 

Partial Class _Default
    Inherits System.Web.UI.Page

    Private FRowCount As Integer
    Private FRowCountField As New HiddenField()

    ''' <summary>
    ''' 動態產生 Table。
    ''' </summary>
    Private Sub CreateTable(ByVal RowCount As Integer)
        Dim oTable As New Table()
        Dim oRow As TableRow
        Dim oCell As TableCell
        Dim oButton As Button
        Dim oTextBox As TextBox
        Dim N1 As Integer

        Me.Form.Controls.Add(oTable)
        '建立3列1欄的,其中第1欄置放 Button,第2欄置放 TextBox
        For N1 = 1 To RowCount
            oRow = New TableRow()
            oTable.Rows.Add(oRow)

            oCell = New TableCell()
            oRow.Cells.Add(oCell)
            oButton = New Button
            oButton.Text = "Button" & N1.ToString()
            '將 Button 的 Click 事件導向 Button_Click 函式  
            AddHandler oButton.Click, AddressOf Button_Click
            oCell.Controls.Add(oButton)

            oCell = New TableCell()
            oRow.Cells.Add(oCell)
            oTextBox = New TextBox()
            oTextBox.Text = "TextBox" & N1.ToString()
            oCell.Controls.Add(oTextBox)
        Next
    End Sub


    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        FRowCountField.ID = "__RowCount"
        Me.Form.Controls.Add(FRowCountField)

        '取得上次記錄的資料列數
        If Me.Request.Form(FRowCountField.UniqueID) Is Nothing Then
            FRowCount = 0
        Else
            FRowCount = CInt(Me.Request.Form(FRowCountField.UniqueID))
        End If

        '由 Request.Form("__EVENTTARGET") 判斷是否由 btnAddRow 按鈕產生的 PostBack
        If Me.Request.Form("__EVENTTARGET") = btnAddRow.UniqueID Then
            FRowCount = FRowCount + 1
        End If

        CreateTable(FRowCount) '動態產生 Table。
    End Sub


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        FRowCountField.Value = FRowCount.ToString()
    End Sub


    'Table 中所有的 Button 的 Click 事件導向函數  
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim oButton As Button
        Dim oRow As TableRow
        Dim oCell As TableCell

        Dim oTextBox As TextBox = Nothing

        oButton = CType(sender, Button)
        oCell = CType(oButton.Parent, TableCell)
        oRow = CType(oCell.Parent, TableRow)

        '取得內含 TextBox 的 Cell,即第2欄
        oTextBox = CType(oRow.Cells(1).Controls(0), TextBox)
        oTextBox.Text = oButton.Text
    End Sub



End Class

ASP.NET 魔法學院