• 如何让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");
     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

  • 相关阅读:
    Ubuntu下基于u-boot搭建qemu的vexpress环境
    linux从head.s到start_kernelstart_kernel之---内核重定位后分析
    linux从head.s到start_kernelstart_kernel之---内核解压到重定位分析
    Jupyter Notebook介绍、安装及使用教程
    python基于SMTP发送邮件(qq邮箱)
    python正则表达式多次提取数据(一个规则提取多组数据)
    python正则表达式提取中文
    找到任务栏图标广告的源头
    1. Visio Web 形状
    Python GUI之tkinter窗口视窗教程大集合(看这篇就够了)
  • 原文地址:https://www.cnblogs.com/LifeKingcn/p/2638274.html
Copyright © 2020-2023  润新知