擴展 CommandField 類別 - Header 加入新增鈕
摘要
延續前面「GridView+FormView 示範資料 新增/修改/刪除(進階篇：伺服器控制項)」的文章，文章後記有提及若要達到零程式碼要求，其中一個要件就是需要擴展 CommandField 類別，在 CommandField 的 Header 的部分加入「新增」鈕，本文就是在說明如何擴展 CommandField 類別達到此需求。
擴展 CommandField 類別
我們的需求是在 CommandField 的 Header 加入新增鈕，作法是繼承 CommandField 下來命名為 TBCommandField，新增 ShowHeaderInsertButton 屬性，來設定 Header 是否顯示新增鈕。TBCommandField 的程式碼如下，作法是覆寫 InitializeCell 方法，若為 Header 且有設定 ShowHeaderInsertButton="True" 則利用 AddButtonToCell 私有方法來加入「新增」鈕。
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Globalization
Namespace WebControls
Public Class TBCommandField
Inherits CommandField
Private FShowHeaderInsertButton As Boolean = False
''' <summary>
''' 初始化儲存格。
''' </summary>
''' <param name="cell">要初始化的儲存格。</param>
''' <param name="cellType">儲存格類型。</param>
''' <param name="rowState">儲存格狀態。</param>
''' <param name="rowIndex">資料列之以零起始的索引。</param>
Public Overrides Sub InitializeCell(ByVal cell As DataControlFieldCell, ByVal cellType As DataControlCellType, ByVal rowState As DataControlRowState, ByVal rowIndex As Integer)
MyBase.InitializeCell(cell, cellType, rowState, rowIndex)
If Me.ShowHeaderInsertButton AndAlso (cellType = DataControlCellType.Header) Then
'標題加入新增鈕
AddButtonToCell(cell, "New", Me.InsertText, Me.CausesValidation, Me.ValidationGroup, rowIndex, Me.InsertImageUrl)
End If
End Sub
''' <summary>
''' 標題儲存格是否顯示新增鈕。
''' </summary>
< _
Description("標題儲存格是否顯示新增鈕"), _
DefaultValue(False) _
> _
Public Property ShowHeaderInsertButton() As Boolean
Get
Return FShowHeaderInsertButton
End Get
Set(ByVal value As Boolean)
If FShowHeaderInsertButton <> value Then
FShowHeaderInsertButton = value
Me.OnFieldChanged()
End If
End Set
End Property
''' <summary>
''' 儲存格加入按鈕。
''' </summary>
''' <param name="Cell">儲存格。</param>
''' <param name="CommandName">按鈕命令。</param>
''' <param name="ButtonText">按鈕文字。</param>
''' <param name="CausesValidation">是否執行驗證。</param>
''' <param name="ValidationGroup">驗證控制項所屬之驗證群組的名稱。</param>
''' <param name="RowIndex">列索引。</param>
''' <param name="ImageUrl">影像網址。</param>
Private Sub AddButtonToCell(ByVal Cell As DataControlFieldCell, ByVal CommandName As String, ByVal ButtonText As String, ByVal CausesValidation As Boolean, ByVal ValidationGroup As String, ByVal RowIndex As Integer, ByVal ImageUrl As String)
Dim oButtonControl As IButtonControl
Select Case Me.ButtonType
Case ButtonType.Button
oButtonControl = New Button()
Exit Select
Case ButtonType.Link
oButtonControl = New LinkButton()
Case Else
oButtonControl = New ImageButton()
DirectCast(oButtonControl, ImageButton).ImageUrl = ImageUrl
Exit Select
End Select
oButtonControl.Text = ButtonText
oButtonControl.CommandName = CommandName
oButtonControl.CommandArgument = RowIndex.ToString(CultureInfo.InvariantCulture)
oButtonControl.CausesValidation = CausesValidation
oButtonControl.ValidationGroup = ValidationGroup
Cell.Controls.Add(DirectCast(oButtonControl, WebControl))
End Sub
''' <summary>
''' 建立新的 TBCommandField 物件。
''' </summary>
Protected Overrides Function CreateField() As DataControlField
Return New TBCommandField()
End Function
''' <summary>
''' 將目前 TBCommandField 物件的屬性複製到指定之 DataControlField 物件。
''' </summary>
''' <param name="newField">目的 DataControlField 物件。</param>
Protected Overrides Sub CopyProperties(ByVal NewField As DataControlField)
Dim oNewField As TBCommandField
oNewField = DirectCast(NewField, TBCommandField)
oNewField.ShowHeaderInsertButton = Me.ShowHeaderInsertButton
MyBase.CopyProperties(NewField)
End Sub
End Class
End Namespace使用 TBCommandField 類別
因為 GridView.Columns 的屬性編輯器不支援我們改寫 TBCommandField，故只能切換至 aspx 程式碼中手動加入。
<bee:TBCommandField ShowHeaderInsertButton="True" InsertText="新增" ShowEditButton="True" ShowDeleteButton="True" ButtonType="Button" />切換至設計畫面，就可以看到 TBCommandField 的 Header 出現「新增」鈕。
備註：若要讓 GridView 的欄位編輯器支援 TBCommandField，需自訂 GridView.Columns 的屬性編輯器。