1

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

CSIE NTU

2

.NET 資料提供者

.NET 資料提供者為存取資料來源的一組類別

.NET Data ProviderSQL .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…

3

實例探討 sample3-a1 (1)

程式功能

建立與資料庫間的連線

程式內容

private void Page_Load(object sender, System.EventArgs e){

Response.Write("尚未連線..
");Response.Write("進行連線..
");AccessDataSource conn = new AccessDataSource(Server.MapPath("member.mdb"),

"select * from member");

4

實例探討 sample3-a1 (2)

程式內容

conn.DataBind(); GridView1.DataSourceID = "";GridView1.DataSource = conn;GridView1.DataBind();Response.Write("連線成功..
");

}

5

DataSource 物件

物件可以用來執行所要對資料庫操作的命令

可傳入 SQL 命令

常用方法

SelectUpdate InsertDelete

6

SQL 結構化查詢語言

SQL 結構化查詢語言是一套標準的語言，用以管理或存取資料庫

SQL 主要包含二部份DML 資料處理語言

包含 SELECT、INSERT、UPDATE 及 DELETE…

DDL 資料定義語言包含 CREATE、DROP、ALTER 及 GRANT…

7

SQL 語法–SELECT

SELECT 查詢命令可用來取得資料表中的資料語法

SELECT 欄位名稱1, 欄位名稱2, … FROM 資料表名稱 WHERE 條件式 ORDER BY 欄位名稱 (字串需以單引號 ' 括住表示之)

用法select * from studentselect id,name from student order by id descselect id from student where id

8

實例探討 sample3-a2 (1)

程式功能會員管理系統

程式內容–WebForm1.aspxprotected void loginBTN_Click(object sender, System.EventArgs

e){

if(idTB.Text!= "" && pwTB.Text != ""){

if(check(idTB.Text, pwTB.Text))Response.Redirect("WebForm2.aspx");

elsemessageLB.Text = "帳號密碼輸入錯誤!!";

}

9

實例探討 sample3-a2 (2)

程式內容–WebForm1.aspxelse

messageLB.Text = "帳號密碼不可空白!!";}

10

實例探討 sample3-a2 (3)

程式內容–WebForm1.aspxprivate 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;

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

12

課堂練習 sample3-b1

資料庫內容建立一討論區資料表

包含識別碼、主題、內容、發表者、瀏覽人數及回覆人數六個欄位

程式功能建立討論區主題列表畫面

基本概念利用 select 語法取得資料表中資料需引用命名空間 System.Data.OleDb

13

SQL 語法–INSERT

INSERT 新增命令用來新增一筆資料至指定資料表中

語法

INSERT INTO 資料表名稱 ( 欄位名稱1, 欄位名稱2, …) VALUES ('資料1', '資料2', …)

用法

INSERT INTO student(id, name) VALUES(3, 'Ives')

14

實例探討 sample3-a3 (1)

程式功能

新增會員帳號

程式內容–WebForm1.aspxAccessDataSource conn;

15

實例探討 sample3-a3 (2)

程式內容–WebForm1.aspxprivate void Page_Load(object sender,

System.EventArgs e){

upDG();}

16

實例探討 sample3-a3 (3)

程式內容–WebForm1.aspxprivate void upDG(){

string dataSource = Server.MapPath("member.mdb");string SqlCmd = "select * from member";conn = new AccessDataSource(dataSource,

SqlCmd);

memberDG.DataSource = conn;memberDG.DataBind();

}

17

實例探討 sample3-a3 (4)

程式內容–WebForm1.aspxprivate 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();

}}

18

課堂練習 sample3-b2

程式功能

延續 sample3-b1 加入一超連結至 WebForm2在 WebForm2 中設計發表新文章頁面

基本概念

利用 insert 語法新增文章至資料表中畫面只提供作者主題及文章內容輸入功能

19

SQL 語法–DELETE

DELETE 刪除命令用來刪除資料表中的指定資料語法

DELETE FROM 資料表名稱 WHERE 條件式

用法

DELETE FROM student WHERE id = 3 AND name = 'Ives'

20

刪除資料行

刪除資料行提供刪除資料功能文字–欲顯示的文字 (全一致)文字欄位–欲顯示的資料內容 (繫結)

用法當刪除資料行中的按鈕被點選時，會引發DeleteCommand 事件DeleteCommand 事件會將選取到的資料列傳入事件參數 e 當中可在該事件中撰寫修改資料庫資料相關程式

21

實例探討 sample3-a4 (1)

程式功能

刪除會員帳號

程式內容

AccessDataSource conn;

22

實例探討 sample3-a4 (2)

程式內容–WebForm1.aspxprivate void Page_Load(object sender,

System.EventArgs e){

upDG();}

23

實例探討 sample3-a4 (3)

程式內容–WebForm1.aspxprivate void upDG(){

string dataSource = Server.MapPath("member.mdb");string SqlCmd = "select * from member";conn = new AccessDataSource(dataSource,

SqlCmd);

memberDG.DataSource = conn;memberDG.DataBind();

}

24

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

}

25

課堂練習 sample3-b3

程式功能

