2022年3月9日 星期三

[研究][ASP.NET]GridView 沒資料時時也顯示表頭欄位名稱

[研究][ASP.NET]GridView 沒資料時時也顯示表頭欄位名稱

2022-03-09

GridView如果SELECT沒有撈到任何資料,預設是空白一片,不顯示任何東西。

要自己手動設定 EmptyDataText 值,就會顯示該值,例如:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication12.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" 
                SelectCommand="SELECT * FROM [Products]">
            </asp:SqlDataSource>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="no" DataSourceID="SqlDataSource1" EmptyDataText="無資料">
                <Columns>
                    <asp:BoundField DataField="no" HeaderText="no" InsertVisible="False" 
                        ReadOnly="True" SortExpression="no" />
                    <asp:BoundField DataField="product" HeaderText="product" SortExpression="product" />
                    <asp:BoundField DataField="price" HeaderText="price" SortExpression="price" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>


如果希望,沒資料時時也顯示表頭欄位名稱,GridView 並不支援,沒有簡便設定方式,只能自己寫 CODE 或用其他方式達成,例如用 <EmptyDataTemplate> 達到。

在Visual Studio 的 GridView 上選「編輯樣板」


(下圖) 切換到 EmptyDataTemplate,隨便寫點字,選「結束樣板編輯」

回到 Visual Studio 2022 的「原始碼」畫面,手動編寫 <EmptyDataTemplate> 內容


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication12.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" 
                SelectCommand="SELECT * FROM [Products]">
            </asp:SqlDataSource>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="no" DataSourceID="SqlDataSource1" EmptyDataText="自訂">
                <Columns>
                    <asp:BoundField DataField="no" HeaderText="no" InsertVisible="False" 
                        ReadOnly="True" SortExpression="no" />
                    <asp:BoundField DataField="product" HeaderText="product" SortExpression="product" />
                    <asp:BoundField DataField="price" HeaderText="price" SortExpression="price" />
                </Columns>
                <EmptyDataTemplate>
                    <table border="1">
                        <tr>
                            <td>no</td>
                            <td>product</td>
                            <td>price</td>
                        </tr>
                        <tr>
                            <td colspan="3">無資料</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

結果 EmptyDataText 有設定值 (不管是甚麼) 且<EmptyDataTemplate> 有內容,就會顯示 <EmptyDataTemplate> 內容。

因為這是硬生生手動作出的,不是 GridView 支援的,所以欄位有改名、增加、減少,這裡都不會自動反映。

(完)

沒有留言:

張貼留言