(尚未設定標題)－King的幸福國度

以下這篇文章轉載於「ASP.NET 魔法學院」

摘要

當 GridView 繫結的 DataSource 資料筆數為 0 時，會依 EmptyDataTemplate 及 EmptyDataText 的設定來顯示無資料的狀態。若我們希望 GridView 在無資料時，可以顯示欄位標題，有一種作法是在 EmptyDataTemplate 中手動在設定一個標題列，不過這種作法很麻煩。GridView 控制項可不可以直接透過屬性設定就可以在無資料顯示欄位標題呢？答案是肯定的，本文將擴展 GridView 控制項來達成此需求。

擴展 GridView 控制項

我們繼承 GridView 命名為 TBGridView，新增一個 EmptyShowHeader 屬性，來設定無資料時是否顯示欄位標題。覆寫 CreateChildControls 方法，當 Mybase.CreateChildControls 傳回 0 時，表示 DataSource 無資料，此時就呼叫 CreateEmptyTable 方法來建立無資料只顯示標題的表格。

在 CreateEmptyTable 方法中，會複製 Columns 的集合，來輸出所有欄位的標題列。接下來會在標題列下方新增一列合併的資料列，用來顯示無資料時的顯示文字，即顯示 EmptyDataText 屬性值。

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.Drawing

Namespace WebControls
    < _
    Description("TBGridView 控制項"), _
    ToolboxData("<{0}:TBGridView runat=server></{0}:TBGridView>") _
    > _
    Public Class TBGridView
        Inherits GridView
        Private FEmptyShowHeader As Boolean = True

        ''' <summary>
        ''' 無資料時是否顯示欄位標題。
        ''' </summary>
        Public Property EmptyShowHeader() As Boolean
            Get
                Return FEmptyShowHeader
            End Get
            Set(ByVal value As Boolean)
                FEmptyShowHeader = value
            End Set
        End Property


        ''' <summary>
        ''' 建立子控制項。
        ''' </summary>
        ''' <param name="dataSource">控制項的資料來源。</param>
        ''' <param name="dataBinding">true 指示子控制項繫結至資料，否則為 false。</param>
        ''' <returns>建立的資料列數目。</returns>
        Protected Overrides Function CreateChildControls(ByVal DataSource As System.Collections.IEnumerable, ByVal DataBinding As Boolean) As Integer
            Dim iRowCount As Integer
            Dim oTable As Table

            iRowCount = MyBase.CreateChildControls(DataSource, DataBinding)
            If Me.EmptyShowHeader AndAlso (iRowCount = 0) Then
                oTable = CreateEmptyTable()
                Me.Controls.Clear()
                Me.Controls.Add(oTable)
            End If
            Return iRowCount 
        End Function

        ''' <summary>
        ''' 建立無資料只顯示標題的表格。
        ''' </summary>
        Private Function CreateEmptyTable() As Table
            Dim oTable As Table
            Dim oGridViewRow As GridViewRow
            Dim oCell As TableCell
            Dim iCount As Integer
            Dim e As GridViewRowEventArgs

            oTable = MyBase.CreateChildTable()
            iCount = Me.Columns.Count - 1

            '建立標題列
            oGridViewRow = MyBase.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal)
            Dim oFields(iCount) As DataControlField
            Me.Columns.CopyTo(oFields, 0)               '取得目前定義 Columns 複本
            Me.InitializeRow(oGridViewRow, oFields)     '資料列初始化 
            e = New GridViewRowEventArgs(oGridViewRow)
            Me.OnRowCreated(e)                          '引發 RowCreated 事件
            oTable.Rows.Add(oGridViewRow)

            '建立空白的資料列
            oGridViewRow = New GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
            oCell = New TableCell()
            oCell.ColumnSpan = oFields.Length
            oCell.Width = Unit.Percentage(100)
            oCell.Text = Me.EmptyDataText
            oCell.HorizontalAlign = UI.WebControls.HorizontalAlign.Center
            oGridViewRow.Cells.Add(oCell)
            oTable.Rows.Add(oGridViewRow)

            Return oTable
        End Function

    End Class
End Namespace

測試程式

我們拖曳一個 TBGridView 控制項至頁面上，設定 EmptyShowHeader="True"。

<bee:TBGridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            EmptyShowHeaer="True" EmptyDataText="沒有資料錄可顯示。" AllowPaging="True" DataKeyNames="EmployeeID" CellPadding="4" ForeColor="#333333" GridLines="None">

執行程式，當 GridView 有資料時的畫面如下