如何让Gridview在没有数据的时候显示表头

1
．前言

当对

GridView
控件进行数据绑定时，如果绑定的记录为空，网页上就不显示

GridView
，造成页面部分空白，页面布局结构也受影响。下面讨论的方法可以让

GridView
在没有数据记录的时候显示表的字段结构和显示提示信息。

2
．数据

为了让

GridView
显示数据，在数据库中建立表

temple
，其字段如下：

temple
表示庙宇，它的字段有：

temple_id      

int

temple_name  

varchar(50)

location  

varchar(50)

build_date      

datetime

 

temple
的数据为：

temple_id	temple_name	location	build_time
1	少林寺	河南省登封市嵩山	1900-2-2 0:00 :00
2	大杰寺	五龙山	1933-2-3 3:03 :03
3	法源寺	宣武门外教子胡同南端东侧	1941-2-3 5:04 :03
4	广济寺	阜成门内大街东口	1950-3-3 3:03 :03
5	碧云寺	香山东麓	1963-3-3 3:03 :03

 

3
．页面

建立一个

asp.net
网站工程，在页面中添加

GridView
和几个按钮，代码如下所示：

<%
@

Page
Language
="C#"
AutoEventWireup
="true"
 
CodeFile
="Default.aspx.cs"
Inherits
="_Default"

%>

 

<!
DOCTYPE

html
PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<
html

xmlns
="http://www.w3.org/1999/xhtml"
>

<
head

runat
="server">

   
<
title
>
GridView

绑定记录为空显示表头测试</
title
>

</
head
>

<
body
>

   
<
form
id
="form1"
runat
="server">

   
<
div
style
="font-size:13px;">

   
<
asp
:
GridView
ID
="GridViewEmptyDataTest"
runat
="server"
AutoGenerateColumns
="False"
EmptyDataText
="Data Is
Empty"
BackColor
="White"
BorderColor
="LightGray"
BorderStyle
="Double"

BorderWidth
="3px"

         
CellPadding
="4"
GridLines
="Horizontal"
Width
="500px">

           

<
Columns
>

               

<
asp
:
BoundField
DataField
="temple_id"

HeaderText
="temple_id"
Visible
="False"
>

               

</
asp
:
BoundField
>

               
<
asp
:
BoundField
DataField
="temple_name"
HeaderText
="

名称"

>

                   

<
ItemStyle
BorderColor
="LightGray"
BorderStyle
="Double"

BorderWidth
="1px"
Width
="100px"
/>

               

</
asp
:
BoundField
>

               
<
asp
:
BoundField
DataField
="location"

HeaderText
="

地址"

>

                   

<
ItemStyle
BorderColor
="LightGray"
BorderStyle
="Double"

BorderWidth
="1px"
Width
="300px"
/>

               

</
asp
:
BoundField
>

               
<
asp
:
BoundField
DataField
="build_date"
HeaderText
="

建设时间"

>

                   

<
ItemStyle
BorderColor
="LightGray"
BorderStyle
="Double"

BorderWidth
="1px"
Width
="100px"
/>

               

</
asp
:
BoundField
>

           

</
Columns
>

           

<
FooterStyle
BackColor
="White"

ForeColor
="#333333"
/>

           

<
RowStyle
BackColor
="White"

ForeColor
="#333333"
/>

           

<
SelectedRowStyle
BackColor
="#339966"

Font-Bold
="True"
ForeColor
="White"

/>

           

<
PagerStyle
BackColor
="#336666"

ForeColor
="White"
HorizontalAlign
="Center"
/>

           

<
HeaderStyle
BackColor
="CornflowerBlue"
Font-Bold
="True"

ForeColor
="White"
/>

       
</
asp
:
GridView
>

       
<
br
/>

       
<
asp
:
Button
ID
="ButtonHasDataBind"
runat
="server"
Text
="

有数据绑定"

Width
="109px"

OnClick
="ButtonHasDataBind_Click"
/>

       
<
asp
:
Button
ID
="ButtonQueryEmptyBind"
runat
="server"
Text
="

查询结果为空绑定"

Width
="142px"

OnClick
="ButtonQueryEmptyBind_Click"
/>

       
<
asp
:
Button
ID
="ButtonConstructTableBind"
runat
="server"
Text
="

