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

(1)

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

CSIE NTU

1

(2)

LinkButton 控制項

2



LinkButton 的外觀上為一個超連結，實值上的功能和 Button 控制項一模一樣



常用屬性



Text–設定要顯示的文字



Visible–是否顯示控制項



常用事件



Click–按一下時發生

(3)

HyperLink 控制項

3



HyperLink 控制項可用來建立文字或圖片超連結



常用屬性

 Text–設定要顯示的文字

 ImageUrl–設定要顯示的圖片(較高優先權)

 NavigateUrl–設定要連結的網頁

 Target–設定連結網頁顯示位置

 _blank–網頁顯示於無框架的新視窗中

 _parent–網頁顯示於包含作用的 frameset 標記框架中

 _search–網頁顯示於搜尋視窗

 _self–網頁顯示於超連結所在框架中

 _top–網頁顯示於無框架的完整視窗中

(4)

實例探討 sample2-a1

4



程式功能



簡易超連結



程式內容

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

{

yahooHL.NavigateUrl = "http://tw.yahoo.com";

yahooHL.Target = "_blank";

}

(5)

Image 控制項

5



Image 控制項主要用來顯示圖片



常用屬性



ImageUrl–設定要顯示的圖片



AlternateText–無法顯示圖片時的替代文字



圖片大小顯示設定



固定大小︰設定 Height 及 Width 屬性



原始大小︰ Height 及 Width 屬性設為空白

(6)

課堂練習 sample2-b1

6



程式功能



圖片瀏覽



提供三個按鈕，按下後分別顯示不同的圖片



基本概念



利用 ImageUrl 屬性來更改 Image 控制項顯示的圖

片

(7)

ImageButton 控制項

7



ImageButton 控制項使用圖片作為外觀顯示，其於功能與 Button 控制項非常相像



常用屬性



ImageUrl–設定要顯示的圖片



AlternateText–無法顯示圖片時的替代文字



常用事件



Click–按一下時發生

(事件處理程式的第二個參數為滑鼠指標按下時

的座標位置，因此可作為影像地圖使用)

(8)

實例探討 sample2-a2 (1)

8



程式功能



影像地圖



利用 onmouseover 與 onmouseout 改變圖片



程式內容–HTML 模式部份

<asp:ImageButton onmouseover="this.src='carLogo.jpg' "

onmouseout="this.src='carText.jpg' " …

(9)

實例探討 sample2-a2 (2)

9



程式內容–WebForm1.aspx

protected void carIB_Click(object sender, System.Web.UI.ImageClickEventArgs e) {

if(e.X<=100)

textLB.Text = "原來您喜歡BMW!!";

else

textLB.Text = "原來您喜歡BENZ!!";

}

(10)

課堂練習 sample2-b2

10



程式功能



圖型式密碼輸入



基本概念



可先將使用者按下的數字存於 Label 中，並將 Label 的 Visible 屬性設定為 false



可先將使用者按下的數字儲存於 Cookie 或Session

當中

(11)

DropDownList 控制項

11



DropDownList 控制項提供下拉式選單功能



常用屬性

 Items–設定下拉式選單內容

(items 為 ListItemCollection 類別物件) (選單項目為 ListItem 類別物件)

 AutoPostBack–設定選取項目變更時是否通知伺服器



常用事件

 SelectedIndexChanged–當選取項目變更時發生 (需將 AutoPostBack 屬性設定為 true)

(12)

ListItemCollection 類別

12



DropDownList 的 items屬性為 ListItemCollection 類別物件 (為一集合)

 可直接透過索引取得集合中指定物件

 ex︰DropDownList1.Items[1]



常用屬性

 Count–取得集合中 ListItem 物件的數目

 SelectedItem–取得選取項目物件

 SelectedIndex–取得選取項目物件索引值



常用方法

 Add–新增項目至集合中 (ListItem、string)

 Clear–清除所有項目

 Remove–移除指定項目 (ListItem、string)

 RemoveAt–移除指定索引項目 (int)

(13)

ListItem 類別

13



ListItemCollection 類別物件為一集合，集合中每一元素為 ListItem 類別物件



常用屬性



Text–設定項目顯示文字



Value–設定項目對應的關聯值



Selected–項目是否已被選取

(14)

實例探討 sample2-a3 (1)

14



程式功能



藝人簡介



由下拉式選單選擇



程式內容

struct star {

public string name;

public string country;

public string imgUrl;

}

(15)

實例探討 sample2-a3 (2)

15



程式內容

star[] myStar = new star[3];

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

myStar[0].name = "S.H.E";

myStar[0].country = "台灣";

myStar[0].imgUrl = "she.jpg";

myStar[1].name = "宋慧喬";

myStar[1].country = "韓國";

myStar[1].imgUrl = "宋慧喬.jpg";

(16)

實例探討 sample2-a3 (3)

16



程式內容

myStar[2].name = "孫燕姿";

myStar[2].country = "新加坡";

myStar[2].imgUrl = "孫燕姿.jpg";

if(!IsPostBack) {

foreach(star starItem in myStar)

starDDL.Items.Add(starItem.name);

starDDL.AutoPostBack = true;

changeInfo();

} }

(17)

實例探討 sample2-a3 (4)

17

 程式內容

protected void starDDL_SelectedIndexChanged(object sender, System.EventArgs e)

{

changeInfo();

}

protected void changeInfo() {

nameLB.Text = myStar[starDDL.SelectedIndex].name;

countryLB.Text = myStar[starDDL.SelectedIndex].country;

pictureImg.ImageUrl = myStar[starDDL.SelectedIndex].imgUrl;

}

(18)

ListBox 控制項

18



ListBox 控制項與 DropDownList 控制項相似，

提供清單方塊功能



常用屬性



Items–設定清單內容

(同為 ListItemCollection 類別物件)



SelectionMode–設定選取模式

 Single–單選

 Multiple–多選

(多選情況可利用迴圈檢查每一項目的 Selected 屬性是否為 true，以判斷已被選取項目)

(19)

實例探討 sample2-a4 (1)

19



程式功能

 購物清單



程式內容

protected void purchaseBTN_Click(object sender, System.EventArgs e)

{

shoppingLB.Items.Add(itemLB.SelectedItem);

itemLB.Items.Remove(itemLB.SelectedItem);

shoppingLB.SelectedIndex = -1;

totalLB.Text = total().ToString();

}

(20)

實例探討 sample2-a4 (2)

20



程式內容

protected void cancelBTN_Click(object sender, System.EventArgs e)

{

itemLB.Items.Add(shoppingLB.SelectedItem);

shoppingLB.Items.Remove(shoppingLB.SelectedItem);

itemLB.SelectedIndex = -1;

totalLB.Text = total().ToString();

}

(21)

實例探討 sample2-a4 (3)

21



程式內容

protected int total() {

int sum = 0;

foreach(ListItem item in shoppingLB.Items) {

sum += int.Parse(item.Value);

}

return sum;

}

(22)

課堂練習 sample2-b3

22



程式功能



書藉分類清單



根據使用者所選擇的下拉式選單項目，改變書藉清單內容

小說射鵰英雄傳神鵰俠侶倚天屠龍記電腦 C# 程式設

計入門

十天學會 JAVA

資料庫程式設計

食譜韓式料理日式料理台式料理

(23)

CheckBox 控制項

23



CheckBox 控制項提供核對方塊功能



常用屬性



Text–設定標題文字



TextAlign–設定標題文字顯示位置



Checked–核對方塊是否已被勾選



常用事件



CheckedChanged–當勾選狀態改變時發生

(需將 AutoPostBack 屬性設定為 true)

(24)

CheckBoxList 控制項

24



CheckBoxList 控制項提供多重選取核對方塊群組



常用屬性

 Items–設定清單內容

(同為 ListItemCollection 類別物件)

 RepeatColumns–設定資料欄位數

 RepeatDirection–設定配置方向順序



常用事件

(25)

RadioButton 控制項

25



RadioButton 控制項提供單選選項按鈕功能



常用屬性



Text–設定標題文字



TextAlign–設定標題文字顯示位置



Checked–核對方塊是否已被勾選



GroupName–設定所屬群組



常用事件



CheckedChanged–當勾選狀態改變時發生

(需將 AutoPostBack 屬性設定為 true)

(26)

RadioButtonList 控制項

26



RadioButton 控制項可用來建立單選選項按鈕群組



常用屬性

 Items–設定清單內容

(同為 ListItemCollection 類別物件)

 RepeatColumns–設定資料欄位數

 RepeatDirection–設定配置方向順序



常用事件

(27)

實例探討 sample2-a5 (1)

27



程式功能

 會員資料輸入



程式內容–WebForm1.aspx

protected void submitBTN_Click(object sender, System.EventArgs e)

