07 GridView 基礎篇 (ASP.NET)

第七章 GridView報表與
表格畫面、自訂樣板
（Template）
E-Mail -- mis2000lab@yahoo.com.tw
網站 http://www.dotblogs.com.tw/mis2000lab/
ASP.NET學習教材(松崗)，作者：MIS2000 Lab.，網站
http://www.dotblogs.com.tw/mis2000lab/
1

MIS2000 Lab.簡介
• 工作室成員包含：大學教授、業界技術經理、微軟MVP獎得主。
• 想要親自上課，請參考：
http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx
• Blog（範例與新技術）：http://www.dotblogs.com.tw/mis2000lab/
• FaceBook社群：https://www.facebook.com/mis2000lab
• YouTube教學影片(不定期更新)：https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA
• G+社群：https://plus.google.com/u/0/100202398389206570368/posts
2

MIS2000 Lab.當面授課，機會難得！
• ASP.Net (Web Form) 上課內容＆報名，請恰：
• http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx
• 自2011年初開課以來，全省已經有650人次以上參與本課程！
• E-Mail -- mis2000lab@yahoo.com.tw
3

大型控制項的比較
• 單一筆記錄
• DetailsView
• FormView
（必須進入樣板，自己動手修改）
• 大量數據的「列表」
• GridView
• ListView
（必須進入樣板，自己動手修改）
• 搭配上述四者，可以排列組合做到「一對一」、「一對多」與
「多對多」等等，呈現各種資料的呈現與管理。
4

7-1 GridView與SqlDataSource，以「表格」
與「分頁」呈現大量數據
• GridView以「表格」來呈現大量的數據，用來做為網站的首頁、
報表都很適合。
• 由於GridView+SqlDataSource的精靈步驟跟前一章的DetailsView雷
同，請您自己試作一次才能體會。
• GridView並沒有「新增」一筆記錄
的功能。跟DetailsView與FormView
不一樣。
5

7-2 從缺點裡面找出解法
• 當我們想編輯Summary欄位，裡面的字數太長，可供編輯的
TextBox太小，很難編輯裡面的大量文字。
• 按下「編輯（Edit）」按鈕，
進入「編輯模式」，每一個欄位
也都是採用「單列
（TextMode屬性=SingleLine）」
的TextBox。
6

編輯資料行  「樣板」
• 解決方法只有改成使用者自訂的樣板欄位（TemplateField）。請
看下面的介紹：
• 第一、從GridView的「智慧標籤」裡面，開始「編輯資料行」
（DetailsView稱為「編輯欄位」）。
7

• 第二、把Summary欄位，轉換成使用者自訂的樣板欄位
（TemplateField）。
8

7-3 編輯樣板
• ItemTemplate：「呈現」某一欄位的資料，唯讀（Read-Only）。
另一個隔列更換底色（不同底色的複數列）為
AlternatingItemTemplate。
• EditTemplate：進入GridView“編輯”模式，修改某一欄位的資料，
並將修改後的資料回寫到資料庫。
9

編輯樣板（I）-- ItemTemplate（唯讀）
10

編輯樣板（II）-- EditItemTemplate（編輯）
11

編輯樣板（III）-- 結束樣板編輯
• 完成之後，別忘了按下滑鼠右鍵，「結束樣板編輯」。如此一來
才會自動儲存剛剛的修改。
12

7-4 GridView自訂樣板的成果
• 結束樣板的編輯，回到HTML設計畫面。我們會先看到
ItemTemplate的修改成果已經被我們修改好了（如左圖）。
• 至於EditItemTemplate，必須在程式執行中才看見（如右圖）。
13

手動修改後的Summary欄位（樣板欄位
/TemplateField）
<asp:TemplateField HeaderText="summary摘要" SortExpression="summary">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("summary") %>'
TextMode="MultiLine" Width="350px" Height="100px" ></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
摘要內容----<br />
<asp:Label ID="Label1" runat="server" Text='<%# Bind("summary")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
註解：上面的資料繫結運算式（DataBinding Expression）外圍是單引號（'）而非雙引
號（"），請注意！！ ASP.NET學習教材(松崗)，作者：MIS2000 Lab.，網站
14

資料繫結運算式（DataBinding Expression）
• 以下就是把日期，修改成「年/月/日」這種短格式的寫法：
• 以下稱為「繫結運算式（DataBinding Expression）」，後面的
{0:yyyy/MM/dd}是輸出格式的轉換。
• <%# Bind(“資料表的欄位名稱" , "{0:yyyy/MM/dd}") %> 註解：雙
向繫結
• <%# Eval("資料表的欄位名稱" , "{0:yyyy/MM/dd}") %> 註解：單
向繫結
15