构造空的DataTable
绑定"

Width
="164px"

OnClick
="ButtonConstructTableBind_Click"
/>

       
<
asp
:
Button
ID
="ButtonNormalBind"

runat
="server"

Text
="

普通空数据绑定"

Width
="127px"

OnClick
="ButtonNormalBind_Click"
/></
div
>

   
</
form
>

</
body
>

</
html
>

GridView
要绑定的字段和

temple
的字段一样，在这里我们利用

GridView
原有的功能，设定当数据为空是显示“
Data Is Empty
”，如果没有设定

EmptyDataText

属性，当绑定的记录为空时，GridView
将
不在页面显示。

4
．数据显示

4
．
1
普通空记录显示

编写

ButtonNormalBind

的事件函数

ButtonNormalBind_Click

，添加如下代码，来测试没有经过处理的
GridView

显示情况：

protected

void
ButtonNormalBind_Click(object
sender, EventArgs

e
)

   

{

       
DataTable
dt = new

DataTable
();

 

       

dt.Columns.Add("temple_id"
);

       

dt.Columns.Add("temple_name"
);

       

dt.Columns.Add("location"
);

   
    
dt.Columns.Add("build_date"
);

 

       
this
.GridViewEmptyDataTest.DataSource =
dt;

       
this
.GridViewEmptyDataTest.DataBind();

}

执行这些代码后，GridView

显示结果如下图所示：

   


可以看到这样简单的提示看不出 GridView

的结构来，在大多数的实际应用中我们希望看到GridView
到底有哪些字段。

4
．
2
增加空行来显示

GridView

的结构

我们知道只要 GridView
绑定的 DataTable
有一行记录，GridView
就会显示表头，所以当
DataTable
为空时我们增加一个空行从而显示表头。

我们把代码改成如下所示：

DataTable

dt = new
DataTable
(
);

 

       

dt.Columns.Add("temple_id"
);

       

dt.Columns.Add("temple_name"
);

       

dt.Columns.Add("location"
);

       

dt.Columns.Add("build_date"
);

 

       
if
(dt.Rows.Count ==
0)

       

{

           

dt.Rows.Add(dt.NewRow());

       

}

 

       
this
.GridViewEmptyDataTest.DataSource =
dt;

   
this
.GridViewEmptyDataTest.DataBind();

在每次绑定前判断，如果为空就增加一空行，这样绑定的结果如下图所示：



可以看得表头已经可以显示了，但是显示的空行没有任何数据也让人费解，可不可以增加一下提示信息呢？

4
．
3
增加空记录提示

我们在数据绑定后增加一些代码对
GridView
进行一下处理，让显示结果更友好。在
this

.GridViewEmptyDataTest.DataBind()
;

后面
增加代码如下所示：

   int

columnCount =
dt.Columns.Count
;

       

GridViewEmptyDataTest.Rows[0].Cells.Clear();

       

GridViewEmptyDataTest.Rows[0].Cells.Add(new
TableCell
());

       

GridViewEmptyDataTest.Rows[0].Cells[0].ColumnSpan =
columnCount;

       
GridViewEmptyDataTest.Rows[0].Cells[0].Text =
"

没有记录"

;

   
GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("text-align"
, "center"
)
;

改良后的显示结果如下图所示：



 
看来显示结果已经达到了我们的要求，但是当页面上有其他按钮操作导致页面

PostBack
时，页面再次显示确没有了提示信息变成如下图所示的样子：



 
这并不是我们想要的。

4
．
4
防止

PostBack

时页面显示变化

为了防止显示改变我们在
Page_Load

事件里添加如下代码，从而重新绑定GridView
：

if

(IsPostBack)

       

{

           
//

如果数据为空则重新构造Gridview

           
if
(GridViewEmptyDataTest.Rows.Count == 1 &&
GridViewEmptyDataTest.Rows[0].Cells[0].Text == "

没有记录"

)

           

{

               

int
columnCount =
GridViewEmptyDataTest.Columns.Count;

               

GridViewEmptyDataTest.Rows[0].Cells.Clear();

               

GridViewEmptyDataTest.Rows[0].Cells.Add(new
TableCell
());

               

GridViewEmptyDataTest.Rows[0].Cells[0].ColumnSpan =
columnCount;

               

GridViewEmptyDataTest.Rows[0].Cells[0].Text = "

没有记录"

;

               

GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("text-align"
, "center"
);

           

}

  
}