{

Session.Add("name",nameTB.Text);

Session.Add("sex",sex1RB.Checked?"先生":"小姐");

Session.Add("education", educationRBL.SelectedItem.Text);

(28)

實例探討 sample2-a5 (2)

28



程式內容–WebForm1.aspx

string hobby = "";

foreach(ListItem item in hobbyCBL.Items)

if(item.Selected) hobby+= item.Text +" ";

if(hobby == "") hobby = "無";

Session.Add("hobby", hobby);

Response.Redirect("WebForm2.aspx");

}

(29)

實例探討 sample2-a5 (3)

29



程式內容–WebForm2.aspx

Response.Write(Session["name"].ToString());

Response.Write(Session["sex"].ToString() + "您好!!<br>");

Response.Write("您的學歷為

"+Session["education"].ToString() + "<br>");

Response.Write("您的興趣為 "+Session["hobby"].ToString());

}

(30)

課堂練習 sample2-b4

30



程式功能



電腦採購



單選項目: CPU和記憶體



複選項目: 螢幕、鍵盤、滑鼠



基本概念



可將選項價格儲存於 ListItem 的 Value 屬性中

(31)

Access 資料庫 (1)

31



建立資料庫



選擇 [檔案] 中的 [開新檔案] 會跳出開新檔案視窗，

在視窗新增部份選取 [空白資料庫]



設定完檔案儲存位置後會跳出下圖視窗

(32)

Access 資料庫 (2)

32



建立資料表



選擇資料庫視窗中的 [使用設計檢視建立資料表]

(33)

Access 資料庫 (3)

33



儲存資料表



當關閉資料表視窗時，系統即會詢問是否要儲存資料表等資訊



資料表操作



開啟

–輸入資料



設計檢視

–修改資料表

欄位設定

(34)

ADO .NET

34



ADO.NET 為 .NET Framework 所提供的類別，專門用來存取『資料儲存體』中的資料



『資料儲存體』包含資料庫或非資料庫型式的儲存體



Ex︰MSSQL、Access、Excel、XML



ADO.NET 採用中斷連線的方式，減低系統工作

負載

(35)

.NET 資料提供者

35



.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…

(36)

AccessDataSource 物件



AccessDataSource物件為連接資料庫其他控制項的橋梁



常用方法



Select – 由資料庫中選取資料



Update–更新資料庫的內容

36

(37)

利用 AccessDataSource 建立連線 (1)



設定資料來源

37

(38)

利用 AccessDataSource 建立連線 (2)



先將Access資料庫加入至方案中



選取要使用的資料庫

38

(39)

利用 AccessDataSource 建立連線 (3)



選擇自訂SQL陳述式

39

(40)

利用 AccessDataSource 建立連線 (4)



使用查詢產生器，可自動生成SQL陳述式

40

(41)

利用 AccessDataSource 建立連線 (5)



勾選設定欲查詢的欄位，按下確定後即可產生對應的 SQL 語法

41

(42)

利用 AccessDataSource 建立連線 (6)



設定完成



可使用測試查詢檢驗結果是否正確

42

(43)

GridView 控制項



GridView 控制項以表格方式顯示資料，適用於表現資料庫內容



常用屬性



DataSource–設定資料來源的控制項



AutoGenerateColumns–自動產生資料欄位



Columns–設定欲包含的欄位



常用方法



DataBind–進行資料繫結動作

43

(44)

實例探討 sample2-a6

44



程式功能



將資料庫內容顯示於 GridView 控制項中



程式內容



建立 AccessDataSource 控制項



建立 GridView 控制項，並連結到 AssessDataSource

protected void Page_Load(object sender, EventArgs e) {

bookGV.DataSource = bookDS;

bookGV.DataBind();

}

(45)

課堂練習 sample2-b5

45



資料庫內容



建立一會員帳號資料表



包含帳號及密碼二個欄位



程式功能



將資料庫內容顯示於 GridView 控制項中



基本概念



利用 AccessDataSource 建立所需連線

(46)

資料行類型

46



繫結資料行



顯示資料來源指定的欄位



按鈕資料行



建立可處理該筆資料的按鈕



超連結資料行



將資料行內容以超連結顯示



樣板資料行



可利用其它控制項來自訂顯示配置樣式

(47)

繫結資料行

47



繫結資料行可用來顯示資料來源指定繫結欄位的資料內容



DataField欄位–

指定繫結資料

來源的欄位名稱

(48)

選取按鈕資料行

48



按鈕資料行包含選取按鈕、編輯更新取消按鈕及刪除按鈕



選取按鈕



文字–選取按鈕上欲顯示的文字 (全一致)



文字欄位–選取按鈕上欲顯示的資料內容

(繫結)



用法



可透過 SelectedIndexChanged 事件捕捉使用者選取狀況



可利用 SelectedRow 屬性取得被選取的資料列

(49)

GridView 儲存格資料

49



欲取得 GridView 某一儲存格資料，可藉由 Rows 屬性中的 Cells 屬性來達成



Rows 屬性–儲存 GridView 資料列的集合



Cells 屬性–儲存資料列的儲存格的集合



用法



取得控制項中第一列第三欄儲存格的資料–

GridView1.Rows [0].Cells[2].Text;

(50)

實例探討 sample2-a7

50



程式功能

 將購物資訊顯示於 GridView 控制項中

 計算總消費金額



程式內容

int total = 0;

foreach (GridViewRow Rows in GridView1.Rows) total += int.Parse(Rows.Cells[1].Text);

totalLB.Text = total.ToString();

}

(51)

課堂練習 sample2-b6

51



資料庫內容

 建立一學生成績資料表

 包含姓名、國文、英文及數學四個欄位



程式功能

 計算全班成績總平均

 設計選取欄位可供選取

 列出被選取學生各科成績、總分及平均等資料

 預設選取第一位學生



基本概念

 利用選取資料行來顯示特定學生資料

 需將 AutoGenerateColumns 設定為 false

(52)

超連結資料行

52



超連結資料行能將資料行中各項內容以超連結顯示

 HeaderText–欲顯示的欄位標題

 NavigateURL –繫結超連結目標

 DataNavigateUrlFields -- 聯繫至超連結的欄位

 DataNavigateUrlFormatString –可透過此屬性傳遞網址列參數



用法

 若將 DataNavigateUrlFormatString 設定為 WebForm2.aspx?filename={0} ，則

DataNavigateUrlFields 的資料會被填入 {0} 位置

(53)

實例探討 sample2-a8

53



程式功能



我的最愛



程式內容



資料庫中包含兩個欄位: 站名和網址



利用超連結資料資料行顯示網址

(54)

課堂練習 sample2-b7

54



資料庫內容

 建立一藝人簡介資料表

 包含姓名、國藉及圖片三個欄位



程式功能

 加入一超連結資料行

 點選超連結導至 WebForm2 .aspx 網頁，並於該網頁顯示所點選的藝人照片

 以網址列傳送圖片檔案名稱



基本概念

 設定 URL 格式字串，使 URL 欄位資料能以網址列參數型式傳送

(55)

按鈕資料行

55



按鈕資料行提供自訂按鈕功能

 文字–欲顯示的文字 (全一致)

 文字欄位–欲顯示的資料內容 (繫結)

 命令名稱–執行的命令 (CommandName)



用法

 當按鈕資料行中的按鈕被點選時，會引發

RowCommand 事件

 RowCommand 事件會將選取到的資料列傳入事件參數 e 當中

 在一個 GridView 控制項中可包含多個按鈕資料行，可藉由命令名稱來判斷出被點選到的按鈕

 設定成按鈕外觀時，需將 EnableViewState 設為 false

(56)

實例探討 sample2-a9

56



程式功能

 購物網站



程式內容

 用 ListBox 當作購物清單

 將選擇的項目加入購物清單

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

int ind = int.Parse(e.CommandArgument.ToString());

shoppingLB.Items.Add(GridView1.Rows[ind].Cells[0].Text);

}

(57)

課堂練習 sample2-b8

57



資料庫內容



建立一商品資訊資料表



包含項目及金額二個欄位



程式功能



修改 sample2-a9 多加入取消按鈕



計算總購買金額



基本概念



利用 CommandName 來區分被點選的按鈕



可藉由 Items 屬性中的 FindByText 等方法檢查是

否含有該欲刪除項目

(58)

分頁

58



GridView 控制項允許我們在資料筆數過多時，能利用分頁檢視方式來顯示資料

 利用屬性產生器或屬性視窗將允許分頁 (AllowPaging) 屬性設定為 true

 頁面大小 (PageSize) 可設定每頁資料筆數

 設定 GridView 中的 PageIndex 屬性，可跳至指定分頁

(59)

課堂練習 sample2-b9

59



資料庫內容

 建立一學號資料表

 包含學號及姓名二個欄位

 填入十筆學生資料



程式功能

 利用分頁方式檢視資料

 每一分頁顯示四位學生資料



基本概念

 利用 PageIndexChanged 事件參數來設定 GridView 控制項的 PageIndex 屬性

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