投影片 1

ASP.NET 網頁程式設計 ( 使用 C#) CSIE NTU 1

.NET 資料提供者.NET 資料提供者為存取資料來源的一組類別.NET Data Provider SQL.NET Data Provider 命名空間.. System.Data.SqlClient 可用資料庫.. MS-SQL OLE DB.NET Data Provider 命名空間.. System.Data.OleDb 可用資料庫.. Dbase FoxPro Excel Access Oracle Access ODBC.NET Data Provider 需至微軟網站另外下載 可用資料庫.. MySQL 2

實例探討 sample3-a1 (1) 程式功能 建立與資料庫間的連線 程式內容 private void Page_Load(object sender, System.EventArgs e) { Response.Write(" 尚未連線..<br>"); Response.Write(" 進行連線..<br>"); AccessDataSource conn = new AccessDataSource(Server.MapPath("member.mdb"), "select * from member"); 3

實例探討 sample3-a1 (2) 程式內容 } conn.databind(); GridView1.DataSourceID = ""; GridView1.DataSource = conn; GridView1.DataBind(); Response.Write(" 連線成功..<br>"); 4

DataSource 物件 物件可以用來執行所要對資料庫操作的命令可傳入 SQL 命令常用方法 Select Update Insert Delete 5

SQL 結構化查詢語言 SQL 結構化查詢語言是一套標準的語言, 用以管理或存取資料庫 SQL 主要包含二部份 DML 資料處理語言 包含 SELECT INSERT UPDATE 及 DELETE DDL 資料定義語言 包含 CREATE DROP ALTER 及 GRANT 6

SQL 語法 SELECT SELECT 查詢命令可用來取得資料表中的資料 語法 SELECT 欄位名稱 1, 欄位名稱 2, FROM 資料表名稱 WHERE 條件式 ORDER BY 欄位名稱 ( 字串需以單引號 ' 括住表示之 ) 用法 select * from student select id,name from student order by id desc select id from student where id<10 7

實例探討 sample3-a2 (1) 程式功能 會員管理系統 程式內容 WebForm1.aspx protected void loginbtn_click(object sender, System.EventArgs e) { if(idtb.text!= "" && pwtb.text!= "") { if(check(idtb.text, pwtb.text)) Response.Redirect("WebForm2.aspx"); else messagelb.text = " 帳號密碼輸入錯誤!!"; } 8

實例探討 sample3-a2 (2) 程式內容 WebForm1.aspx else messagelb.text = " 帳號密碼不可空白!!"; } 9

實例探討 sample3-a2 (3) 程式內容 WebForm1.aspx private bool check(string id, string pw) { bool flag = false; string datasource = Server.MapPath("member.mdb"); string connectionstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + datasource; 10

實例探討 sample3-a2 (4) string sqlstr = "select * from member "; sqlstr += "where id='" + id + "' and pw='" + pw + "'"; AccessDataSource conn = new AccessDataSource(dataSource, sqlstr); GridView grid = new GridView(); grid.datasource = conn; grid.databind(); if (grid.rows.count > 0) flag = true; return flag;}

課堂練習 sample3-b1 資料庫內容 建立一討論區資料表 包含識別碼 主題 內容 發表者 瀏覽人數及回覆人數六個欄位 程式功能 建立討論區主題列表畫面 基本概念 利用 select 語法取得資料表中資料 需引用命名空間 System.Data.OleDb 12

SQL 語法 INSERT INSERT 新增命令用來新增一筆資料至指定資料表中 語法 INSERT INTO 資料表名稱 ( 欄位名稱 1, 欄位名稱 2, ) VALUES (' 資料 1', ' 資料 2', ) 用法 INSERT INTO student(id, name) VALUES(3, 'Ives') 13

實例探討 sample3-a3 (1) 程式功能 新增會員帳號 程式內容 WebForm1.aspx AccessDataSource conn; 14

實例探討 sample3-a3 (2) 程式內容 WebForm1.aspx private void Page_Load(object sender, System.EventArgs e) { updg(); } 15

實例探討 sample3-a3 (3) 程式內容 WebForm1.aspx private void updg() { string datasource = Server.MapPath("member.mdb"); string SqlCmd = "select * from member"; conn = new AccessDataSource(dataSource, SqlCmd); } memberdg.datasource = conn; memberdg.databind(); 16

實例探討 sample3-a3 (4) 程式內容 WebForm1.aspx private void addbtn_click(object sender, System.EventArgs e) { if(idtb.text!="" && pwtb.text!="") { conn.insertcommand = "insert into member(id,pw)values('" + idtb.text + "','" + pwtb.text + "')"; } } conn.insert(); memberdg.databind(); 17

課堂練習 sample3-b2 程式功能 延續 sample3-b1 加入一超連結至 WebForm2 在 WebForm2 中設計發表新文章頁面 基本概念 利用 insert 語法新增文章至資料表中 畫面只提供作者主題及文章內容輸入功能 18

SQL 語法 DELETE DELETE 刪除命令用來刪除資料表中的指定資料 語法 DELETE FROM 資料表名稱 WHERE 條件式 用法 DELETE FROM student WHERE id = 3 AND name = 'Ives' 19

刪除資料行 刪除資料行提供刪除資料功能 文字 欲顯示的文字 ( 全一致 ) 文字欄位 欲顯示的資料內容 ( 繫結 ) 用法 當刪除資料行中的按鈕被點選時, 會引發 DeleteCommand 事件 DeleteCommand 事件會將選取到的資料列傳入事件參數 e 當中 可在該事件中撰寫修改資料庫資料相關程式 20

實例探討 sample3-a4 (1) 程式功能 刪除會員帳號 程式內容 AccessDataSource conn; 21

實例探討 sample3-a4 (2) 程式內容 WebForm1.aspx private void Page_Load(object sender, System.EventArgs e) { updg(); } 22

實例探討 sample3-a4 (3) 程式內容 WebForm1.aspx private void updg() { string datasource = Server.MapPath("member.mdb"); string SqlCmd = "select * from member"; conn = new AccessDataSource(dataSource, SqlCmd); } memberdg.datasource = conn; memberdg.databind(); 23

實例探討 sample3-a4 (4) 程式內容 protected void memberdg_rowdeleting(object sender, GridViewDeleteEventArgs e) { conn.deletecommand = "DELETE FROM member WHERE id ='" + memberdg.rows[e.rowindex].cells[1].text + "'"; conn.delete(); memberdg.databind(); } 24

課堂練習 sample3-b3 程式功能 設計討論區刪除主題功能 在每一資料列加入刪除按鈕 設計全部刪除按鈕 基本概念 利用 delete 語法刪除資料 利用刪除資料行建立刪除按鈕 25

SQL 語法 UPDATE UPDATE 更新命令用來修改資料表中的資料 語法 UPDATE 資料表名稱 SET 欄位 1 = 資料 1, 欄位 2 = 資料 2, WHERE 條件式 用法 UPDATE student SET name = 'Bob' WHERE id = 2 26

編輯 更新 取消資料行 刪除資料行提供刪除資料功能 編輯文字 設定編輯按鈕顯示文字 更新文字 設定更新按鈕顯示文字 取消文字 設定取消按鈕顯示文字 用法 當編輯按鈕被點選時, 會引發 EditCommand 事件 EditCommand 事件會將選取到的資料列傳入事件參數 e 當中 可將 GridView 的 EditItemIndex 屬性設定為該選取資料列的索引值 e.item.itemindex 並重新執行繫結動作 編輯和取消按鈕被點選時, 會引發 UpdateCommand 及 CancelCommand 事件, 可在該事件中撰寫對應處理程式 在編輯狀態下, 可編輯資料行會在欄位中加入 TextBox 控制項顯示該欄位資料, 欲取得內容必須將該欄位該控制項轉換為 TextBox 型別, 透過 Text 屬性取得 27

實例探討 sample3-a5 (1) 程式功能 修改會員密碼 程式內容 AccessDataSource conn; 28

實例探討 sample3-a5 (2) 程式內容 private void Page_Load(object sender, System.EventArgs e) { if(!ispostback) updg(); } 29

實例探討 sample3-a5 (3) 程式內容 private void updg() { string datasource = Server.MapPath("member.mdb"); string SqlCmd = "select * from member"; conn = new AccessDataSource(dataSource, SqlCmd); } memberdg.datasource = conn; memberdg.databind(); 30

實例探討 sample3-a5 (4) 程式內容 private void memberdg_editcommand(object source, System.Web.UI.WebControls.GridViewCommandEventArgs e) { memberdg.edititemindex = e.item.itemindex; updg(); } private void memberdg_cancelcommand(object source, System.Web.UI.WebControls.GridViewCommandEventArgs e) { memberdg.edititemindex = -1; updg(); } 31

實例探討 sample3-a5 (5) 程式內容 private void memberdg_updatecommand(object source, System.Web.UI.WebControls.GridViewCommandEventArgs e) { string id = memberdg.rows[e.neweditindex].cells[1].text; string pw = TextBox.Text; conn.updatecommand = "UPDATE member SET pw='" + pw + "' WHERE id='" + id + "'"; conn.update(); memberdg.databind(); } 32

課堂練習 sample3-b4 程式功能 設計討論區修改主題功能 將資料列主題設定為選取按鈕 將選取項目顯示於文字方塊中 提供一修改按鈕 基本概念 利用 Update 語法修改資料 利用選取資料行建立選取按鈕 利用 LinkButton 型別取得選取欄位文字內容 33

樣板資料行 (1) GridView 中的樣板資料行可加入任意的控制項, 允許我們自由的設計資料顯示方式 34

樣板資料行 (2) 在 GridView 控制項中點選右鍵, 可在 編輯樣板 選項中選取欲編輯的樣板資料行 35

樣板資料行 (3) 在樣板編輯視窗中, 從工具箱拖曳 LinkButton 控制項至 ItemTemplate 項目中 將該 LinkButton 控制項 CommandName 屬性設定為 select 36

樣板資料行 (4) 點選 LinkButton 控制項的 (DataBindings) 屬性, 在自訂繫結運算式視窗中, 加入繫結語法 37

樣板資料行 (5) 同樣繫結樣板資料行中的 Image 控制項 38

實例探討 sample3-a6 (1) 程式功能 藝人簡介 點選藝人名稱導至該藝人詳細資料頁面 程式內容 利用 GridView 中的樣板資料行加入一 LinkButton 及 Image 控制項, 用來連結藝人詳細資料頁面及顯示藝人照片縮圖 利用 FindControl 方法取得被選取資料列中樣板資料行的控制項 39

實例探討 sample3-a6 (2) 程式內容 WebForm1.aspx protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.commandname == "Select") { Session.Add ("name",((button)e.commandsource).text); Response.Redirect("WebForm1.aspx"); } } 40

