摘要

延續前面「GridView+FormView 示範資料 新增/修改/刪除(進階篇：伺服器控制項)」的文章，文章後記有提及若要達到零程式碼要求，其中一個要件就是需要擴展 CommandField 類別，在 CommandField 的 Header 的部分加入「新增」鈕，本文就是在說明如何擴展 CommandField 類別達到此需求。

擴展 CommandField 類別

我們的需求是在 CommandField 的 Header 加入新增鈕，作法是繼承 CommandField 下來命名為 TBCommandField，新增 ShowHeaderInsertButton 屬性，來設定 Header 是否顯示新增鈕。TBCommandField 的程式碼如下，作法是覆寫 InitializeCell 方法，若為 Header 且有設定 ShowHeaderInsertButton="True" 則利用 AddButtonToCell 私有方法來加入「新增」鈕。

 

view plaincopy to clipboardprint?
  1. Imports System   
  2. Imports System.Collections.Generic   
  3. Imports System.ComponentModel   
  4. Imports System.Text   
  5. Imports System.Web   
  6. Imports System.Web.UI   
  7. Imports System.Web.UI.WebControls   
  8. Imports System.Globalization   
  9.   
  10. Namespace WebControls   
  11.     Public Class TBCommandField   
  12.         Inherits CommandField   
  13.   
  14.         Private FShowHeaderInsertButton As Boolean = False  
  15.   
  16.         '''    
  17.         ''' 初始化儲存格。   
  18.         '''    
  19.         ''' 要初始化的儲存格。   
  20.         ''' 儲存格類型。   
  21.         ''' 儲存格狀態。   
  22.         ''' 資料列之以零起始的索引。   
  23.         Public Overrides Sub InitializeCell(ByVal cell As DataControlFieldCell, ByVal cellType As DataControlCellType, ByVal rowState As DataControlRowState, ByVal rowIndex As Integer)   
  24.             MyBase.InitializeCell(cell, cellType, rowState, rowIndex)   
  25.   
  26.             If Me.ShowHeaderInsertButton AndAlso (cellType = DataControlCellType.Header) Then  
  27.                 '標題加入新增鈕   
  28.                 AddButtonToCell(cell, "New", Me.InsertText, Me.CausesValidation, Me.ValidationGroup, rowIndex, Me.InsertImageUrl)   
  29.             End If  
  30.         End Sub  
  31.   
  32.         '''    
  33.         ''' 標題儲存格是否顯示新增鈕。   
  34.         '''    
  35.         < _   
  36.         Description("標題儲存格是否顯示新增鈕"), _   
  37.         DefaultValue(False) _   
  38.         > _   
  39.         Public Property ShowHeaderInsertButton() As Boolean  
  40.             Get  
  41.                 Return FShowHeaderInsertButton   
  42.             End Get  
  43.             Set(ByVal value As Boolean)   
  44.                 If FShowHeaderInsertButton <> value Then  
  45.                     FShowHeaderInsertButton = value   
  46.                     Me.OnFieldChanged()   
  47.                 End If  
  48.             End Set  
  49.         End Property  
  50.   
  51.         '''    
  52.         ''' 儲存格加入按鈕。   
  53.         '''    
  54.         ''' 儲存格。   
  55.         ''' 按鈕命令。   
  56.         ''' 按鈕文字。   
  57.         ''' 是否執行驗證。   
  58.         ''' 驗證控制項所屬之驗證群組的名稱。   
  59.         ''' 列索引。   
  60.         ''' 影像網址。   
  61.         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)   
  62.             Dim oButtonControl As IButtonControl   
  63.   
  64.             Select Case Me.ButtonType   
  65.                 Case ButtonType.Button   
  66.                     oButtonControl = New Button()   
  67.                     Exit Select  
  68.                 Case ButtonType.Link   
  69.                     oButtonControl = New LinkButton()   
  70.                 Case Else  
  71.                     oButtonControl = New ImageButton()   
  72.                     DirectCast(oButtonControl, ImageButton).ImageUrl = ImageUrl   
  73.                     Exit Select  
  74.             End Select  
  75.             oButtonControl.Text = ButtonText   
  76.             oButtonControl.CommandName = CommandName   
  77.             oButtonControl.CommandArgument = RowIndex.ToString(CultureInfo.InvariantCulture)   
  78.             oButtonControl.CausesValidation = CausesValidation   
  79.             oButtonControl.ValidationGroup = ValidationGroup   
  80.             Cell.Controls.Add(DirectCast(oButtonControl, WebControl))   
  81.         End Sub  
  82.   
  83.         '''    
  84.         ''' 建立新的 TBCommandField 物件。    
  85.         '''    
  86.         Protected Overrides Function CreateField() As DataControlField   
  87.             Return New TBCommandField()   
  88.         End Function  
  89.   
  90.         '''    
  91.         ''' 將目前 TBCommandField 物件的屬性複製到指定之 DataControlField 物件。   
  92.         '''    
  93.         ''' 目的 DataControlField 物件。   
  94.         Protected Overrides Sub CopyProperties(ByVal NewField As DataControlField)   
  95.             Dim oNewField As TBCommandField   
  96.   
  97.             oNewField = DirectCast(NewField, TBCommandField)   
  98.             oNewField.ShowHeaderInsertButton = Me.ShowHeaderInsertButton   
  99.             MyBase.CopyProperties(NewField)   
  100.         End Sub  
  101.   
  102.     End Class  
  103. End Namespace  

使用 TBCommandField 類別

因為 GridView.Columns 的屬性編輯器不支援我們改寫 TBCommandField，故只能切換至 aspx 程式碼中手動加入。

view plaincopy to clipboardprint?
  1. <　bee:TBCommandField ShowHeaderInsertButton="True" InsertText="新增" ShowEditButton="True" ShowDeleteButton="True" ButtonType="Button"  />  

切換至設計畫面，就可以看到 TBCommandField 的 Header 出現「新增」鈕。

image

 

備註：若要讓 GridView 的欄位編輯器支援 TBCommandField，需自訂 GridView.Columns 的屬性編輯器。