LinkButton 控制項

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

講師︰唐士軒

CSIE NTU

LinkButton 控制項

zLinkButton 的外觀上為一個超連結，實 值上的功能和 Button 控制項一模一樣 z常用屬性

zText–設定要顯示的文字 zVisible–是否顯示控制項

z常用事件

zClick–按一下時發生

HyperLink 控制項

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

z Text–設定要顯示的文字

z ImageUrl–設定要顯示的圖片(較高優先權) z NavigateUrl–設定要連結的網頁

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

z

z

z

z

實例探討 sample2-a1

z程式功能

z簡易超連結

z程式內容

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

{

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

yahooHL.Target = "_blank";

}

Image 控制項

zImage 控制項主要用來顯示圖片 z常用屬性

zImageUrl–設定要顯示的圖片

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

z圖片大小顯示設定

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

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

課堂練習 sample2-b1

z程式功能

z圖片瀏覽

z基本概念

z利用 ImageUrl 屬性來更改 Image 控制項顯

示的圖片

ImageButton 控制項

zImageButton 控制項使用圖片作為外觀顯示，

其於功能與 Button 控制項非常相像 z常用屬性

zImageUrl–設定要顯示的圖片

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

z常用事件

zClick–按一下時發生

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

實例探討 sample2-a2 (1)

z程式功能

z影像地圖

z利用 onmouseover 與 onmouseout 改變圖片

z程式內容–HTML 模式部份

<asp:ImageButton

onmouseover="this.src='carLogo.jpg' "

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

實例探討 sample2-a2 (2)

z程式內容–WebForm1.aspx

private void carIB_Click(object sender,

System.Web.UI.ImageClickEventArgs e) {

if(e.X<=100)

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

else

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

}

課堂練習 sample2-b2

z程式功能

z圖型式密碼輸入

z基本概念

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

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

Session 當中

DropDownList 控制項

z DropDownList 控制項提供下拉式選單功能 z 常用屬性

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

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

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

z 常用事件

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

ListItemCollection 類別

z DropDownList 的 items屬性為

ListItemCollection 類別物件 (為一集合)

z 可直接透過索引取得集合中指定物件 z ex︰DropDownList1.Items[1]

z 常用屬性

z Count–取得集合中 ListItem 物件的數目 z SelectedItem–取得選取項目物件

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

z 常用方法

z Add–新增項目至集合中 (ListItem、string) z Clear–清除所有項目

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

ListItem 類別

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

z常用屬性

zText–設定項目顯示文字

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

zSelected–項目是否已被選取

實例探討 sample2-a3 (1)

z程式功能

z藝人簡介

z程式內容

struct star {

public string name;

public string country;

public string imgUrl;

}

實例探討 sample2-a3 (2)

z 程式內容

star[] myStar = new star[3];

private 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 = "韓國";

實例探討 sample2-a3 (3)

z 程式內容

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

}

實例探討 sample2-a3 (4)

z 程式內容

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

{

changeInfo();

}

private void changeInfo() {

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

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

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

}

ListBox 控制項

zListBox 控制項與 DropDownList 控制項 相似，提供清單方塊功能

z常用屬性

zItems–設定清單內容

(同為 ListItemCollection 類別物件) zSelectionMode–設定選取模式

zSingle–單選 zMultiple–多選

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

實例探討 sample2-a4 (1)

z 程式功能

z 購物清單

z 程式內容

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

實例探討 sample2-a4 (2)

z 程式內容

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

}

實例探討 sample2-a4 (3)

z 程式內容