設計討論區刪除主題功能

在每一資料列加入刪除按鈕

設計全部刪除按鈕

基本概念

利用 delete 語法刪除資料利用刪除資料行建立刪除按鈕

26

SQL 語法–UPDATE

UPDATE 更新命令用來修改資料表中的資料語法

UPDATE 資料表名稱 SET 欄位1 = 資料1, 欄位2 = 資料2, … WHERE 條件式

用法

UPDATE student SET name = 'Bob' WHERE id = 2

27

編輯、更新、取消資料行

刪除資料行提供刪除資料功能

編輯文字–設定編輯按鈕顯示文字

更新文字–設定更新按鈕顯示文字

取消文字–設定取消按鈕顯示文字

用法

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

28

實例探討 sample3-a5 (1)

程式功能

修改會員密碼

程式內容

AccessDataSource conn;

29

實例探討 sample3-a5 (2)

程式內容

private void Page_Load(object sender, System.EventArgs e)

{if(!IsPostBack) upDG();

}

30

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

}

31

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

}

32

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

}

33

課堂練習 sample3-b4

程式功能設計討論區修改主題功能

將資料列主題設定為選取按鈕

將選取項目顯示於文字方塊中

提供一修改按鈕

基本概念利用 Update 語法修改資料利用選取資料行建立選取按鈕

利用 LinkButton 型別取得選取欄位文字內容

34

樣板資料行 (1)

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

35

樣板資料行 (2)

在 GridView 控制項中點選右鍵，可在『編輯樣板』選項中選取欲編輯的樣板資料行

36

樣板資料行 (3)

在樣板編輯視窗中，從工具箱拖曳 LinkButton 控制項至 ItemTemplate 項目中

將該 LinkButton 控制項CommandName 屬性設定為 select

37

樣板資料行 (4)

點選 LinkButton 控制項的 (DataBindings) 屬性，在自訂繫結運算式視窗中，加入繫結語法

38

樣板資料行 (5)

同樣繫結樣板資料行中的 Image 控制項

39

實例探討 sample3-a6 (1)

程式功能

藝人簡介

點選藝人名稱導至該藝人詳細資料頁面

程式內容

利用 GridView 中的樣板資料行加入 一 LinkButton及 Image 控制項，用來連結藝人詳細資料頁面及顯示藝人照片縮圖

利用 FindControl 方法取得被選取資料列中樣板資料行的控制項

40

實例探討 sample3-a6 (2)

程式內容–WebForm1.aspxprotected void GridView1_RowCommand(object

sender, GridViewCommandEventArgs e){

if (e.CommandName == "Select"){

Session.Add("name",((Button)e.CommandSource).Text);

Response.Redirect("WebForm1.aspx");}

}

41

實例探討 sample3-a6 (3)

程式內容–WebForm2.aspxprotected 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);

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

43

課堂練習 sample3-b5

程式功能

更新瀏覽人數資料

基本概念

利用 GridView 中的樣板資料行加入 一 LinkButton控制項

點選該控制項時連接資料庫更新瀏覽人數欄位資料

利用 dataReader["欄位名稱"] 取得資料表中資料並列印至網頁

44

DataList 控制項 (1)

DataList 控制項可使用樣板與樣式定義的格式來顯示資料

常用屬性

DataSource–設定資料來源

常用方法

DataBind–進行資料繫結動作

45

DataList 控制項 (2)

在 DataList 控制項上點選右鍵，選擇欲編輯的樣板區塊

46

DataList 控制項 (3)

項目樣板的編輯畫面中，可以在 ItemTemplate 中設定欲顯示的資料格式

可利用 HTML 控制項中的Table 控制項進行排版動作(最好將 Table 格式設定好後，再拖曳至 DataList 的ItemTemplate 項目中)

47

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

48

實例探討 sample3-a7 (2)

程式內容

conn.DataBind();shoppingDL.DataSource = conn;shoppingDL.DataBind();

}}

49

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

}

50

課堂練習 sample3-b6

程式功能延續 sample3-b5利用 DataList 控制項顯示文章內容

基本概念利用 HTML 控制項中的 Table 控制項設定欲顯示畫面在 Table 控制項中放置 Web 控制項中的 Label 控制項，設定該 Label 控制項的資料繫結運算式，以顯示資料表中資料

最後將 Table 控制項拖曳至 DataList 的 ItemTemplate 項目中主程式需設定 DataList 的 DataSource 屬性及進行 DataBind動作

51

常用樣板

ItemTemplate設計控制項中每一列資料的外觀

AlternatingItemTemplate類似 ItemTemplate 樣板，此樣板為每隔一資料列的方式呈現

EditItemTemplate設計編輯模式資料列的外觀

SelectedItemTemplate設計選取模式資料列的外觀

52

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

53

實例探討 sample3-a8 (2)

程式內容private void upDL(){

shoppingDL.DataSource = conn;shoppingDL.DataBind();

}private void shoppingDL_SelectedIndexChanged(object sender,

System.EventArgs e){

upDL();}

54

課堂練習 sample3-b7

程式功能

