如何讓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");
改良後的顯示結果如下圖所示：
看來顯示結果已經達到了我們的要求，但是當頁面上有其他按鈕操作導致頁面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資料庫，並在表中加入相應資料進行測試，記得把連線串改一下哦。
測試原始碼：http://dl2.csdn.net/down4/20071008/08205401208.rar
5．總結
MS的asp.net為我們提供了方便好用的控制元件，如果適當地對這些控制元件的使用方法作些小改動就能做出更加完美的效果來。
相關文章
- asp.net GridView列資料滑鼠移入顯示提示資訊ASP.NETView
- Repeater在無資料記錄時顯示類似GridView空模板(EmptyDataTemplate)View
- Navicat for MySQL開啟之後沒有顯示錶MySql
- 爬取的小說內容儲存在資料庫後再在模板中渲染顯示的時候沒有換行資料庫
- Gridview表頭(跨行、跨列)顯示樣式!View
- 新建模型的時候，是否顯示欄位中的條件顯示如何使用？模型
- 在sqlserver中顯示錶的結構SQLServer
- css如何讓div顯示在最上層CSS
- SSRS(rdl報表)分頁顯示錶頭和對錶頭的凍結處理
- Steam：資料顯示僅0.3%的Steam使用者擁有高階頭顯
- Laravel 日誌有時候有許可權有時候沒有許可權？Laravel
- 在輸入linux sudo密碼的時候顯示星號Linux密碼
- 設定placeholder時候 focus時候文字沒有隱藏
- asp.net 時間顯示格式ASP.NET
- ArcMap的mxd檔案沒有資料、顯示感嘆號怎麼辦？
- ASP.NET動態網站開發培訓-05.使用GridView顯示資料庫內容ASP.NET網站View資料庫
- Swift iOS : 裝入webview時，如何讓圖片都顯示在螢幕內SwiftiOSWebView
- Android studio 如何讓包有層次顯示Android
- win10時間不顯示日期怎麼辦_win10電腦只顯示時間沒有日期如何處理Win10
- 查詢沒有許可權但資料字典中顯示有許可權
- 如何在請求資料時，顯示載入動畫動畫
- ORACLE 10G 在安裝CRS的時候，到節點選擇的時候不能顯示cluster節點列表Oracle 10g
- ASP.NET的層次資料顯示技術 (轉)ASP.NET
- asp.net 中實時顯示本地時間ASP.NET
- nvidia控制皮膚沒有顯示設定 nvidia控制皮膚沒有顯示選項
- asp.net中GridView匯出資料ASP.NETView
- C# GridView 分頁顯示C#View
- ip addr沒有ip顯示?
- mac安裝swoole的時候沒有許可權Mac
- 悉尼大學：資料顯示使用手機和腦癌沒有關係
- win10桌面沒有計算機圖示怎麼顯示出來_win10桌面沒有此電腦如何顯示Win10計算機
- 如何讓音樂軟體的歌詞在touch bar上面顯示？
- Java 設定PDF跨頁表格重複顯示錶頭行Java
- 解決vi 在FC5中沒有高亮顯示的問題(轉)
- Angular路由——在路由時候傳遞資料Angular路由
- 我想用jsp顯示資料表表頭的值？可是顯示出來是亂碼！JS
- win10 如何顯示隱藏資料夾_win10 如何顯示隱藏的資料夾Win10
- SQL：顯示每天的小計，某一天沒有記錄也要顯示SQL