private int total() {

int sum = 0;

foreach(ListItem item in shoppingLB.Items) {

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

}

return sum;

課堂練習 sample2-b3

z程式功能

z書藉分類清單

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

台式料理 日式料理

韓式料理 食譜

資料庫程式 設計

十天學會 JAVA C# 程式設

計入門 電腦

倚天屠龍記 神鵰俠侶

射鵰英雄傳 小說

CheckBox 控制項

zCheckBox 控制項提供核對方塊功能 z常用屬性

zText–設定標題文字

zTextAlign–設定標題文字顯示位置 zChecked–核對方塊是否已被勾選

z常用事件

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

(需將 AutoPostBack 屬性設定為 true)

CheckBoxList 控制項

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

z 常用屬性

z Items–設定清單內容

(同為 ListItemCollection 類別物件) z RepeatColumns–設定資料欄位數

z RepeatDirection–設定配置方向順序

z 常用事件

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

RadioButton 控制項

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

z常用屬性

zText–設定標題文字

zTextAlign–設定標題文字顯示位置 zChecked–核對方塊是否已被勾選 zGroupName–設定所屬群組

z常用事件

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

RadioButtonList 控制項

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

z 常用屬性

z Items–設定清單內容

(同為 ListItemCollection 類別物件) z RepeatColumns–設定資料欄位數

z RepeatDirection–設定配置方向順序

z 常用事件

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

實例探討 sample2-a5 (1)

z 程式功能

z 會員資料輸入

z 程式內容–WebForm1.aspx

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

{

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

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

Session.Add("education",

educationRBL.SelectedItem.Text);

實例探討 sample2-a5 (2)

z 程式內容–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");

}

實例探討 sample2-a5 (3)

z 程式內容–WebForm2.aspx

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

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

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

Response.Write("您的學歷為

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

Response.Write("您的興趣為

"+Session["hobby"].ToString());

}

課堂練習 sample2-b4

z程式功能

z電腦採購

z基本概念

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

中

Access 資料庫 (1)

z建立資料庫

z選擇 [檔案] 中的 [開新檔案] 會跳出開新檔 案視窗，在視窗新增部份選取 [空白資料庫]

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

Access 資料庫 (2)

z建立資料表

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

料表]

Access 資料庫 (3)

z儲存資料表

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

z資料表操作

z開啟

–輸入資料 z設計檢視

–修改資料表

欄位設定

ADO .NET

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

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

zEx︰MSSQL、Access、Excel、XML

zADO.NET 採用中斷連線的方式，減低系

統工作負載

.NET 資料提供者

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

z SQL .NET Data Provider

z

z

z OLE DB .NET Data Provider

z

z

Access…

z ODBC .NET Data Provider

z

DataAdapter 物件

zDataAdapter 物件為資料來源與 DataSet 之間的溝通橋樑

z常用方法

zFill–將資料來源資料內容填入資料集當中

zUpdate–更新資料來源中的資料內容

利用 DataAdapter 建立連線 (1)

z當我們從工具箱資料類別分類中拖拉

DataAdapter 物件時，即會產生組態設定

精靈視窗

利用 DataAdapter 建立連線 (2)

z選擇新增連接來建立連線

利用 DataAdapter 建立連線 (3)

z我們所採用的是 ACCESS 資料庫，因此

提供者必須選取 Microsoft Jet 4.0 OLE

DB Provider

利用 DataAdapter 建立連線 (4)

z在連線部份設定好資料來源檔案位置，

並測試連線是否正常

利用 DataAdapter 建立連線 (5)

z連線正常後按下確定按鈕即可產生連接

設定記錄

利用 DataAdapter 建立連線 (6)

z設定存取方式部份選擇使用 SQL 陳述式

利用 DataAdapter 建立連線 (7)

z在產生 SQL 陳述式設定中，可點選查詢

產生器來產生欲執行的 SQL 查詢語法

利用 DataAdapter 建立連線 (8)

z選擇欲查詢的資料表

利用 DataAdapter 建立連線 (9)

z勾選設定欲查詢的欄位，按下確定後即

可產生對應的 SQL 語法

利用 DataAdapter 建立連線 (10)

z完成 DataAdapter 設定

利用 DataAdapter 建立連線 (11)

z在 DataAdapter 屬性視窗中，可建立對應

的 DataSet (資料集)

利用 DataAdapter 建立連線 (12)

z按下確定即可產生 DataSet (資料集)，再

利用 DataAdapter 中 Fill 方法即可將所設

定的查詢內容填入 DataSet 當中

DataGrid 控制項 (1)

zDataGrid 控制項以表格方式顯示資料，

適用於表現資料庫內容 z常用屬性

zDataSource–設定資料來源

zAutoGenerateColumns–自動產生資料欄位 zColumns–設定欲包含的欄位

z常用方法

zDataBind–進行資料繫結動作

DataGrid 控制項 (2)

z顯示 DataSet 資料內容

z將 DataGrid 控制項 DataSource 屬性設定為 該 DataSet

z利用 DataAdapter 的 Fill 方法先將資料來源 資料填入 DataSet 中

z利用 DataGrid 的 DataBind 方法進行資料繫 結動作

z屬性設定

z自動格式化–內建色彩配置

z屬性產生器–自訂各項屬性內容

實例探討 sample2-a6

z程式功能

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

z程式內容

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

{

oleDbDataAdapter1.Fill(dataSet11);

DataGrid1.DataBind();

}

課堂練習 sample2-b5

z資料庫內容

z建立一會員帳號資料表 z包含帳號及密碼二個欄位

z程式功能

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

z基本概念

z利用 DataAdapter 建立所需連線

資料行類型

z繫結資料行

z顯示資料來源指定的欄位

z按鈕資料行

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

z超連結資料行

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

z樣板資料行

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

繫結資料行

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

z頁首文字–

DataGrid 上所顯 示的欄位名稱 z資料欄位–

指定繫結資料

來源的欄位名稱

選取按鈕資料行

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

z選取按鈕

z文字–選取按鈕上欲顯示的文字 (全一致) z文字欄位–選取按鈕上欲顯示的資料內容

(繫結)

z用法

z可透過 SelectedIndexChanged 事件捕捉使用者

選取狀況

DataGrid 儲存格資料

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

zItems 屬性–儲存 DataGrid 資料列的集合 zCells 屬性–儲存資料列的儲存格的集合

z用法

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

DataGrid1.Items[1].Cells[3].Text;

實例探討 sample2-a7

z 程式功能

z 將購物資訊顯示於 DataGrid 控制項中 z 計算總消費金額

z 程式內容

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

oleDbDataAdapter1.Fill(dataSet11);

DataGrid1.DataBind();

int total = 0;

foreach(DataGridItem item in DataGrid1.Items) total += int.Parse(item.Cells[1].Text);

課堂練習 sample2-b6

z 資料庫內容

z 建立一學生成績資料表

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

z 程式功能

z 計算全班成績總平均 z 設計選取欄位可供選取

z 列出被選取學生各科成績、總分及平均等資料 z 預設選取第一位學生

z 基本概念

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

超連結資料行

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

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

z 文字欄位–欲顯示的資料內容 (繫結) z 目標–網頁開啟位置

z URL 欄位–繫結超連結目標

z URL 格式字串–可透過此屬性傳遞網址列參數

z 用法

z 若將 URL 格式設定為 WebForm2.aspx?filename={0} ，

實例探討 sample2-a8

z程式功能

z我的最愛

z程式內容

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

{

oleDbDataAdapter1.Fill(dataSet11);

favoriteDG.DataBind();

課堂練習 sample2-b7

z 資料庫內容

z 建立一藝人簡介資料表

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

z 程式功能

z 加入一超連結資料行

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

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

z 基本概念

z 設定 URL 格式字串，使 URL 欄位資料能以網址列

按鈕資料行

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

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

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

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

z 用法

z 當按鈕資料行中的按鈕被點選時，會引發 ItemCommand 事件

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

z 在一個 DataGrid 控制項中可包含多個按鈕資料行，

可藉由命令名稱來判斷出被點選到的按鈕

實例探討 sample2-a9

z 程式功能

z 購物網站

z 程式內容

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

oleDbDataAdapter1.Fill(dataSet11);

itemDG.DataBind();

}

private void itemDG_ItemCommand(object source,

System.Web.UI.WebControls.DataGridCommandEventArgs e) {

shoppingLB.Items.Add(e.Item.Cells[1].Text+ "–"

+e.Item.Cells[2].Text);

totalLB.Text = (int.Parse(totalLB.Text) +

課堂練習 sample2-b8

z資料庫內容

z建立一商品資訊資料表 z包含項目及金額二個欄位

z程式功能

z修改 sample2-a9 多加入移除按鈕

z基本概念

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

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

分頁

z DataGrid 控制項允許我們在資料筆數過多時，

能利用分頁檢視方式來顯示資料

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

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

z 利用 PageIndexChanged 事件捕捉使用者選擇其它分 頁，可從事件中物件參數 e 的 NewPageIndex 屬性 得知使用者欲前往的分頁

z 修改 DataGrid 中 CurrentPageIndex 屬性，並重新進 行繫結動作

課堂練習 sample2-b9

z 資料庫內容

z 建立一學號資料表

z 包含學號及姓名二個欄位 z 填入十筆學生資料

z 程式功能

z 利用分頁方式檢視資料

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

z 基本概念

z 利用 PageIndexChanged 事件參數來設定 DataGrid 控制項的 CurrentPageIndex 屬性