如何让Gridview在没有数据的时候显示表头(asp.net)

原文:如何让Gridview在没有数据的时候显示表头(asp.net)

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调用ResetGridView函数，如下所示：

if (IsPostBack)

{

GridviewControl.ResetGridView(this.GridViewEmptyDataTest);

}

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

测试源码：http://dl2.csdn.net/down4/20071008/08205401208.rar

5．总结

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

如何让Gridview在没有数据的时候显示表头(asp.net)

时间： 2024-12-08 19:59:14

如何让Gridview在没有数据的时候显示表头(asp.net)的相关文章

如何让Gridview在没有数据的时候显示表头[没有使用SqlDataSource控件时]

原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 要看全文请点击http://blog.csdn.net/windok2004/archive/2007/10/28/1852554.aspx 我们知道只要GridView绑定的DataTable有一行记录，GridView就会显示表头，所以当DataTable为空时 我们增加一个空行从而显示表头。 我们把代码改成如下所示： DataTable dt = new DataTable();         dt.C

在DevExpress程序中使用GridView直接录入数据的时候，增加列表选择的功能

在我上篇随笔<在DevExpress程序中使用Winform分页控件直接录入数据并保存>中介绍了在GridView以及在其封装的分页控件上做数据的直接录入的处理,介绍情况下数据的保存和校验等操作,不过还没有涉及到数据列表选择的这种方式,而这种在项目应用也是比较广泛的一种输入方式.本篇随笔继续探讨在GridView上直接录入数据,并增加字典选择列表的功能. 1.GridView直接录入数据回顾 在之前整合的数据录入案例里面,我们可以看到可以在列表里面直接录入速度的便捷性,如下所示. 1)直接在G

扩展：gridview 空数据时显示表头

2015年7月14日16:50:06  Gridview 默认展示数据时,若数据为空,则表格不显示,显示不美观. 针对此问题进行扩展: using System.Web.UI.WebControls; public static class GridViewExtension { public static void BindEmptyData(this GridView g) { if (g.Rows.Count == 0) { //表头的设置 GridViewRow row = new Gr

.net中从GridView中导出数据到excel（详细）

1,创建数据源 找到要导出的GridView中的数据. 2,重写VerifyRenderingInServerForm方法. public override void VerifyRenderingInServerForm(Control control) { } 3,编写导到Excel的方法. private void ExportGridView()        {            /**             * 如果打印全部数据,则加上注视的代码             * *

抓取网页中的内容、如何解决乱码问题、如何解决登录问题以及对所采集的数据进行处理显示的过程

本文主要介绍如何抓取网页中的内容.如何解决乱码问题.如何解决登录问题以及对所采集的数据进行处理显示的过程.效果如下所示: 1.下载网页并加载至HtmlAgilityPack 这里主要用WebClient类的DownloadString方法和HtmlAgilityPack中HtmlDocument类LoadHtml方法来实现.主要代码如下. var url = page == 1 ? "http://www.cnblogs.com/" : "http://www.cnblogs

ext grid 前台grid加载数据碰到数据重复只显示一条

在使用gridPanel的时候,如果其数据有字段名为“id”,且数据中id值相同的情况时,相同id的数据只会显示一条,这是因为Ext读取JSON数据的时候采用了类似主键唯一的方式,而这里的主键默认叫“id”,如果id相同,只认为是一条数据.从这里也可知道,解决此问题可以通过改变这个“主键”的默认值就可以了.主要改的是Ext.data.reader.Reader中的idProperty,可参考API,对于gridPanel,也就是改变其绑定的store. 下面是具体的代码实例: Ext.creat

下载不含数据EXCEL的固定表头模版（标准EXCEL只含有列头），然后上传EXCEL.显示成功和上传失败的EXCEL连接

<div id="import" runat="server" visible="false"> Step1:<asp:HyperLink ID="HyperLink1" NavigateUrl="~/CommonTemplate/设备清单模版.xlsx" runat="server">下载模版</asp:HyperLink><br />

Group GridView：用于.Net的分组显示的GridView

我的项目需要一个可以分组显示的GridView,我不会写,上网找了一圈,最终在国外的网站上找到的这个,比较符合我的要求,但它的分页得重写,它写了能分页,但我发现它的分页功能事实上并没有实现,也不知道是不是我没找见. 先上图: 此demo原作者:Anurag Gandhi 为方便查看效果,此demo数据源是.XLS文件,不是数据库. 程序:http://files.cnblogs.com/kangjing/GroupGridView.zip Group GridView:用于.Net的分组显示的G

从数据库提取数据通过jstl显示在jsp页面上

从数据库提取数据通过jstl显示在jsp页面上 1.ConnectDB.java连接数据库,把数据转换成list public class ConnectDB { private final static String strDriver = "oracle.jdbc.driver.OracleDriver"; private final static String strConnect = "jdbc:oracle:thin:@localhost:1521:ORCL&quo