實例探討 sample3-a6 (3) 程式內容 WebForm2.aspx protected void Page_Load(object sender, EventArgs e) { string name = Session["name"].ToString(); string SqlStr = "select * from member where name= '"+name+"'"; AccessDataSource conn = new AccessDataSource(Server.MapPath("member.mdb"),SqlStr); 41

實例探討 sample3-a6 (4) conn.databind(); GridView temp = new GridView(); temp.datasource = conn; temp.databind(); Response.Write(temp.Rows[0].Cells[0].Text + temp.rows[0].cells[1].text); Image1.ImageUrl = Server.MapPath(temp.Rows[0].Cells[2].Text.ToString()); }

課堂練習 sample3-b5 程式功能 更新瀏覽人數資料 基本概念 利用 GridView 中的樣板資料行加入一 LinkButton 控制項 點選該控制項時連接資料庫更新瀏覽人數欄位資料 利用 datareader[" 欄位名稱 "] 取得資料表中資料並列印至網頁 43

DataList 控制項 (1) DataList 控制項可使用樣板與樣式定義的格式來顯示資料 常用屬性 DataSource 設定資料來源 常用方法 DataBind 進行資料繫結動作 44

DataList 控制項 (2) 在 DataList 控制項上點選右鍵, 選擇欲編輯的樣板區塊 45