7-5 隔列（複數列）更換底色，
AlternatingRowStyle
• 每隔一列（如：複數列），便用不同的底色來作區隔
（AlternatingRowStyle），比較方便使用者閱讀長篇、大量的資料。
16

7-6 查無記錄的EmptyDataTemplate與
ShowHeaderWhenEmpty屬性
• 預設的EmptyDataTemplate（"找不到資料時"出現的樣板），避免
查詢不到任何一筆記錄。這時就會出現EmptyDataTemplate的樣板
內容（如下圖）。
17

7-6-1 設定EmptyDataTemplate樣板
18

7-7 搭配 Calendar（日曆）控制項來修改
日期
• 接下來的這兩節是重點！！很多書籍都沒有介紹到這幾招，請您
不要錯過！！根據我這幾年的教學經驗，這裡學通了有許多變化，
面對簡單的需求能提升不少生產力。
• 務必親自動手做，而且要熟練。
• 修改日期，向來是寫程式的人最害怕遇見的東西。
• 舉例來說，2014/8/5日期格式，有人寫成「2014/08/05」或是
「2014-8-5」，甚至有人寫成「2014-Aug-05」，總之，很難統一
格式。這些不統一的日期格式寫進了資料庫，將來就是大災難！
19

透過Calendar輸入日期而不手動填寫
• 如果我們在編輯資料的時候，
帶入Calendar（日曆）控制項，
透過“選取”日期來取代
“輸入”日期。
• 範例GridView_1_Calendar.aspx。
20

7-7-2 設定 GridView的樣板
21

7-7-3 進入GridView的「編輯樣板
（EditItemTemplate）」
• GridView「智慧標籤」→「編輯資料行」就能找到test_time欄位
的「編輯樣板（EditItemTemplate）」。
22

7-7-4 資料繫結（DataBinding）
• 重點來了！！日曆控制項不會發生任何效用，我們一定要幫它做
好「資料繫結（DataBinding、資料綁定）」，才能把日曆控制項
與test資料表的test_time欄位繫結在一起，讓兩者達成互動。
23

7-8 搭配單選的清單控制項（如DropDownList
或RadioButtonList）修改、呈現資料
• 沿用上一節的操作技巧，搭配「樣板」裡面的「編輯DataBinding」
• 7-8-1 範例一，用RadioButtonList來
代表性別（男、女），資料量少
• 範例GridView_2_RadioButtonList.aspx
• 搭配db_user資料表—
• 會員登入帳號、密碼與會員個人資料。
24

25

• 重點！！「編輯DataBinding」把RadioButtonList與
db_uer資料表的”性別”欄位做「資料繫結」。執行成果如右圖。
26

7-8-2 範例二，用DropDownList+SqlDataSource
抓取大量的子選項，資料多變
• 上一個範例的子選項比較少，只有男、女兩種，就可以自己動手
撰寫子選項。但如果是資料量比較大（多）的子選項，例如：全
台灣的縣市名稱（如下圖），我們自己動手要寫到何時？而且隨
著行政區畫面也常出現縣市合併，這種資料量大又經常異動的狀
況，該怎麼辦？
• 範例GridView_4_StudentCity.aspx。
• 使用DropDownList來
展示每一位學生的 “出生地”。
27

• student_test資料表（展示學生的個人資料），
其中「出生地」欄位的”值”有很多縣市
（資料量大而且經常異動），無法像上一
範例那樣自己動手輸入（例如：性別只有
男/女兩種選項，比較單純）。
28

• 重點來了，因為出生地的選項太多了，無法自己動手一一加入為
DropDownList「子選項」。於是我們要透過SqlDataSource幫我們
撈取，自動產生這麼多個「出生地（縣市）」的子選項。
29

30

• 完成DropDownList的DataBinding，
• 讓這個控制項與student_city資料表的「city欄位」結合在一起。
這兩種設定方法請任選其一。
31

• 提醒您：
1. 資料量太大而且經常異動，我們就必須設定一個獨立的「基礎」
資料表來存放這些值，日後比較好維護。如student_city資料表，
收錄了全台灣縣市名稱。
2. 資料量少、不常異動。例如：性別（男女）、婚姻狀況（是
否）、學歷（中小學、高中職、大專大學、研究所）等等都是
比較簡單、不常變動、資料量少的選項，可以依照上一個範例，
自己動手去寫即可。
32

07 GridView 基礎篇 (ASP.NET)

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

07 GridView 基礎篇 (ASP.NET)