• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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");
 GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("color", "red");

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

看来显示结果已经达到了我们的要求，但是当页面上有其他按钮操作导致页面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");
                 GridViewEmptyDataTest.Rows[0].Cells[0].Style.Add("color", "red");
            }

   }

这下我们的控件终于可以按我们的要求显示了，但是为了代码的重用，当一个项目里有多个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");
            gridview.Rows[0].Cells[0].Style.Add("color", "red");
        }

    }

 

    /// <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");
             gridview.Rows[0].Cells[0].Style.Add("color", "red");
        }

        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);

    }

（PS: 转至：http://blog.csdn.net/zhyuanshan/article/details/1815899）

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
asp.net图片滚动+JAVASCRIPT(向上)发布时间：2022-07-10
下一篇：
Asp.NetMVC文件管理Demo(文件展示，上传，下载，压缩，文件重命名等) ...发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap