動態產生表格及事件攔截 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>
<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
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