Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第七章 GridView報表 與
表格畫面、自訂樣板
(Template)
E-Mail -- mis2000lab@yahoo.com.tw
網站 http://www.dotblogs.com.tw/mis2000lab/
ASP.NET學...
MIS2000 Lab.簡介
• 工作室成員包含:大學教授、業界技術經理、微軟MVP獎得主。
• 想要親自上課,請參考:
http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/2980...
MIS2000 Lab.當面授課,機會難得!
• ASP.Net (Web Form) 上課內容&報名,請恰:
• http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.a...
大型控制項的比較
• 單一筆記錄
• DetailsView
• FormView
(必須進入樣板,自己動手修改)
• 大量數據的「列表」
• GridView
• ListView
(必須進入樣板,自己動手修改)
• 搭配上述四者,可以排列組...
7-1 GridView與SqlDataSource,以「表格」
與「分頁」呈現大量數據
• GridView以「表格」來呈現大量的數據,用來做為網站的首頁、
報表都很適合。
• 由於GridView+SqlDataSource的精靈步驟跟前一...
7-2 從缺點裡面找出解法
• 當我們想編輯Summary欄位,裡面的字數太長,可供編輯的
TextBox太小,很難編輯裡面的大量文字。
• 按下「編輯(Edit)」按鈕,
進入「編輯模式」,每一個欄位
也都是採用「單列
(TextMode屬性...
編輯資料行  「樣板」
• 解決方法只有改成使用者自訂的樣板欄位(TemplateField)。請
看下面的介紹:
• 第一、從GridView的「智慧標籤」裡面,開始「編輯資料行」
(DetailsView稱為「編輯欄位」)。
ASP.NE...
• 第二、把Summary欄位,轉換成使用者自訂的樣板欄位
(TemplateField)。
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
8
7-3 編輯樣板
• ItemTemplate:「呈現」某一欄位的資料,唯讀(Read-Only)。
另一個隔列更換底色(不同底色的複數列)為
AlternatingItemTemplate。
• EditTemplate:進入GridView...
編輯樣板(I)-- ItemTemplate(唯讀)
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
10
編輯樣板(II)-- EditItemTemplate(編輯)
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
11
編輯樣板(III)-- 結束樣板編輯
• 完成之後,別忘了按下滑鼠右鍵,「結束樣板編輯」。如此一來
才會自動儲存剛剛的修改。
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com....
7-4 GridView自訂樣板的成果
• 結束樣板的編輯,回到HTML設計畫面。我們會先看到
ItemTemplate的修改成果已經被我們修改好了(如左圖)。
• 至於EditItemTemplate,必須在程式執行中才看見(如右圖)。
AS...
手動修改後的Summary欄位(樣板欄位
/TemplateField)
<asp:TemplateField HeaderText="summary摘要" SortExpression="summary">
<EditItemTemplate...
資料繫結運算式(DataBinding Expression)
• 以下就是把日期,修改成「年/月/日」這種短格式的寫法:
• 以下稱為「繫結運算式(DataBinding Expression)」,後面的
{0:yyyy/MM/dd}是輸出格...
7-5 隔列(複數列)更換底色,
AlternatingRowStyle
• 每隔一列(如:複數列),便用不同的底色來作區隔
(AlternatingRowStyle),比較方便使用者閱讀長篇、大量的資料。
ASP.NET學習教材(松崗),作者...
7-6 查無記錄的EmptyDataTemplate與
ShowHeaderWhenEmpty屬性
• 預設的EmptyDataTemplate("找不到資料時"出現的樣板),避免
查詢不到任何一筆記錄。這時就會出現EmptyDataTempl...
7-6-1 設定EmptyDataTemplate樣板
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
18
7-7 搭配 Calendar(日曆)控制項來修改
日期
• 接下來的這兩節是重點!!很多書籍都沒有介紹到這幾招,請您
不要錯過!!根據我這幾年的教學經驗,這裡學通了有許多變化,
面對簡單的需求能提升不少生產力。
• 務必親自動手做,而且要熟練...
透過Calendar輸入日期而不手動填寫
• 如果我們在編輯資料的時候,
帶入Calendar(日曆)控制項,
透過“選取”日期來取代
“輸入”日期。
• 範例GridView_1_Calendar.aspx。
ASP.NET學習教材(松崗),...
7-7-2 設定 GridView的樣板
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
21
7-7-3 進入GridView的「編輯樣板
(EditItemTemplate)」
• GridView「智慧標籤」→「編輯資料行」就能找到test_time欄位
的「編輯樣板(EditItemTemplate)」。
ASP.NET學習教材(...
7-7-4 資料繫結(DataBinding)
• 重點來了!!日曆控制項不會發生任何效用,我們一定要幫它做
好「資料繫結(DataBinding、資料綁定)」,才能把日曆控制項
與test資料表的test_time欄位繫結在一起,讓兩者達成互...
7-8 搭配單選的清單控制項(如DropDownList
或RadioButtonList)修改、呈現資料
• 沿用上一節的操作技巧,搭配「樣板」裡面的「編輯DataBinding」
• 7-8-1 範例一,用RadioButtonList來
...
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
25
• 重點!!「編輯DataBinding」把RadioButtonList與
db_uer資料表的”性別”欄位做「資料繫結」。執行成果如右圖。
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotb...
7-8-2 範例二,用DropDownList+SqlDataSource
抓取大量的子選項,資料多變
• 上一個範例的子選項比較少,只有男、女兩種,就可以自己動手
撰寫子選項。但如果是資料量比較大(多)的子選項,例如:全
台灣的縣市名稱(如下...
• student_test資料表(展示學生的個人資料),
其中「出生地」欄位的”值”有很多縣市
(資料量大而且經常異動),無法像上一
範例那樣自己動手輸入(例如:性別只有
男/女兩種選項,比較單純)。
ASP.NET學習教材(松崗),作者:M...
• 重點來了,因為出生地的選項太多了,無法自己動手一一加入為
DropDownList「子選項」。於是我們要透過SqlDataSource幫我們
撈取,自動產生這麼多個「出生地(縣市)」的子選項。
ASP.NET學習教材(松崗),作者:MIS2...
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
http://www.dotblogs.com.tw/mis2000lab/
30
• 完成DropDownList的DataBinding,
• 讓這個控制項與student_city資料表的「city欄位」結合在一起。
這兩種設定方法請任選其一。
ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站
htt...
• 提醒您:
1. 資料量太大而且經常異動,我們就必須設定一個獨立的「基礎」
資料表來存放這些值,日後比較好維護。如student_city資料表,
收錄了全台灣縣市名稱。
2. 資料量少、不常異動。例如:性別(男女)、婚姻狀況(是
否)、學歷...
Upcoming SlideShare
Loading in …5
×

07 GridView 基礎篇 (ASP.NET)

2,449 views

Published on

ASP.NET學習教材 VB & C# (松崗出版) 作者:MIS2000 Lab.

作者網站: http://www.dotblogs.com.tw/mis2000lab/
另有ASP.NET課程,歡迎參與。由我本人親自授課。

YouTube線上教學影片:https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA

書籍購買:
http://24h.pchome.com.tw/books/prod/DJAA2V-A84340111
http://24h.pchome.com.tw/books/prod/DJAA2V-A83003754

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

07 GridView 基礎篇 (ASP.NET)

  1. 1. 第七章 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
  2. 2. 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 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 2
  3. 3. 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 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 3
  4. 4. 大型控制項的比較 • 單一筆記錄 • DetailsView • FormView (必須進入樣板,自己動手修改) • 大量數據的「列表」 • GridView • ListView (必須進入樣板,自己動手修改) • 搭配上述四者,可以排列組合做到「一對一」、「一對多」與 「多對多」等等,呈現各種資料的呈現與管理。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 4
  5. 5. 7-1 GridView與SqlDataSource,以「表格」 與「分頁」呈現大量數據 • GridView以「表格」來呈現大量的數據,用來做為網站的首頁、 報表都很適合。 • 由於GridView+SqlDataSource的精靈步驟跟前一章的DetailsView雷 同,請您自己試作一次才能體會。 • GridView並沒有「新增」一筆記錄 的功能。跟DetailsView與FormView 不一樣。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 5
  6. 6. 7-2 從缺點裡面找出解法 • 當我們想編輯Summary欄位,裡面的字數太長,可供編輯的 TextBox太小,很難編輯裡面的大量文字。 • 按下「編輯(Edit)」按鈕, 進入「編輯模式」,每一個欄位 也都是採用「單列 (TextMode屬性=SingleLine)」 的TextBox。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 6
  7. 7. 編輯資料行  「樣板」 • 解決方法只有改成使用者自訂的樣板欄位(TemplateField)。請 看下面的介紹: • 第一、從GridView的「智慧標籤」裡面,開始「編輯資料行」 (DetailsView稱為「編輯欄位」)。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 7
  8. 8. • 第二、把Summary欄位,轉換成使用者自訂的樣板欄位 (TemplateField)。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 8
  9. 9. 7-3 編輯樣板 • ItemTemplate:「呈現」某一欄位的資料,唯讀(Read-Only)。 另一個隔列更換底色(不同底色的複數列)為 AlternatingItemTemplate。 • EditTemplate:進入GridView“編輯”模式,修改某一欄位的資料, 並將修改後的資料回寫到資料庫。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 9
  10. 10. 編輯樣板(I)-- ItemTemplate(唯讀) ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 10
  11. 11. 編輯樣板(II)-- EditItemTemplate(編輯) ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 11
  12. 12. 編輯樣板(III)-- 結束樣板編輯 • 完成之後,別忘了按下滑鼠右鍵,「結束樣板編輯」。如此一來 才會自動儲存剛剛的修改。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 12
  13. 13. 7-4 GridView自訂樣板的成果 • 結束樣板的編輯,回到HTML設計畫面。我們會先看到 ItemTemplate的修改成果已經被我們修改好了(如左圖)。 • 至於EditItemTemplate,必須在程式執行中才看見(如右圖)。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 13
  14. 14. 手動修改後的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.,網站 http://www.dotblogs.com.tw/mis2000lab/ 14
  15. 15. 資料繫結運算式(DataBinding Expression) • 以下就是把日期,修改成「年/月/日」這種短格式的寫法: • 以下稱為「繫結運算式(DataBinding Expression)」,後面的 {0:yyyy/MM/dd}是輸出格式的轉換。 • <%# Bind(“資料表的欄位名稱" , "{0:yyyy/MM/dd}") %> 註解:雙 向繫結 • <%# Eval("資料表的欄位名稱" , "{0:yyyy/MM/dd}") %> 註解:單 向繫結 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 15
  16. 16. 7-5 隔列(複數列)更換底色, AlternatingRowStyle • 每隔一列(如:複數列),便用不同的底色來作區隔 (AlternatingRowStyle),比較方便使用者閱讀長篇、大量的資料。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 16
  17. 17. 7-6 查無記錄的EmptyDataTemplate與 ShowHeaderWhenEmpty屬性 • 預設的EmptyDataTemplate("找不到資料時"出現的樣板),避免 查詢不到任何一筆記錄。這時就會出現EmptyDataTemplate的樣板 內容(如下圖)。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 17
  18. 18. 7-6-1 設定EmptyDataTemplate樣板 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 18
  19. 19. 7-7 搭配 Calendar(日曆)控制項來修改 日期 • 接下來的這兩節是重點!!很多書籍都沒有介紹到這幾招,請您 不要錯過!!根據我這幾年的教學經驗,這裡學通了有許多變化, 面對簡單的需求能提升不少生產力。 • 務必親自動手做,而且要熟練。 • 修改日期,向來是寫程式的人最害怕遇見的東西。 • 舉例來說,2014/8/5日期格式,有人寫成「2014/08/05」或是 「2014-8-5」,甚至有人寫成「2014-Aug-05」,總之,很難統一 格式。這些不統一的日期格式寫進了資料庫,將來就是大災難! ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 19
  20. 20. 透過Calendar輸入日期而不手動填寫 • 如果我們在編輯資料的時候, 帶入Calendar(日曆)控制項, 透過“選取”日期來取代 “輸入”日期。 • 範例GridView_1_Calendar.aspx。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 20
  21. 21. 7-7-2 設定 GridView的樣板 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 21
  22. 22. 7-7-3 進入GridView的「編輯樣板 (EditItemTemplate)」 • GridView「智慧標籤」→「編輯資料行」就能找到test_time欄位 的「編輯樣板(EditItemTemplate)」。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 22
  23. 23. 7-7-4 資料繫結(DataBinding) • 重點來了!!日曆控制項不會發生任何效用,我們一定要幫它做 好「資料繫結(DataBinding、資料綁定)」,才能把日曆控制項 與test資料表的test_time欄位繫結在一起,讓兩者達成互動。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 23
  24. 24. 7-8 搭配單選的清單控制項(如DropDownList 或RadioButtonList)修改、呈現資料 • 沿用上一節的操作技巧,搭配「樣板」裡面的「編輯DataBinding」 • 7-8-1 範例一,用RadioButtonList來 代表性別(男、女),資料量少 • 範例GridView_2_RadioButtonList.aspx • 搭配db_user資料表— • 會員登入帳號、密碼與會員個人資料。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 24
  25. 25. ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 25
  26. 26. • 重點!!「編輯DataBinding」把RadioButtonList與 db_uer資料表的”性別”欄位做「資料繫結」。執行成果如右圖。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 26
  27. 27. 7-8-2 範例二,用DropDownList+SqlDataSource 抓取大量的子選項,資料多變 • 上一個範例的子選項比較少,只有男、女兩種,就可以自己動手 撰寫子選項。但如果是資料量比較大(多)的子選項,例如:全 台灣的縣市名稱(如下圖),我們自己動手要寫到何時?而且隨 著行政區畫面也常出現縣市合併,這種資料量大又經常異動的狀 況,該怎麼辦? • 範例GridView_4_StudentCity.aspx。 • 使用DropDownList來 展示每一位學生的 “出生地”。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 27
  28. 28. • student_test資料表(展示學生的個人資料), 其中「出生地」欄位的”值”有很多縣市 (資料量大而且經常異動),無法像上一 範例那樣自己動手輸入(例如:性別只有 男/女兩種選項,比較單純)。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 28
  29. 29. • 重點來了,因為出生地的選項太多了,無法自己動手一一加入為 DropDownList「子選項」。於是我們要透過SqlDataSource幫我們 撈取,自動產生這麼多個「出生地(縣市)」的子選項。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 29
  30. 30. ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 30
  31. 31. • 完成DropDownList的DataBinding, • 讓這個控制項與student_city資料表的「city欄位」結合在一起。 這兩種設定方法請任選其一。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 31
  32. 32. • 提醒您: 1. 資料量太大而且經常異動,我們就必須設定一個獨立的「基礎」 資料表來存放這些值,日後比較好維護。如student_city資料表, 收錄了全台灣縣市名稱。 2. 資料量少、不常異動。例如:性別(男女)、婚姻狀況(是 否)、學歷(中小學、高中職、大專大學、研究所)等等都是 比較簡單、不常變動、資料量少的選項,可以依照上一個範例, 自己動手去寫即可。 ASP.NET學習教材(松崗),作者:MIS2000 Lab.,網站 http://www.dotblogs.com.tw/mis2000lab/ 32

×