利用 DataList 控制項設計學生成績表以二行不同色彩方式顯示學生成績並提供編輯功能

基本概念

利用 HTML 控制項中的 Table 控制項設定欲顯示畫面在 DataList 的 ItemTemplate 及 AlternatingItemTemplate 項目中置入不同樣式格式

設計 EditItemTemplate 項目

55

使用者控制項

使用者控制項允許我們自訂所需的控制項形式

設計使用者控制項在方案總管專案名稱上點選右鍵來加入使用者控制項

可藉由 HTML 控制項中的 GridLayoutPanel 來進行絕對座標排版

引用使用者控制項從方案總管中將使用者控制項拖曳至設計畫面即可

56

加入使用者控制項 (1)

在專案名稱上點選右鍵，即可加入一使用者控制項

57

加入使用者控制項 (2)

在加入新項目視窗中，選取 Web 使用者控制項項目

58

加入使用者控制項 (3)

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

59

實例探討 sample3-a9

程式功能

登入帳號密碼檢驗

程式內容–WebUserControl1.ascxprivate void submitBTN_Click(object sender, System.EventArgs e){

if(idTB.Text == "alice" && pwTB.Text == "alice")messageLB.Text = "登入成功";

elsemessageLB.Text = "資料錯誤";

messageLB.Visible = true;}

60

存取使用者控制項成員內容

如果需要在引用的程式碼中，存取使用者控制項的欄位屬性值，或是呼叫方法時，必須在引用的程式碼中先宣告該使用者控制

宣告方式

public 使用者控制項類別名 使用者控制項 ID;public WebUserControl1 myControl;

61

課堂練習 sample3-b8

程式功能

登入系統

基本概念

利用 UserControl 建立一登入控制項，允許使用者設定資料庫、資料表及登入成功連結網頁等資訊

在主程式中設定上述參數資訊

62

其它控制項繫結

部份具有 ListItem 型別 Items 屬性的控制項，也可透過資料繫結的方式來設定 Items 屬性資料常用屬性

DataSource–設定資料來源DataTextField–繫結 Text 欄位DataValueField–繫結 Value 欄位

常用方法DataBind–進行資料繫結動作

63

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

}

64

實例探討 sample3-a10 (2)

程式內容

private void upDG(){

memberLB.DataSource = dataReader;memberLB.DataTextField = "account";memberLB.DataBind();

}

65

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

}

}

66

自訂分頁

較好的分頁設計，是只提取資料來源中所需顯示的頁面資料

將 AllowPaging 及 AllowCustomPage 設定為 true設定總資料筆數 VirtualItemCount 屬性可利用 select top n 欄位名稱 from 資料表名稱where not 欄位名稱 in (select top m 欄位名稱 from 資料表名稱) 取得第 m 筆資料之後的 n 筆資料

67

課堂練習 sample3-b9

程式功能

討論區列表

分頁查詢功能

基本概念

透過 e.NewPageIndex * PageSize 來求得需取得的資料位置

利用 select 來取得某頁面資料

ASP.NET 網頁程式設計 (使用 C#).NET 資料提供者實例探討 sample3-a1 (1)實例探討 sample3-a1 (2)DataSource 物件SQL 結構化查詢語言SQL 語法–SELECT實例探討 sample3-a2 (1)實例探討 sample3-a2 (2)實例探討 sample3-a2 (3)實例探討 sample3-a2 (4)課堂練習 sample3-b1SQL 語法–INSERT實例探討 sample3-a3 (1)實例探討 sample3-a3 (2)實例探討 sample3-a3 (3)實例探討 sample3-a3 (4)課堂練習 sample3-b2SQL 語法–DELETE刪除資料行實例探討 sample3-a4 (1)實例探討 sample3-a4 (2)實例探討 sample3-a4 (3)實例探討 sample3-a4 (4)課堂練習 sample3-b3SQL 語法–UPDATE編輯、更新、取消資料行實例探討 sample3-a5 (1)實例探討 sample3-a5 (2)實例探討 sample3-a5 (3)實例探討 sample3-a5 (4)實例探討 sample3-a5 (5)課堂練習 sample3-b4樣板資料行 (1)樣板資料行 (2)樣板資料行 (3)樣板資料行 (4)樣板資料行 (5)實例探討 sample3-a6 (1)實例探討 sample3-a6 (2)實例探討 sample3-a6 (3)實例探討 sample3-a6 (4)課堂練習 sample3-b5DataList 控制項 (1)DataList 控制項 (2)DataList 控制項 (3)實例探討 sample3-a7 (1)實例探討 sample3-a7 (2)實例探討 sample3-a7 (3)課堂練習 sample3-b6常用樣板實例探討 sample3-a8 (1)實例探討 sample3-a8 (2)課堂練習 sample3-b7使用者控制項加入使用者控制項 (1)加入使用者控制項 (2)加入使用者控制項 (3)實例探討 sample3-a9存取使用者控制項成員內容課堂練習 sample3-b8其它控制項繫結實例探討 sample3-a10 (1)實例探討 sample3-a10 (2)實例探討 sample3-a10 (3)自訂分頁課堂練習 sample3-b9