DataList 控制項 (3) 項目樣板的編輯畫面中, 可以在 ItemTemplate 中設定欲顯示的資料格式可利用 HTML 控制項中的 Table 控制項進行排版動作 ( 最好將 Table 格式設定好後, 再拖曳至 DataList 的 ItemTemplate 項目中 ) 46

實例探討 sample3-a7 (1) 程式功能 購物清單 程式內容 private void Page_Load(object sender, System.EventArgs e) { if(!ispostback) { string datasource = Server.MapPath("db1.mdb"); string sqlstr = "select * from shopping "; AccessDataSource conn = new AccessDataSource(dataSource,sqlStr); 47

實例探討 sample3-a7 (2) 程式內容 conn.databind(); shoppingdl.datasource = conn; shoppingdl.databind(); } } 48

實例探討 sample3-a7 (3) 程式內容 protected void totalbtn_click(object sender, System.EventArgs e) { int total = 0; foreach(datalistitem item in shoppingdl.items) { if(((checkbox)item.findcontrol("purchasecb")).checked) { total += int.parse(((label)item.findcontrol("costlb")).text); } } } totallb.text = total.tostring(); 49

課堂練習 sample3-b6 程式功能 延續 sample3-b5 利用 DataList 控制項顯示文章內容 基本概念 利用 HTML 控制項中的 Table 控制項設定欲顯示畫面 在 Table 控制項中放置 Web 控制項中的 Label 控制項, 設定該 Label 控制項的資料繫結運算式, 以顯示資料表中資料 最後將 Table 控制項拖曳至 DataList 的 ItemTemplate 項目中 主程式需設定 DataList 的 DataSource 屬性及進行 DataBind 動作 50

常用樣板 ItemTemplate 設計控制項中每一列資料的外觀 AlternatingItemTemplate 類似 ItemTemplate 樣板, 此樣板為每隔一資料列的方式呈現 EditItemTemplate 設計編輯模式資料列的外觀 SelectedItemTemplate 設計選取模式資料列的外觀 51

