投影片 1

Size: px

Start display at page:

Download "投影片 1"

岳布秦
7 years ago
Views:

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

2 實例探討 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");

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

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

5 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

6 實例探討 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);

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

8 實例探討 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 = " 帳號密碼不可空白!!"; } }

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

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

11 實例探討 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();

12 實例探討 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(); } }

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

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

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

16 實例探討 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(); }

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

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

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

20 實例探討 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(); }

21 實例探討 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(); }

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

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

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

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

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

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

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

29 實例探討 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"); } }

30 實例探討 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(); }

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

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

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

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

35 實例探討 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(); }

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

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

38 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();

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

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

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

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

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

44 實例探討 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 存取使用者控制項成員內容 45 如果需要在引用的程式碼中, 存取使用者控制項的欄位屬性值, 或是呼叫方法時, 必須在引用的程式碼中先宣告該使用者控制宣告方式 public 使用者控制項類別名使用者控制項 ID; public WebUserControl1 mycontrol;

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

47 47 End

untitled

untitled 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 料