投影片 1

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

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

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

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

SQL 語法 SELECT 5 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

實例探討 sample3-a2 (1) 6 程式功能 會員登入 使用 select 來確認帳號密碼是否正確 程式內容 private bool check(string id, string pw) { bool flag = false; string datasource = Server.MapPath("member.mdb"); string sqlstr = "select * from member "; sqlstr += "where id='" + id + "' and pw='" + pw + "'"; AccessDataSource conn = new AccessDataSource(dataSource, sqlstr);

實例探討 sample3-a2 (2) 7 程式內容 } GridView grid = new GridView(); grid.datasource = conn; grid.databind(); if (grid.rows.count > 0) flag = true; return flag;

實例探討 sample3-a2 (3) 8 程式內容 protected void Button1_Click(object sender, EventArgs e) { if (idtb.text!= "" && pwtb.text!= "") { if (check(idtb.text, pwtb.text)) Response.Write(" 登入 "); else messagelb.text = " 帳號密碼輸入錯誤!!"; } else messagelb.text = " 帳號密碼不可空白!!"; } }

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

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

實例探討 sample3-a3 (1) 11 程式功能 新增會員帳號 程式內容 protected void updg() { string datasource = Server.MapPath("member.mdb"); string SqlCmd = "select * from member"; conn = new AccessDataSource(dataSource, SqlCmd); } memberdg.datasource = conn; memberdg.databind();

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

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

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

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

實例探討 sample3-a4 16 程式功能 刪除會員帳號 程式內容 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(); }

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

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

編輯 更新 取消資料行 19 編輯 更新 取消資料行提供資料功能 編輯文字 設定編輯按鈕顯示文字 更新文字 設定更新按鈕顯示文字 取消文字 設定取消按鈕顯示文字 用法 當編輯按鈕被點選時, 會引發 RowEditing 事件 RowEditing 事件會將選取到的資料列傳入事件參數 e 當中 可將 GridView 的 EditIndex 屬性設定為該選取資料列的索引值 e.neweditindex 並重新執行繫結動作 編輯和取消按鈕被點選時, 會引發 RowUpdating 及 RowDeleting 事件, 可在該事件中撰寫對應處理程式

實例探討 sample3-a5 20 程式功能 修改會員密碼 程式內容 protected void updg() { string datasource = Server.MapPath("member.mdb"); string SqlCmd = "select * from member"; conn = new AccessDataSource(dataSource, SqlCmd); memberdg.datasource = conn; memberdg.databind(); }

實例探討 sample3-a5 21 程式內容 protected void memberdg_rowediting(object sender, GridViewEditEventArgs 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(); }

課堂練習 sample3-b4 22 程式功能 設計討論區修改主題功能 提供選取按鈕 將選取項目顯示於文字方塊中 提供修改按鈕 基本概念 利用 Update 語法修改資料 利用選取資料行建立選取按鈕

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

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

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

樣板資料行 (4) 26 右鍵點選 LinkButton 控制項的 (Edit DataBindings ), 在自訂繫結運算式視窗中, 加入繫結語法 Eval( name )

樣板資料行 (5) 27 同樣繫結樣板資料行中的 Image 控制項 Eval( image")

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

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

實例探討 sample3-a6 (2) 30 程式內容 顯示詳細資料 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); 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 =temp.rows[0].cells[2].text.tostring(); }

課堂練習 sample3-b5 31 程式功能 更新瀏覽人數資料 基本概念 利用 GridView 中的樣板資料行加入一 LinkButton 控制項 點選該控制項時連接資料庫更新瀏覽人數欄位資料 利用 CommandArgument 來儲存識別碼

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

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

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

實例探討 sample3-a7 (1) 35 程式功能 購物清單 程式內容 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(); }

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

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

38 實例探討 sample3-a8 (1) 程式功能 購物清單 程式內容 protected 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(); } protected void updl() } shoppingdl.datasource = conn; shoppingdl.databind();

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

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

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

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

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

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

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

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

47 End