Gridview空数据的时候显示表头

最新推荐文章于 2022-11-05 16:43:56 发布

xfblue

最新推荐文章于 2022-11-05 16:43:56 发布

阅读量6k

点赞数 2

分类专栏： ASP.net 文章标签： postback asp server button build table

ASP.net 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1．前言
当对 GridView 控件进行数据绑定时，如果绑定的记录为空，网页上就不显示 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数据库，并在表中加入相应数据进行测试，记得把连接串改一下哦。