这下我们的控件终于可以按我们的要求显示了，但是为了代码的重用，当一个项目里有多个

GridView
时，避免充分些相同的代码，我们需要把代码封装成类，从而让所有的

GridView
数据绑定时都可以轻易地实现我们的要求。

4
．
5
封装

类的封装代码如下所示：

using

System.Data
;

using

System.Web.UI.WebControls
;

 

///

<summary>

///

Gridview

绑定的数据记录为空时显示Gridview
的表头，并显示没有记录的提示

///

</summary>

public

class
GridviewControl

{

   
//

当Gridview
数据为空时显示的信息

   
private
static
string
EmptyText
= "

没有记录"

;

 

    
public

GridviewControl()

    

{

        

    

}

 

   
///

<summary>

   
///

防止PostBack
后Gridview
不能显示

   
///

</summary>

   
///

<param
name="gridview"></param>

   
public
static
void
ResetGridView(GridView

gridview)

   

{

       
//

如果数据为空则重新构造Gridview

       
if
(gridview.Rows.Count == 1 &&
gridview.Rows[0].Cells[0].Text == EmptyText)

       

{

           

int
columnCount =
gridview.Columns.Count;

           

gridview.Rows[0].Cells.Clear();

           

gridview.Rows[0].Cells.Add(new
TableCell
());

           

gridview.Rows[0].Cells[0].ColumnSpan =
columnCount;

           

gridview.Rows[0].Cells[0].Text =
EmptyText;

           

gridview.Rows[0].Cells[0].Style.Add("text-align"
, "center"
);

       

}

   

}

 

   
///

<summary>

   
///

绑定数据到GridView
，当表格数据为空时显示表头

   
///

</summary>

   
///

<param
name="gridview"></param>

   
///

<param
name="table"></param>

   
public
static
void
GridViewDataBind(GridView
gridview, DataTable
table)

   

{

       
//

记录为空重新构造Gridview

       
if
(table.Rows.Count ==
0)

       

{

           

table = table.Clone();

           

table.Rows.Add(table.NewRow());

           

gridview.DataSource = table;

           

gridview.DataBind();

           

int
columnCount =
table.Columns.Count;

           

gridview.Rows[0].Cells.Clear();

           

gridview.Rows[0].Cells.Add(new
TableCell
());

           

gridview.Rows[0].Cells[0].ColumnSpan =
columnCount;

           

gridview.Rows[0].Cells[0].Text =
EmptyText;

           

gridview.Rows[0].Cells[0].Style.Add("text-align"
, "center"
);

       

}

       
else

       

{

           
//

数据不为空直接绑定

           

gridview.DataSource = table;

           

gridview.DataBind();

       

}

 

       
//

重新绑定取消选择

       

gridview.SelectedIndex = -1;

   

}

}

你可以把这个类编译成

DLL
，让各个地方调用。

4
．
6
使用示例

这个类的使用很简单，就是在每次进行数据绑定是调用

GridViewDataBind

，这个函数的第一个参数是要绑定数据的
GridView

第二个参数是包含数据字段列的 DataTable

，可能为空可能不空，如果数据不空，函数则自动进行正常绑定，否则显示“没有记录”的提示。

上面的按钮事件的代码可以改成如下所示：

DataTable

dt = new
DataTable

();

       

dt.Columns.Add("temple_id"
);

       

dt.Columns.Add("temple_name"
);

       

dt.Columns.Add("location"
);

       

dt.Columns.Add("build_date"
);

GridviewControl

.GridViewDataBind(this
.GridViewEmptyDataTest,
dt
);

最后在

Page_Load

中
对本页面所有

GridView

调用

ResetGridVie
w
函数，如下所示：

if

(IsPostBack
)

       

{

           

GridviewControl
.ResetGridView(this
.GridViewEmptyDataTest);

   
}

 

在此提供一个网站测试源码，可以按照
2
中所说的数据表建立
test
数据库，并在表中加入相应数据进行测试，记得把连接串改一下哦。

5
．总结

   MS 的 asp.net
为我们提供了方便好用的控件，如果适当地对这些控件的使用方法作些小改动就能做出更加完美的效果来。