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

原创 2007年10月08日 20:59:00

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.数据显示

41普通空记录显示

编写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到底有哪些字段。

42增加空行来显示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();

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

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

43增加空记录提示

我们在数据绑定后增加一些代码对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时,页面再次显示确没有了提示信息变成如下图所示的样子:

这并不是我们想要的。

44防止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数据绑定时都可以轻易地实现我们的要求。

45封装

类的封装代码如下所示:

using System.Data;

using System.Web.UI.WebControls;

 

/// <summary>

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

/// </summary>

public class GridviewControl

{

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

    private static string EmptyText = "没有记录";

 

     public GridviewControl()

     {

        

     }

 

    /// <summary>

    /// 防止PostBackGridview不能显示

    /// </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,让各个地方调用。

46使用示例

这个类的使用很简单,就是在每次进行数据绑定是调用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 没数据显示表头

1.前言当对GridView控件进行数据绑定时,如果绑定的记录为空,网页上就不显示GridView,造成页面部分空白,页面布局结构也受影响。下面讨论的方法可以让GridView在没有数据记录的时候显示...
  • wuzhengqing1
  • wuzhengqing1
  • 2010年05月08日 16:43
  • 2447

Asp.net中,点击GridView表头实现数据的排序

一、实现该功能的基本工作。 1、  先添加一个GridView,取名为gvData。 2、  设置该控件的属性: 操作步骤如下。 设置属性:    ...
  • hxj135812
  • hxj135812
  • 2014年03月10日 10:57
  • 7174

VS2010中,使用MySQL在GridView上显示数据

1.安装MySQL驱动 这步很简单,从网上下载一个MySQL Connector的包,解压一个MySql.Data.dll的DLL文件,放到工程的根目录下。 然后,在工程目录-右键-添加引用-浏览...
  • ymyqs
  • ymyqs
  • 2015年10月31日 20:12
  • 2127

GridView性别列在数据库是bool型字段true or false,如何让其在页面中显示为男女?

上面的图片是GridView绑定后台数据库的部分截图。看到第四列,性别这一列,在后台数据库的数据类型是布尔型的,值为true 或者 false,定义true时为男,false时为女。。。 今天所说的...
  • dyllove98
  • dyllove98
  • 2013年06月14日 21:14
  • 4382

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

1.前言 当对GridView控件进行数据绑定时,如果绑定的记录为空,网页上就不显示GridView,造成页面部分空白,页面布局结构也受影响。下面讨论的方法可以让GridView在没有数据记录的时候...
  • u010792238
  • u010792238
  • 2014年03月29日 15:35
  • 817

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

1.前言 当对GridView控件进行数据绑定时,如果绑定的记录为空,网页上就不显示GridView,造成页面部分空白,页面布局结构也受影响。下面讨论的方法可以让GridView在没有数据记录的时候...
  • czh4869623
  • czh4869623
  • 2012年07月21日 18:02
  • 1104

asp.net Gridview、Repeater 查无数据时显示表头及提示信息

因为在Gridview、Repeater 在后台查询不到数据时,前台不会显示表头信息,这样给人感觉很突兀,所以下面的方法是讲述如何显示表头及提示信息【暂时没有您想要的信息!】。 效果图如下: ...
  • yl_99
  • yl_99
  • 2012年04月16日 16:29
  • 3389

Asp.net中,点击GridView表头实现数据的排序

一、实现该功能的基本工作。 1、  先添加一个GridView,取名为gvData。 2、  设置该控件的属性: 操作步骤如下。 设置属性:    ...
  • hxj135812
  • hxj135812
  • 2014年03月10日 10:57
  • 7174

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

1.前言 当对 GridView 控件进行数据绑定时,如果绑定的记录为空,网页上就不显示 GridView,造成页面部分空白,页面布局结构也受影响。下面讨论的方法可以让 GridView 在没有数据...
  • zicaiyouzi
  • zicaiyouzi
  • 2011年10月12日 20:14
  • 258

ASP.net表格GridView表头显示表头、滚动条

ASP.net表头显示表头、滚动条
  • xiaoyu812289718
  • xiaoyu812289718
  • 2014年10月16日 15:50
  • 853
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让Gridview在没有数据的时候显示表头(asp.net)
举报原因:
原因补充:

(最多只允许输入30个字)