實例探討 sample3-a8 (1) 程式功能 購物清單程式內容 private void Page_Load(object sender, System.EventArgs e) { string datasource = Server.MapPath("db1.mdb"); string sqlstr = "select * from shopping " ; conn = new AccessDataSource(dataSource, sqlstr); if(!ispostback) updl(); } 52

實例探討 sample3-a8 (2) 程式內容 private void updl() { } shoppingdl.datasource = conn; shoppingdl.databind(); private void shoppingdl_selectedindexchanged(object sender, System.EventArgs e) { } updl(); 53

課堂練習 sample3-b7 程式功能 利用 DataList 控制項設計學生成績表 以二行不同色彩方式顯示學生成績並提供編輯功能 基本概念 利用 HTML 控制項中的 Table 控制項設定欲顯示畫面 在 DataList 的 ItemTemplate 及 AlternatingItemTemplate 項目中置入不同樣式格式 設計 EditItemTemplate 項目 54

使用者控制項 使用者控制項允許我們自訂所需的控制項形式 設計使用者控制項 在方案總管專案名稱上點選右鍵來加入使用者控制項 可藉由 HTML 控制項中的 GridLayoutPanel 來進行絕對座標排版 引用使用者控制項 從方案總管中將使用者控制項拖曳至設計畫面即可 55

加入使用者控制項 (1) 在專案名稱上點選右鍵, 即可加入一使用者控制項 56

加入使用者控制項 (2) 在加入新項目視窗中, 選取 Web 使用者控制項項目 57

加入使用者控制項 (3) 成功加入後, 方案總管中即會產生一副檔名為 ascx 的使用者控制項檔案 58

實例探討 sample3-a9 程式功能 登入帳號密碼檢驗程式內容 WebUserControl1.ascx private void submitbtn_click(object sender, System.EventArgs e) { if(idtb.text == "alice" && pwtb.text == "alice") messagelb.text = " 登入成功 "; else messagelb.text = " 資料錯誤 "; } messagelb.visible = true; 59

存取使用者控制項成員內容 如果需要在引用的程式碼中, 存取使用者控制項的欄位屬性值, 或是呼叫方法時, 必須在引用的程式碼中先宣告該使用者控制 宣告方式 public 使用者控制項類別名使用者控制項 ID; public WebUserControl1 mycontrol; 60

課堂練習 sample3-b8 程式功能 登入系統 基本概念 利用 UserControl 建立一登入控制項, 允許使用者設定資料庫 資料表及登入成功連結網頁等資訊 在主程式中設定上述參數資訊 61

其它控制項繫結 部份具有 ListItem 型別 Items 屬性的控制項, 也可透過資料繫結的方式來設定 Items 屬性資料 常用屬性 DataSource 設定資料來源 DataTextField 繫結 Text 欄位 DataValueField 繫結 Value 欄位 常用方法 DataBind 進行資料繫結動作 62

實例探討 sample3-a10 (1) 程式功能 帳號資料程式內容 private void Page_Load(object sender, System.EventArgs e) { string datasource = Server.MapPath("member.mdb"); string SqlStr = "select * from member"; conn = new AccessDataSource(dataSource, SqlStr); if(!ispostback) updg(); } 63

實例探討 sample3-a10 (2) 程式內容 private void updg() { memberlb.datasource = datareader; memberlb.datatextfield = "account"; memberlb.databind(); } 64

實例探討 sample3-a10 (3) 程式內容 private void memberlb_selectedindexchanged(object sender, System.EventArgs e) { conn.selectcommand = "select * from member where account='" + memberlb.selecteditem.text + "'"; conn.select(new DataSourceSelectArguments()); conn.databind(); GridView a = new GridView(); a.datasource = conn; a.databind(); if(a.rows.count > 0) { idlb.text = a.rows[0].cells[0].text; accountlb.text = a.rows[0].cells[1].text; pwlb.text = a.rows[0].cells[2].text; } } 65

自訂分頁 較好的分頁設計, 是只提取資料來源中所需顯示的頁面資料 將 AllowPaging 及 AllowCustomPage 設定為 true 設定總資料筆數 VirtualItemCount 屬性 可利用 select top n 欄位名稱 from 資料表名稱 where not 欄位名稱 in (select top m 欄位名稱 from 資料表名稱 ) 取得第 m 筆資料之後的 n 筆資料 66

課堂練習 sample3-b9 程式功能 討論區列表 分頁查詢功能 基本概念 透過 e.newpageindex * PageSize 來求得需取得的資料位置 利用 select 來取得某頁面資料 67