GridView通用綁定方法源碼（包括空值處理）

悟靜 2012-01-12

展開全文

[轉(zhuǎn)]Gridview空數(shù)據(jù)的時候顯示表頭

1．前言

做前幾個項目時,當對 GridView 控件進行數(shù)據(jù)綁定時，如果綁定的記錄為空，網(wǎng)頁上就不顯示 GridView，原來只是簡單的在Gridview的屬性中把 EmptyDataText="Data is empty" 設置一下。感覺還是不理想.下面討論的方法可以讓 GridView 在沒有數(shù)據(jù)記錄的時候顯示表的字段結(jié)構(gòu)和顯示提示信息.(其實看了好多方法大致意思都是一樣的,當數(shù)據(jù)為空時生成一個只有表頭列的空表,然后以生成的表為GridView的數(shù)據(jù)源)

2．數(shù)據(jù)
為了讓 GridView 顯示數(shù)據(jù)，在數(shù)據(jù)庫中建立表 temple，其字段如下：
temple 表示廟宇，它的字段有：
temple_id       int
temple_name   varchar(50)
location   varchar(50)
build_date       datetime

temple 的數(shù)據(jù)為：

temple_id	temple_name	location	build_time
1	少林寺	河南省登封市嵩山	1900-2-2 0:00:00
2	大杰寺	五龍山	1933-2-3 3:03:03
3	法源寺	宣武門外教子胡同南端東側(cè)	1941-2-3 5:04:03
4	廣濟寺	阜成門內(nèi)大街東口	1950-3-3 3:03:03
5	碧云寺	香山東麓	1963-3-3 3:03:03

3．頁面
建立一個 asp.net 網(wǎng)站工程，在頁面中添加 GridView 和幾個按鈕，代碼如下所示：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./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="有數(shù)據(jù)綁定" Width="109px" OnClick="ButtonHasDataBind_Click" />
        <asp:Button ID="ButtonQueryEmptyBind" runat="server" Text="查詢結(jié)果為空綁定" Width="142px" OnClick="ButtonQueryEmptyBind_Click" />
        <asp:Button ID="ButtonConstructTableBind" runat="server" Text="構(gòu)造空的DataTable綁定" Width="164px" OnClick="ButtonConstructTableBind_Click" />
        <asp:Button ID="ButtonNormalBind" runat="server" Text="普通空數(shù)據(jù)綁定" Width="127px" OnClick="ButtonNormalBind_Click" /></div>
    </form>
</body>
</html>
GridView 要綁定的字段和 temple 的字段一樣，在這里我們利用 GridView 原有的功能，設定當數(shù)據(jù)為空是顯示“Data Is Empty”，如果沒有設定 EmptyDataText 屬性，當綁定的記錄為空時，GridView 將不在頁面顯示。
4．數(shù)據(jù)顯示
4．1普通空記錄顯示
編寫 ButtonNormalBind 的事件函數(shù) ButtonNormalBind_Click，添加如下代碼，來測試沒有經(jīng)過處理的 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();
}
執(zhí)行這些代碼后，GridView 顯示結(jié)果如下圖所示：
可以看到這樣簡單的提示看不出 GridView 的結(jié)構(gòu)來，在大多數(shù)的實際應用中我們希望看到GridView 到底有哪些字段。
4．2增加空行來顯示 GridView 的結(jié)構(gòu)
我們知道只要 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();
在每次綁定前判斷，如果為空就增加一空行，這樣綁定的結(jié)果如下圖所示：

可以看得表頭已經(jīng)可以顯示了，但是顯示的空行沒有任何數(shù)據(jù)也讓人費解，可不可以增加一下提示信息呢？
4．3增加空記錄提示
我們在數(shù)據(jù)綁定后增加一些代碼對GridView進行一下處理，讓顯示結(jié)果更友好。在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");
改良后的顯示結(jié)果如下圖所示：

看來顯示結(jié)果已經(jīng)達到了我們的要求，但是當頁面上有其他按鈕操作導致頁面 PostBack 時，頁面再次顯示確沒有了提示信息變成如下圖所示的樣子：

這并不是我們想要的。
4．4防止 PostBack 時頁面顯示變化
為了防止顯示改變我們在Page_Load事件里添加如下代碼，從而重新綁定GridView：
if (IsPostBack)
        {
            //如果數(shù)據(jù)為空則重新構(gòu)造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 數(shù)據(jù)綁定時都可以輕易地實現(xiàn)我們的要求。
4．5封裝
類的封裝代碼如下所示：
using System.Data;
using System.Web.UI.WebControls;

///<summary>
/// Gridview綁定的數(shù)據(jù)記錄為空時顯示Gridview的表頭，并顯示沒有記錄的提示
///</summary>
public class GridviewControl
{
    //當Gridview數(shù)據(jù)為空時顯示的信息
    private static string EmptyText = "沒有記錄";

     public GridviewControl()
     {

     }

    ///<summary>
    ///防止PostBack后Gridview不能顯示
    ///</summary>
    ///<param name="gridview"></param>
    public static void ResetGridView(GridView gridview)
    {
        //如果數(shù)據(jù)為空則重新構(gòu)造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>
    ///綁定數(shù)據(jù)到GridView，當表格數(shù)據(jù)為空時顯示表頭
    ///</summary>
    ///<param name="gridview"></param>
    ///<param name="table"></param>
    public static void GridViewDataBind(GridView gridview, DataTable table)
    {
        //記錄為空重新構(gòu)造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
        {
            //數(shù)據(jù)不為空直接綁定
            gridview.DataSource = table;
            gridview.DataBind();
        }

        //重新綁定取消選擇
        gridview.SelectedIndex = -1;
    }
}
你可以把這個類編譯成 DLL，讓各個地方調(diào)用。
4．6使用示例
這個類的使用很簡單，就是在每次進行數(shù)據(jù)綁定是調(diào)用 GridViewDataBind，這個函數(shù)的第一個參數(shù)是要綁定數(shù)據(jù)的 GridView 第二個參數(shù)是包含數(shù)據(jù)字段列的 DataTable，可能為空可能不空，如果數(shù)據(jù)不空，函數(shù)則自動進行正常綁定，否則顯示“沒有記錄”的提示。
上面的按鈕事件的代碼可以改成如下所示：
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 調(diào)用 ResetGridView 函數(shù)，如下所示：
if (IsPostBack)
        {
            GridviewControl.ResetGridView(this.GridViewEmptyDataTest);