本文档介绍了如何在ASP.NET的GridView控件中，当数据为空时仍能显示表头并提供友好的无数据提示信息。通过在数据绑定前后添加特定处理，实现了即使数据记录为空，也能保持页面布局的完整性。文章提供了详细的代码示例和步骤，包括增加空行显示表头、增加提示信息以及防止PostBack时页面显示变化的方法。
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 为我们提供了方便好用的控件，如果适当地对这些控件的使用方法作些小改动就能做出更加完美的效果来。
扫一扫
2226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
