<< 動態產生表格及事件攔截 | Home | Calendar 動態產生子控制項的 Event Handler >>

在之前 動態產生表格及事件攔截 的文章中，有示範如何「動態產生了 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 魔法學院


2008/3/17 00:46| 閱讀數 : 3816 | 我要推薦 | 6 Comments | 文章分類: 動態建立控制項 常見問題 訂閱

DotBlogs Tags: 動態建立控制項

Feedback

  • 詹姆士 2008/11/25 上午 12:25 回覆

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

    那個... 文章中的超連結網址，都會變成 file://... 應該不是我的問題吧 ^^"

    (看完後可以把我砍了)

  • Eric 2009/8/19 上午 09:32 回覆

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

    請問大大!
    那如果要把每一列所產生的button變成是要刪除所在的那行時
    我該怎麼做呢？
    我用remove把整行拿掉後是沒問題，但是再按一次新增時，新增行並不會從最底下新增，而會直接從被刪除的那一行新增，請問有什麼解決方法嗎？
    麻煩大大了!

  • jubo 2009/12/16 上午 10:45 回覆

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

    請問我要如何取用使用者在產生出來的textbox輸入的內容值?

  • jubo 2009/12/16 下午 04:24 回覆

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


    可以抓到值了 只要定義textbox的id就可以

    不過我還有個好奇的問題
    看似按一次按鈕就會新產生一個多一row的table
    但為什麼在前面控制項輸入的值還是會保留呢?
    難道他不是整個table重新create嗎!!?
    勞煩解答THX~

  • 91 2009/12/16 下午 07:01 回覆

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

    to jubo :

    因為viewstate是在Page_Init()與Page_Load()中間才load進來。

    所以動態建立control，如果在Page_Init()事件，ASP.NET(或許說webcontrol更合適)會幫他建立相關的viewstate。

    當postback的時候，當你下次在Page_Init重新建立control時，在經過loadviewstate，就會把上一頁(其實是同一個page)的viewstate重載進來。

    所以畫面上的控制項就能保留剛剛client端輸入的值。

  • jubo 2009/12/21 上午 09:45 回覆

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

    啊原來中間那關viewstate的作用是這樣 看來我觀念還很淺
    又學到了~
    非常感謝

標題 *
名稱 *
Email (將不會被顯示)
Url
回應
登入後使用進階評論
Please add 3 and 2 and type the answer here: