asp - epaper.gotop.com.twepaper.gotop.com.tw/pdf/ael007600.pdf · asp.net 3.5完美入門 —4...

ASP.NET 常用的標準控制項

4-1 ASP.NET標準伺服器控制項

4-2 Label控制項

4-3 TextBox控制項

4-4 Button控制項

4-5 DropDownList控制項

4-6 ListBox控制項

4-7 CheckBox與 CheckBoxList控制項

4-7-1 CheckBox控制項

4-7-2 CheckBoxList控制項

4-8 RadioButton與 RadioButtonList控制項

4-8-1 RadioButton控制項

4-8-2 RadioButtonList控制項

4-9 Calendar日曆控制項

4-10 Panel控制項

4-11 PlaceHolder控制項

4-12 利用 ASP.NET程式偵測瀏覽器的版本類型資訊

ASP.NET 3.5 完美入門 — 使用 C#

4-2

本章將介紹 ASP.NET 最基本的標準控制項，如 Label、TextBox、Button等常用的伺服器控制項，教導如何使用這些控制項，包含：控制項建立、屬

性設定、事件程式撰寫等等，讓您了解 ASP.NET 控制項的建立與運用。

4-1 ASP.NET 標準伺服器控制項

首先要解釋：「什麼是 ASP.NET 伺服器控制項？」一般而言，HTML的物件基本上是在使用者端（Client 端）的瀏覽器執行，其使用的是使用者

端的電腦資源，例如以下的 HTML 宣告：

<input id="Text1" type="text" />

<input id="Button1" type="button" value="button" />

但由 HTML 的前端控制項功能過於簡單，且也無法配合 C# 或 VB 來撰

寫程式，更不可能與.NET Framework 進行廣泛的結合，是故微軟推出了

【ASP.NET 伺服器控制項】，而 ASP.NET 的控制項是在後端伺服器執行，

故稱為「伺服器控制項」，其使用的是伺服器之電腦資源。ASP.NET 控制

項在伺服端執行，雖然伺服器的負荷較大（因為必需處理所有使用者的請

求，以及所有的 ASP.NET 程式運算，故資源耗費較大），但是安全性及功

能性卻更為強大，再者 ASP.NET 內建的控制項種類比起基本的 HTML 控制

項來得更多，又可以透過 C# 及 VB 進行程式開發，這些 ASP.NET 伺服器

控制項眾多優點是 HTML 控制項所不能及的。

ASP.NET 標準伺服器控制項

那什麼又是〝標準伺服器控制項〞？其實這只是一種概念性的分類，微

軟將一些功能基本且常用的控制項歸類在「標準控制項」之中，放在 Visual Studio 開發工具中的【標準】索引標籤之中。

第四章 ASP.NET 常用的標準控制項

4-3

圖 4-1 標準控制項

上圖之中，當我們使用 VS 2008 進行 ASP.NET 程式開發時，就是從左

側的工具箱選擇所需的控制項，再拖曳到中間的 ASP.NET Web Form 表單，

並一一設定控制項的各種屬性與撰寫事件程式，這就是 ASP.NET 網頁最基

本的程式設計過程。

在 VS 2008 工具箱中的【標準】索引標籤之中，提供下列標準控制項：

Label

TextBox

Button

LinkButton

ImageButton

HyperLink

DropDownList

ListBox

CheckBox

CheckBoxList

RadioButton

RadioButtonList

Image

ImageMap

Table

BulletedList

HiddenField

Literal

Calendar

AdRotator

FileUpload

Wizard

Xml

MultiView

Panel

PlaceHolder

View

Substitution

Localize

拖曳

標準控制項 Web Form 表單

設定控制項屬性

屬性視窗


4-4

ASP.NET 伺服器控制項本身內建各種屬性、事件與方法，透過這三者

的設定與程式的撰寫，就可以建立各種所需的網頁應用程式及功能。以下說

明屬性、事件與方法的作用：

屬性：屬性是控制項種種的特性，比如說顏色、長、寬大小等特性，

這些都歸類在屬性之中。

事件：事件是指控制項面對不同狀況發生時，提供相對應的程式處

理，做法是在事件處理常式中撰寫自訂的程式。

方法：方法是控制項所支援的一些執行功能，一個控制項本身多半

都會內建許多相關方法，例如：ToString()方法就是進行轉換成字

串的功能。

所以說 ASP.NET 程式設計就是不斷的在玩這些控制項的屬性、方法和

事件，然後寫入資料庫，或是從資料庫讀取資料再指定給這些控制項，如此

而已。

而 VS 2008 的工具箱中，除了標準控制項以外，尚包含其他類型控制

項，例如：資料、驗證、巡覽、登入、Web Parts、AJAX 擴充、HTML、Silverlight這幾大分類，對於資料、驗證、巡覽、登入這四大類的控制項在後續章節會

陸續介紹，以下先針對常用的標準控制項進行介紹。

圖 4-2 VS 2008 工具箱的控制項分類


4-5

4-2 Label 控制項

Label 伺服器控制項主要用途是顯示文字資訊。

圖 4-3 Label 控制項圖示

Label 控制項屬性

下表為 Label 控制項常用屬性說明。

表 4-1 Label 控制項常用屬性

屬性說明

ID 控制項的識別名稱，如同人的身份證字號是唯一識別，在同一

個 WebForm 中不能重複。

Text 顯示文字。設定 Label 所要顯示的文字內容。

Visible 設定控制項是否可見。設定 Label 所要顯示文字是否可以被看得

見，若其屬性被設為 true 則看得見 Label 文字；若其屬性被設為

false 則 Label 文字會被隱藏起來。

ForeColor 前景顏色。設定 Label 所要顯示文字的前景顏色。

BackColor 背景顏色。設定 Label 所要顯示文字的背景顏色。

Height 高度。設定 Label 控制項高度。

Width 寬度。設定 Label 控制項寬度。

Font 字型。設定 Label 控制項的各種字型屬性。

ToolTip 文字提示。設定當滑鼠移到 TextBox 控制項上面時所產生的提

示文字。

幾乎所有 ASP.NET 控制項的屬性設定或調整，都可以用下兩種方式：

1. 透過【屬性視窗】調整屬性：也就是在 Web Form 畫面設計時，可

透過【屬性視窗】調整與設定控制項屬性。

2. 透過程式設計調整屬性：透過 C# 或 VB 程式動態改變控制項屬性。


4-6

範例 4-1 Label 控制項的建立與運用

本範例將示範 Label 控制項的建立，並透過【屬性視窗】及 C# 程式兩

種方式設定控制項的諸多屬性，請參考 LabelControl.aspx 程式，步驟說明

如下：

：拖曳 Label 控制項到 Web Form 表單

首先在專案中加入 LabelControl.aspx 頁面，並從工具箱拖曳一個 Label 控制

項到 Web Form 表單中。

：設定 Label 控制項屬性

接著點選 Label 控制項，並在屬性視窗中設定以下 6 個屬性值。

屬性設定值

ID txtInfo

Text 這是 Label 控制項

ToolTip Hello...Label 控制項

BackColor #FFFF99

ForeColor Blue

Font-Name 標楷體


4-7

圖 4-4 拖曳建立 Label 控制項及設定屬性

：執行網頁測試

除了原本所教將網頁先設定為起始頁，再以【F5】按鍵執行網頁外，另一

種方式是直接在 LabelControl.aspx 上按滑鼠右鍵選擇【在瀏覽器中檢視】

即可執行網頁，這也是常用的程式執行方式，且此模式不會進入偵錯模式。

：以程式設定 Label 控制項屬性

前面曾提過，控制項屬性除了可用屬性視窗設定外，還可以透過 C# 程式動

態設定，接著請加入第二個 Label 控制項，將其 ID 屬性改為「txtPrg」，接

著開啓 LabelControl.aspx.cs 程式，在 Page_Load 事件中加入下列程式：

01 ...略

02 using System.Drawing;

03

04 public partial class LabelControl : System.Web.UI.Page

05 {

屬性視窗設定

引用 Color 功能所需的命名空間


4-8

06 protected void Page_Load(object sender, EventArgs e)

07 {

08 if (!IsPostBack)

09 {

10 //透過 C#程式設定控制項屬性

11 txtPrg.Text = "這是以程式動態設定 Label 控制項的屬性";

12 txtPrg.ToolTip = "程式動態設定 Label 控制項";

13 txtPrg.ForeColor = Color.Aqua;

14 txtPrg.BackColor = Color.Orange;

15 txtPrg.Font.Name = "標楷體";

16 txtPrg.Font.Size = FontUnit.XLarge;

17 }

18 }

19 }

程式說明：

1. 第 2 行程式「using System.Drawing;」是為了第 13 及 14 行的

「Color.Aqua」指定顏色所需的命名空間。日後當您使用許多額外函

式功能時，多半都會需要加入額外的命名空間參考。

2. 第 8 行的「if (!IsPostBack){…}」判斷式，是用來判斷 Page 是否為

第一次執行，只有在第一次執行時，才需要設定 Label 控制項屬性；

若沒有加入這行判斷式的話，則每次網頁重新 PostBack 時，都會

重複執行，浪費伺服器效能。

圖 4-5 Label 控制項執行畫面

所謂的 PostBack 是指將.aspx 頁面回傳給後端網頁伺服器處理，而

PostBack中文也稱為回貼。

限定只有第一次會執行

附註


4-9

4-3 TextBox 控制項

TextBox 伺服器控制項主要是讓使用者輸入文字訊息。

圖 4-6 TextBox 控制項圖示

TextBox 控制項屬性

TextBox 伺服器控制項常用屬性除了 ID、Text、Visible、ForeColor、BackColor、Height、Width 與 ToolTip 之外，尚包括下表幾個常用屬性。

表 4-2 TextBox 控制項常用屬性

屬性說明

Enabled 啓用狀態。設定 TextBox 是否有作用，無作用時呈現灰色狀態。

AutoPostBack 自動回傳。指示在 TextBox 控制項內容變更時，是否自動發生

伺服器的自動回傳。

MaxLength 最大長度。設定最大可輸入字元長度。

ReadOnly 唯讀。

TextMode 文字模式。可設定成單行、多行或密碼模式。

像 Enabled 及 AutoPostBack 屬性是許多控制項共通之屬性，是故後

續不再重複條列說明。

TextBox 控制項事件

下表為 TextBox 控制項支援的事件。

表 4-3 TextBox 控制項常用事件

事件說明

TextChanged 當 TextBox 內容回傳伺服器發生變更時會引發 TextChanged事件處理。

附註


4-10

因 TextBox 少有單獨使用的情況，多半是與 Button 按鈕控制項進行搭

配使用，故 TextBox 控制項在這沒有範例，將在後續的 Button 控制項範例

中一併講解。

4-4 Button 控制項

Button 伺服器控制項多半是和其他控制項做搭配，如按下 Button 之後，

會改變其他控制項的屬性及狀態，例如：改變 Label 、 TextBox 、

DropDownList、GridView 等伺服器控制項的屬性或狀態，或是執行特定程

式碼。

圖 4-7 Button 控制項圖示

Button 控制項屬性

Button 伺服器控制項屬性除了 ID、Text、Visible、 ForeColor、BackColor、Height、Width 與 ToolTip 之外，尚包括下表幾個常用屬性。而

這些屬性在稍微深入的程式設計中比較常用到。

表 4-4 Button 控制項屬性

屬性說明

CauseValidation 指示 Button 控制項按下時，是否執行驗證。

CommandArgument 取得或設定選擇性（ Optional ）參數，與相關的 CommandName 一起傳遞至 Command 事件。

CommandName 取得或設定與 Button 控制項關聯的命令名稱，這個命令

名稱將傳遞至 Command 事件。

OnClientClick 取得或設定選擇性（ Optional ）參數，與相關的 CommandName 一起傳遞至 Command 事件。

PostBackUrl 指定目前的網頁要張貼到之目的地網頁的 URL。

UseSubmitBehavior 指示 Button 控制項使用用戶端瀏覽器的送出機制或

ASP.NET 回傳機制。

ValidationGroup 設定 Button 控制項所屬的驗證控制項群組。


4-11

Button 控制項事件

Button 控制項最常用之事件為 Click 事件。

表 4-5 Button 控制項事件

屬性說明

Click 當按下 Button 按鈕時，所引發的事件。

範例 4-2 TextBox 及 Button 控制項的應用

本範例將示範 TextBox 及 Button 控制項的合併應用，其中較為特別的

是 TextBox 的 TextMode，可以讓 TextBox 控制項設定為單行、多行或密碼

模式，請參考 InputData.aspx 程式，步驟說明如下：

：建立控制項及屬性設定

請建立如下的控制項配置，實際的屬性設定請參考程式。

圖 4-8 TextBox 控制項建立及版面配置

：設定 TextBox 之 TextMode 屬性

1. 將密碼之 TextBox 控制項的 TextMode 屬性設定為「Password」。

2. 將留言之 TextBox 控制項的 TextMode 屬性設定為「MultiLine」。

SingleLine Password

MulitLine


4-12

：建立 Button 按鈕之 Click 事件程式

請雙擊【確定】Button 按鈕，加入將網頁導向 ShowData.aspx 之程式：

01 //導向另一個網頁

02 protected void btnOK_Click(object sender, EventArgs e)

03 {

04 //傳統寫法

05 Response.Redirect("ShowData.aspx?ID=" + txtID.Text + "&Password=" +

txtPassword.Text + "&Msg=" + txtMsg.Text);

06 //使用字串參數的型式

07 Response.Redirect(string.Format("ShowData.aspx?ID={0}&Password={1}&Msg={2}",

txtID.Text, txtPassword.Text, txtMsg.Text));

08 }

程式說明：

以上將網頁導向切換到另一網頁的語法型式有兩種，只需擇一即可。完

成後請執行 InputData.aspx 程式，並輸入資料，按下【確定】按鈕後，即會

導向 ShowData.aspx 網頁，將使用者資料顯示出來。

圖 4-9 TextBox 及 Button 控制項的運用


4-13

而 ShowData.aspx 程式如下：


02 {

03 Response.Write("帳號：" + Request.QueryString["ID"] + "<BR/>");

04 Response.Write("密碼：" + Request.QueryString["Password"] + "<BR/>");

05 Response.Write("輸入訊息：" + Request.QueryString["Msg"] + "<BR/>");

06 }

網頁導向切換的技巧除了本範例所教之外，還有許多其他不同的方式

與技巧，完整的議題在第九章將會詳細討論。

4-5 DropDownList 控制項

DropDownList 是下拉式清單伺服器控制項，可讓使用者從預先定義的

下拉式清單選取單一項目。而定義 DropDownList 控制項項目的方式有兩

種，一是在【屬性視窗】中預先設定，另外一種是用程式動態設定，於執行

時再將項目動態載入下拉式選單中。

圖 4-10 DropDownList 控制項圖示

DropDownList 控制項屬性

DropDownList 伺服器控制項屬性除了 ID、Text、Visible、ForeColor、BackColor、Height、Width 與 ToolTip 之外，尚包括下表幾個常用屬性。

表 4-6 DropDownList 控制項常用屬性

屬性說明

AppendDataBoundItems 指示是否在資料繫結之前清除清單項目。

AutoPostBack 指示在使用者變更清單選取項目時，是否會自動向伺服

器回傳。

附註


4-14

屬性說明

DataSource 設定資料繫結來源。

DataSourceID 設定資料繫結來源控制項 ID

DataMember 設定資料繫結控制項繫結至的資料清單名稱。

DataTextField 設定提供清單項目文字內容的資料來源的欄位。

DataTextFormatString 設定用來控制資料繫結至清單控制項時顯示方式的格

式字串。

Items 取得或設定 DropDownList 控制項中項目的集合。

DropDownList 控制項事件

DropDownList 控制項最常用事件就是 SelectedIndexChanged，說明如

下表。

表 4-7 DropDownList 控制項常用事件

屬性說明

SelectedIndexChanged 當 DropDownList 被選取的項目改變時，會引發

SelectedIndexChanged 事件。

範例 4-3 以 DropDownList 控制項選取使用者居住地

本範例將示範以 DropDownList 控制項讓使用者選取居住地點，包括居

住地區及城市兩個選項，居住地區使用屬性視窗預先加入項目，城市則使用

程式動態加入的技巧，且選取地區的 DropDownList 控制項後，會對城市

DropDownList 控制項產生連動關係，請參考 DwnControl.aspx，步驟說明如

下：

：建立控制項及配置

請建立 DropDownList 相關控制項，屬性設定及版面配置請參考程式，並將

兩個 DropDownList 控制項的 AutoPostBack 屬性設為 true。


4-15

圖 4-11 DropDownList 控制項及版面配置

：以屬性視窗預先建立 DropDownList 控制項之項目

接著在屬性視窗中點選DropDownList控制項之【Items】屬性在ListItem集合編輯器中加入四個成員：居住地區、美國、大陸、台灣，此四個成員之

屬性設定如下。

成員 Value Text Selected

居住地區 0 ===請選擇居住地區=== True

美國 1 美國 False

大陸 2 大陸 False

台灣 3 台灣 False

圖 4-12 編輯 DropDownList 成員項目


4-16

：以程式建立地區及城市 DropDownList 控制項之間的連動

請雙擊地區 DropDownList 控制項，在 SelectedIndexChanged 事件中加入下

列程式：

01 //區域 DropDownList 選擇改變時，動態建立相對應之城市 DropDownList 項目

02 protected void dwnRegion_SelectedIndexChanged(object sender, EventArgs e)

03 {

04 dwnCity.Items.Clear(); //清除 DropDownList 控制項之所有項目

05

06 //依所選擇之地區，顯示該地區之城市

07 switch (dwnRegion.SelectedValue)

08 {

09 case "0":

10 //加入項目到 DropDownList 控制項

11 dwnCity.Items.Add(new ListItem("===請先選擇區域===", "0"));

12 dwnCity.Enabled = false;

13 break;

14 case "1":

15 dwnCity.Items.Add(new ListItem("===請選擇城市===", "0"));

16 dwnCity.Items.Add(new ListItem("紐約","1"));

17 dwnCity.Items.Add(new ListItem("芝加哥","2"));

18 dwnCity.Items.Add(new ListItem("拉斯維加斯","3"));

19 dwnCity.Enabled = true;

20 break;

21 case "2":


23 dwnCity.Items.Add(new ListItem("北京", "1"));

24 dwnCity.Items.Add(new ListItem("上海", "2"));

25 dwnCity.Items.Add(new ListItem("香港", "3"));


27 break;

28 case "3":


30 dwnCity.Items.Add(new ListItem("台北", "1"));

31 dwnCity.Items.Add(new ListItem("台中", "2"));

32 dwnCity.Items.Add(new ListItem("高雄", "3"));


34 break;

35 }

36 }


4-17

程式說明：

switch() {…}這是一種多重條件判斷的陳述式，其判斷之參數是

DropDownList 項目之 Value 值，而 Value 值是在項目建立之初就由我們自

行決定了。而 switch() {…}陳述式的語法在第五章將會介紹。

：顯示居住所在地區及城市資訊

請雙擊城市 DropDownList 控制項，在 SelectedIndexChanged 事件中加入下

列程式：

01 //顯示居住所在地區及城市

02 protected void dwnCity_SelectedIndexChanged(object sender, EventArgs e)

03 {

04 if (dwnCity.SelectedValue != "0")

05 {

06 txtMsg.Text = string.Format("您居住的地點為{0}，{1}",

dwnRegion.SelectedItem.Text,dwnCity.SelectedItem.Text);

07 }

08 else

09 {

10 txtMsg.Text = "";

11 }

12 }

程式說明：

完成後請執行 DwnControl.aspx 程式，執行畫面如下圖。

圖 4-13 DropDownList 控制項的應用


4-18

4-6 ListBox 控制項

ListBox 控制項可以讓使用者於預先定義的清單中，進行多重項目的選

擇。且 ListBox 可以一次呈現多個項目，不像 DropDownList 一次只能顯示

一個項目。

圖 4-14 ListBox 控制項圖示

ListBox 控制項屬性

ListBox 伺服器控制項屬性除了 AppendDataBoundItems、AutoPostBack、DataSource 、 DataSourceID 、 DataMember 、 DataTextField 、 DataText FormatString、DataValueField 之外，尚包括下表幾個常用屬性。

表 4-8 ListBox 控制項屬性

屬性說明

Items 設定加入 ListBox 控制項的成員項目，如加入一個 LstBox控制項的成員項目。

SelectionMode 設定 ListBox 控制項是否允許項目多重選取，若為 Multiple則可多重選取，預設為 single 不可多重選取。

Rows 取得或設定 ListBox 控制項中顯示的列數。

DataSource 設定填入 ListBox 項目清單的資料來源。

ListBox 控制項事件

ListBox 控制項支援事件如下表。

表 4-9 ListBox 控制項事件

屬性說明

SelectedIndexChanged 當 ListBox 之選取項目改變時（回貼至伺服器）。

TextChanged 當 ListBox控制項 Text和 SelectedValue屬性變更時發生。


4-19

以下是 ListBox 控制項在使用上需注意的地方：

1. ListBox 控制項多重選取時，請以滑鼠搭配 Ctrl 鍵或 Shift 鍵來做多

重選取。

2. 如果 ListBox 控制項在允許多重選取的情況下，若要偵測使用者選

取了哪幾個項目，請以迴圈依序判斷 Items 集合中每一個成員項目

的 Selected 屬性，若 Selected 屬性為 true，則表示該項目已被選取。

範例 4-4 使用 ListBox 控制項呈現商品之選擇清單

本範例將以 ListBox 控制項呈現電腦商品之清單，提供顧客選擇所需購

買之產品項目，請參考 LBoxControl.aspx 程式，步驟說明如下：

圖 4-15 ListBox 控制項的應用

：建立 ListBox 控制項及配置

請建立 ListBox 及相關控制項，將兩個 ListBox 控制項的 SelectionMode 屬

性設為 Multiple，相關屬性設定及版面配置請參考程式。


4-20

：於 Page_Load 事件建立 ListBox 控制項清單項目

為了建立 ListBox控制項之項目清單，請在 Page_Load事件建立下列程式碼：


02 {

03 if (!IsPostBack)

04 {

05 //加入 ListBox 之項目

06 lbxSource.Items.Add("CPU 處理器");

07 lbxSource.Items.Add("主機板");

08 lbxSource.Items.Add("記憶體");

09 lbxSource.Items.Add("顯示卡");

10 lbxSource.Items.Add("硬碟");

11 lbxSource.Items.Add("DVD 燒錄器");

12 lbxSource.Items.Add("滑鼠");

13 lbxSource.Items.Add("LCD 夜晶螢幕");

14 lbxSource.Items.Add("電源延長線插座");

15 lbxSource.Items.Add("散熱風扇");

16 lbxSource.Items.Add("喇叭");

17 lbxSource.Items.Add("投影機");

18 }

19 }

：建立按鈕之加入及移除商品程式

接著在四個 ImageButton 按鈕加入下列 Click 事件程式，作用是加入或移除

商品項目：

01 //將商品加入選購清單之中

02 protected void btnAdd_Click(object sender, ImageClickEventArgs e)

03 {

04 //將商品加入選購清單之中

05 for (int i = 0; i < lbxSource.Items.Count; i++)

06 {

07 if (lbxSource.Items[i].Selected == true)

08 {

09 lbxTarget.Items.Add(lbxSource.Items[i].Text);

10 lbxSource.Items[i].Enabled = false;

11 }

12 }

13


4-21

14 //移除已加入之商品，從最後一筆 Item 向前移除

15 for (int i = lbxSource.Items.Count - 1; i >= 0; i--)

16 {

17 if (lbxSource.Items[i].Enabled == false)

18 {

19 lbxSource.Items.RemoveAt(i);

20 }

21 }

22 }

23

24 //將所有商品加入選購清單之中

25 protected void btnAddAll_Click(object sender, ImageClickEventArgs e)

26 {

27 if (lbxSource.Items.Count > 0)

28 {

29 for (int i = 0; i < lbxSource.Items.Count; i++)

30 {

31 lbxTarget.Items.Add(lbxSource.Items[i].Text);

32 }

33 }

34

35 lbxSource.Items.Clear(); //清除所有項目

36 }

37

38 //將商品自選購清單中移除

39 protected void btnRemove_Click(object sender, ImageClickEventArgs e)

40 {

41 //將商品自選購清單中移除

42 for (int i = 0; i < lbxTarget.Items.Count; i++)

43 {

44 if (lbxTarget.Items[i].Selected == true)

45 {

46 lbxSource.Items.Add(lbxTarget.Items[i].Text);

47 lbxTarget.Items[i].Enabled = false;

48 }

49 }

50

51 //移除選購清單之商品，從最後一筆 Item 向前移除

52 for (int i = lbxTarget.Items.Count - 1; i >= 0; i--)

53 {

54 if (lbxTarget.Items[i].Enabled == false)

55 {

56 lbxTarget.Items.RemoveAt(i);

57 }


4-22

58

59 }

60 }

61

62 //將所有商品自選購清單中移除

63 protected void btnRemoveAll_Click(object sender, ImageClickEventArgs e)

64 {

65 if (lbxTarget.Items.Count > 0)

66 {

67 for (int i = 0; i < lbxTarget.Items.Count; i++)

68 {

69 lbxSource.Items.Add(lbxTarget.Items[i].Text);

70 }

71 }

72

73 lbxTarget.Items.Clear(); //清除所有項目

74 }

75

76 //顯示最後確定購買之商品項目

77 protected void btnBuy_Click(object sender, EventArgs e)

78 {

79 //Response.Write(lbxTarget.Items.Count);

80 if (lbxTarget.Items.Count > 0)

81 {

82 int i = 1;

83 foreach (ListItem item in lbxTarget.Items)

84 {

85 txtMsg.Text += string.Format("{0:00}.{1}<BR/>", i, item.Text);

86 i++;

87 }

88 }

89 else

90 {

91 Response.Write("<script>alert('請先選購商品！')</script>");

92 }

93 }

程式說明：

以上比較需要說明的是商品自 lbxSource 加入到 lbxTarget 之後，則原

來的商品就必須自原有 ListBox 中移除，而移除必須從最後一筆開始向前移

除，否則若是從第一筆開始移除，則後續項目的索引會因為變動而產生錯誤

的索引位置，進而移除錯誤的項目。


4-23

4-7 CheckBox 與 CheckBoxList 控制項

CheckBox 與 CheckBoxList 控制項都是屬於核取方塊功能的控制項。二

者的差異在於前者提供單一的核取方塊選項，後者提供多重核取方塊選項，

以下詳述二者之功能。

4-7-1 CheckBox 控制項

CheckBox 伺服器控制項就是所謂的核取方塊，其用途是提供單一選項

供使用者選取。若使用者選取 CheckBox，則 Checked 屬性為真（true），

若 CheckBox 無選取，則 Checked 屬性為假（false）。

圖 4-16 CheckBox 控制項圖示

CheckBox 控制項屬性

CheckBox 控制項屬性除了 ID、Text、Visible、ForeColor、BackColor、Height、Width 與 ToolTip 之外，尚包括下表幾個常用屬性。

表 4-10 CheckBox 控制項屬性

屬性說明

Checked 以 Checked 屬性來判斷 CheckBox 伺服器控制項是否選

取，若 Checked 屬性為 true 則表示被選取，反之若 Checked屬性為 false 則表示沒有被選取。

AutoPostBack 用來指示是否在控制項被按下後，自動回傳 CheckBox 狀態

到伺服器，讓伺服器依 CheckBox 狀態為 true 或 false 來進

行額外的程式處理。

Enabled 設定 CheckBox 控制項是否作用：若 Enabled 屬性為 true 則有作用，若為 false 則無作用，無作用時，使用者將不能進

行任何的選取動做。


4-24

CheckBox 控制項事件

CheckBox 控制項支援屬性如下表。

表 4-11 CheckBox 控制項事件

事件說明

CheckedChanged 當 CheckBox 控制項被選取時，就會引發 CheckedChanged事件。故若要在 CheckBox 控制項狀態改變時執行程式處

理，請在 CheckedChanged 事件的程式區塊中加入程式碼。

請注意CheckedChanged事件中程式碼必須在提交給伺服器後才會執

行的，但預設 CheckBox 控制項被選取時，並不會立即將

CheckedChanged 事件中程式碼傳回給伺服器處理。如果希望使用者

一選取 CheckBox控制項時，就要立刻執行 CheckedChanged事件中

程式碼，請將 CheckBox控制項的 AutoPostBack屬性設為 true。

4-7-2 CheckBoxList 控制項

CheckBoxList 伺服器控制項是多重選取的核取方塊群組，提供多重的

核取方塊（CheckBox）供使用者選取。比如說建立一份問卷調查，調查受

訪者的興趣，興趣的類型可能有看書、聽音樂、唱歌、看電影、上網及其他，

像這樣子的情況，就可以把這些個別項目建立在具備多重選取的

CheckBoxList 核取方塊群組中。然而與 CheckBox 相同，若使用者選取

CheckBoxList 中的項目則 Checked 屬性為真（true），若 CheckBox 無選取

則 Checked 屬性為假（false）。

圖 4-17 CheckBoxList 控制項圖示

附註


4-25

CheckBoxList 控制項屬性

CheckBoxList 控制項常用屬性如下表。

表 4-12 CheckBoxList 控制項屬性

屬性說明

Items 用來設定 CheckBoxList 項目，如加入一個項目到 CheckBoxList之中。

DataSource 用來設定 CheckBoxList 控制項的資料來源。

DataTextField 提供 CheckBoxList 項目的文字欄位。

DataValueField 提供 CheckBoxList 項目值的欄位。

Enabled 設定 CheckBoxList 控制項是否啓用。

RepeatColumns 設定 CheckBoxList 控制項每列所顯示的欄位數。

RepeatDirection 設定 CheckBoxList 控制項是以水平或垂直方向顯示欄位。

RepeatLayout 設定 CheckBoxList 控制項的配置。有 Table 及 Flow 兩種選項。

SelectedItem 取得 CheckBoxList中的選取項目，但只取最低順序的那個項目。

SelectedIndex 取得 CheckBoxList中的選取項目索引，但只取最低索引的那筆。

CheckBoxList 控制項事件

CheckBoxList 控制項主要事件如下表。

表 4-13 CheckBoxList 控制項事件

事件說明

SelectedIndexChanged

當 CheckBoxList 控制項被選取時，就會引發

SelectedIndexChanged 事件。故若要在 CheckBoxList 控制項狀態改變時進行一些程式處理，請在

SelectedIndexChanged 事件的程式區塊中加入程式碼。


4-26

1. 如果希望使用者一改變 CheckBoxList 控制項狀態，就立刻執行

SelectedIndexChanged事件處理，請將 AutoPostBack屬性設定為

true。

2. SelectedItem屬性預設值為 null，而 SelectedIndex屬性的預設值

為-1。

3. 將項目加入 CheckBoxList 控制項的方式有兩種，一為設計階段加

入靜態項目，另一個就是在執行階段透過程式動態加入項目。

範例 4-5 使用 CheckBoxList 控制項建立簡易之問卷調查表單

在此將以 CheckBoxList 控制項設計簡易之問卷調查表，用以調查使用

者之興趣，並提供多重選取，請參考 cbxControl.aspx 程式，步驟說明如下：

圖 4-18 以 CheckBoxList 控制項顯示問卷調查項目

：建立 CheckBoxList 控制項及版面配置

請建立 CheckBoxList 及相關控制項，實際屬性設定及版面配置請參考程式。

附註


4-27

：建立顯示使用者興趣之程式

請雙擊【確定】按鈕，加入 Click 事件程式，用來顯示使用者選擇的興趣：

01 //顯示使用者興趣

02 protected void btnOK_Click(object sender, EventArgs e)

03 {


05 int counter = 1;

06 for (int i = 0; i < cbxHabits.Items.Count; i++)

07 {

08 //判斷 CheckBoxList 項目是否被選取

09 if (cbxHabits.Items[i].Selected == true)

10 {

11 //若被選取，則加入興趣文字列表

12 txtMsg.Text += counter + "." + cbxHabits.Items[i].Text + "<BR/>";

13 counter++;

14 }

15 }

16 }

4-8 RadioButton 與 RadioButtonList 控制項

RadioButton 與 RadioButtonList 控制項是提供選項按鈕的控制項，二者

的差異在於前者提供單一的選項按鈕，後者提供多重的選項按鈕，以下詳述

二者之功能。

4-8-1 RadioButton 控制項

RadioButton 伺服器控制項就是所謂的個別選項按鈕，其主要用途是供

使用者從預設的選項按鈕清單中選取一個項目。比如說以 RadioButton 控制

項呈現血型選項按鈕，血型有 A 型、B 型、O 型、AB 型等，讓使用者可以

選擇不同血型，且 RadioButton 控制項具有互斥的特性，也就是一次只能選

取其中一個選項按鈕。

圖 4-19 RadioButton 控制項圖示


4-28

RadioButton 控制項屬性

RadioButton 控制項常用屬性如下表。

表 4-14 RadioButton 控制項屬性

屬性說明

Checked 可以在版面設計階段或程式執行時，設定已選取的選項按鈕，若

使用者選取 RadioButton 控制項則其 Checked 屬性為真（true），

若 RadioButton 無選取則其屬性為假（false）。

GroupName 將數個 RadioButton 控制項組成一個群組，而同一個群組將會具

有互斥的特性，也就是一次只會選取其中一個 RadioButton 控制

項。

AutoPostBack 是用來指示是否在選取 RadioButton 控制項時，自動將

RadioButton 控制項狀態回傳到伺服器，讓伺服器依 RadioButton控制項狀態為 true 或 false 來進行額外的程式處理。

Text 設定 RadioButton 控制項要顯示的文字內容。

Enabled 設定 CheckBox 控制項是否有作用，若 Enabled 屬性為 true 則有

作用，若為 false 則無作用，無作用時，使用者將不能進行任何

的選取動做。

AccessKey 為 RadioButton 控制項設定快速鍵。

RadioButton 控制項事件

RadioButton 控制項主要支援 CheckedChanged 事件，說明如下表。

表 4-15 RadioButton 控制項事件

事件說明

CheckedChanged

當 RadioButton 控制項被選取時，就會引發

CheckedChanged 事件，故我們若要在 RadioButton 控制項

狀態改變時進行一些程式處理，請在 CheckedChanged 事

件的程式區塊中加入加入您的程式碼。但如果您希望使用

者一改變了 RadioButton 控制項狀態，就立刻執行

CheckedChanged 事件處理，請配合將 AutoPostBack 屬性

設定為 true。


4-29

範例 4-6 以 RadioButton 控制項建立學歷選項按鈕

本範例將以 RadioButton 控制項顯示學歷選項按鈕，讓使用者從中挑選

其最高學歷，請參考 rdoDegree.aspx 程式，步驟說明如下：

圖 4-20 最高學歷之按鈕選項執行畫面

：建立 RadioButton 相關控制項

請建立四個 RadioButton 控制項，分別對應高中、大學、碩士與博士四個按

鈕選項，屬性設定如下。其中四個 RadioButton 控制項之 GroupName 皆設

定為「Degree」，目的是為了讓它們達到互斥效果，強制只有唯一選項可以

被選擇。

控制項 ID 屬性設定值

Text 高中 rdoSenior

GroupName Degree

Text 大學/專科 rdoUniversity

GroupName Degree

Text 碩士 rdoMaster

GroupName Degree

Text 博士 rdoDoctor

GroupName Degree


4-30

：建立顯示學歷之事件程式

請雙擊【確定】按鈕，加入判斷最高學歷之事件程式：

01 //顯示最高學歷

02 protected void btnSumbit_Click(object sender, EventArgs e)

03 {

04 //判斷選擇的 RadioButton 控制項

05 if (rdoSenior.Checked)

06 {

07 txtMsg.Text = "你的最高學歷為：" + rdoSenior.Text;

08 }

09 else if (rdoUniversity.Checked)

10 {

11 txtMsg.Text = "你的最高學歷為：" + rdoUniversity.Text;

12 }

13 else if (rdoMaster.Checked)

14 {

15 txtMsg.Text = "你的最高學歷為：" + rdoMaster.Text;

16 }

17 else if (rdoDoctor.Checked)

18 {

19 txtMsg.Text = "你的最高學歷為：" + rdoDoctor.Text;

20 }

21 else

22 {

23 txtMsg.Text = "請至少選擇一個學歷選項！";

24 }

25 }

程式說明：

else if 是為了建立多重的 if 條件式判斷。

4-8-2 RadioButtonList 控制項

RadioButtonList 控制項就是所謂的群組選項按鈕，其功用與

RadioButton 伺服器控制項差不多，不過因其本身預設就是一個群組，所以

不必像 RadioButton 控制項還需另外設定 GroupName 屬性才能達到互斥效

果。此外 RadioButtonList 控制項在做版面配置或動態資料繫結方面，比起

RadioButton 控制項具有更好的彈性與能力。


4-31

圖 4-21 RadioButtonList 控制項圖示

RadioButtonList 控制項屬性

RadioButtonList 控制項常用屬性如下表。

表 4-16 RadioButtonList 控制項屬性

屬性說明

Items 用來設定 RadioButtonList 項目，如加入一個 RadioButtonList 的項目。

DataSource 用來設定 RadioButtonList 控制項的資料來源。

DataTextField 提供 RadioButtonList 項目的文字欄位。

DataValueField 提供 RadioButtonList 項目值的欄位。

Enabled 設定 RadioButtonList 控制項是否啓用。

RepeatColumns 設定 RadioButtonList 控制項每列所顯示的欄位數。

RepeatDirection 設定 RadioButtonList 控制項是以水平或垂直方向顯示欄位。

RepeatLayout 設定 RadioButtonList 控制項的配置。

SelectedItem 取得 RadioButtonList 中的選取項目，但只取最低順序的那個項目。

SelectedIndex 取得 RadioButtonList 中的選取項目索引，但只取最低索引的那筆。

RadioButtonList 控制項事件

RadioButtonList控制項主要支援 SelectedIndexChanged事件，說明如下表。

表 4-17 RadioButtonList 控制項事件

事件說明

SelectedIndexChanged

當 RadioButtonList 控制項被選取時，就會引發

SelectedIndexChanged 事件，故我們若要在

RadioButtonList 控制項狀態改變時進行一些程式處理，

請在 SelectedIndexChanged 事件的程式區塊中加入您的

程式碼。如果您希望使用者一旦改變了 RadioButtonList控制項狀態，就立刻執行SelectedIndexChanged事件處

理，請配合將 AutoPostBack 屬性設定為 true。


4-32

範例 4-7 以 RadioButtonList 控制項建立血型選項按鈕

本範例將以 RadioButtonList 控制項顯示血型選項按鈕，讓使用者從中

挑選其血型，請參考 rdoListControl.aspx 控制項，步驟說明如下：

圖 4-22 以 RadioButtonList 控制項建立使用者血型選項

：建立 RadioButtonList 相關控制項

請建立 RadioButtonList 及相關控制項，並將 RadioButtonList 控制項的

AutoPostBack 屬性設為 True，實際屬性設定及版面配置請參考程式。

：建立血型項目成員

在 RadioButtonList 控制項的 Item 屬性 ListItem 編輯器之中，建立 A、B、

O、AB 四種血型。

成員編號 Text Value

0 A 型 0

1 B 型 1

2 O 型 2

3 AB 型 3


4-33

圖 4-23 建立血型項目成員

：建立顯示血型之事件程式

雙擊 RadioButtonList 控制項，在 SelectedIndexChanged 事件中加入下列程

式碼：

01 //顯示使用者血型

02 protected void rdoBlood_SelectedIndexChanged(object sender, EventArgs e)

03 {

04 txtMsg.Text = "您的血型為：" + rdoBlood.SelectedItem.Text;

05 }

程式說明：

1. RadioButtonList 控制項雖然一次顯示多個選項按鈕，但由於成員項

目本身為互斥的，故只會有一個項目被選取。再來透過

rdoBlood.SelectedItem.Text 就可以取得使用者選取的血型項目。

2. 您可以比較本範例與上一個範例的差異，就是本範例使用

RadioButtonList 控制項建立多重的選項按鈕，會比使用

RadioButton 控制項來得精簡方便。


4-34

4-9 Calendar 日曆控制項

Calendar 日曆控制項主要用途是在網頁上顯示日曆，讓使用者檢視及選

取日期。且在 Calendar 日曆方格中還可以顯示約會或其他資訊。

圖 4-24 Calendar 控制項圖示

Calendar 控制項屬性

Calendar 控制項常用屬性如下表。

表 4-18 Calendar 控制項屬性

屬性說明

SelectionMode 設定哪些日、週、月份可以選取。

TitleFormat 設定 Calendar 控制項標頭中月標題的格式。

TitleStyle 設定套用至 Calendar 控制項月標題的樣式。

ShowTitle 設定是否要顯示月標題。

DayNameFormat 設定日期標頭的文字，也就是週一到週日的標頭文字。

DayHeaderStyle 設定套用至日期標頭的樣式。

ShowDayHeader 設定是否要顯示週標頭。

DayStyle 設定套用至日期的樣式。

ShowGridLine 設定是否要顯示格線。

ShowNextPrevMonth 設定是否要顯示上一個／下一個月份的按鈕。

NextPrevFormat 設定月份巡覽按鈕的格式。

PrevMonthText 設定上一個月份按鈕的文字，如果要顯示小於符號（<），必須使用&lt 符號。

NextMonthText 設定下一個月份按鈕的文字，如果要顯示小於符號（>），必須使用&gt 符號。

Calendar 控制項事件

Calendar 控制項主要支援 SelectionChanged 事件，說明如下表。


4-35

表 4-19 Calendar 控制項事件

事件說明

SelectionChanged 當使用者按一下日期選取器控制項以選取日、週或整個月

份時，會引發 SelectionChanged 事件，您可以在此程式區

塊加入您的程式碼。

Calendar 控制項中可選取個別日期、個別週或整個月份，甚至於可以

利用程式來選取一個日期區間。

範例 4-8 以 Calendar 控制項進行日期的選取

Calendar 日曆控制項最常見的應用是日期的顯示與選取，當點選

Calendar 控制項上的日期，進而將日期帶進 TextBox 控制項，請參考

CalendarControl.aspx 程式，以下為步驟說明：

圖 4-25 Calendar 控制項日期之選擇

：建立 Calendar 控制項及版面配置

請建立 Calendar 及其他控制項，實際屬性設定及版面配置請參考程式。

提醒


4-36

：設定 Calendar 控制項外觀樣式

接著要設定 Calendar 控制項外觀樣式，請點選 Calendar 控制項右側之智慧

標籤選擇【自動格式化】選擇【色彩 1】，或選擇其他您喜歡的樣式。

圖 4-26 設定 Calendar 控制項之格式

：建立 Calendar 控制項被選取時之事件程式

在此將建立 Calendar 控制項選取時之事件程式，將被點選之日期帶入到

TextBox 控制項之中，請雙擊 Calendar 控制項，在 SelectionChanged 事件中

加入下列程式：

01 //將 Calendar 日曆控制項之被選取日期指定到 TextBox 之中

02 protected void Calendar1_SelectionChanged(object sender, EventArgs e)

03 {

04 txtDate.Text = Calendar1.SelectedDate.ToLongDateString();

05 }

程式說明：

取得 Calendar 控制項被選取日期是透過 SelectedDate 屬性，而將日期轉

換成實際的日期格式可以用 ToLongDateString()或 ToShortDateString()方法。


4-37

4-10 Panel 控制項

Panel 控制項本身是一個容器的概念，也就是可將其他控制項放到 Panel控制項之中。而將其他控制項加入到 Panel 的方式有兩種，一是設計階段事

先將控制項拖曳放到 Panel 之中，另一種方式是透過程式動態加入控制項。

圖 4-27 Panel 控制項圖示

Panel 控制項最有用的兩個功能是：透過程式動態加入控制項到 Panel之中； Panel 控制項本身具備捲軸（Scrollbar）功能，將不具捲軸功能的

控制項加入到 Panel 之中，也可以享有捲軸的功能，例如：GridView 表格或

過大的表單，想要限制在一定的區塊大小之中，就可以加入到 Panel 控制項。

範例 4-9 以程式動態加入控制項到 Panel 之中

本範例將以程式動態加入四個 TextBox 控制項到 Panel 之中，請參考

PanelControl.aspx 程式，以下步驟說明：

圖 4-28 動態加入控制項到 Panel 之中

：建立 Panel 控制項

請加入一個 Panel 控制項，並設定 Width 為 450px；Height 屬性為 250px。


4-38

：建立動態加入控制項之程式

雙擊 Button 按鈕，在 Click 事件中加入相關程式碼：

01 using System;


03 using System.Web.UI.WebControls;

04

05 public partial class PanelControl : System.Web.UI.Page

06 {

07 ...

08 protected void btnAdd_Click(object sender, EventArgs e)

09 {

10 AddControls(); //呼叫 AddControls()方法

11 }

12

13 //動態建立 TextBox 程式，並加入到 Panel 之中

14 protected void AddControls()

15 {

16 TextBox t1 = new TextBox();

17 t1.Text = "動態加入第一個 TextBox";

18 t1.BackColor = Color.LightBlue;

19


21 t2.Text = "動態加入第二個 TextBox";

22 t2.BackColor = Color.LightPink;

23


25 t3.Text = "動態加入第三個 TextBox";

26 t3.BackColor = Color.LightGreen;

27


29 t4.Text = "動態加入第四個 TextBox";

30 t4.BackColor = Color.LightSalmon;

31

32 Panel1.Controls.Add(t1); //將 TextBox 控制項加入到 Panel 之中

33 Panel1.Controls.Add(t2);



36 }

37 }


4-39

程式說明：

當按下【加入控制項】按鈕時會動態加入四個 TextBox 到 Panel 控制項

之中。

4-11 PlaceHolder 控制項

PlaceHolder 控制項和 Panel 控制項一樣是容器的概念，也就是可以將其

他控制項放到 PlaceHolder 控制項之中。不過有個不同點，就是欲將控制項

加入到 PlaceHolder 之中，唯一的方式只能透過 C# 或 VB 程式動態加入控

制項。

圖 4-29 PlaceHolder 控制項圖示

而 PlaceHolder 控制項和 Panel 相較下，功能較為單純，純粹鎖定動態

加入控制項的能力，本身也不會產生任何的 Tag 標記，不像 Panel 本身還可

以設定各種屬性與樣式，甚至還有捲軸等功能。

範例 4-10 動態加入控制項到 PlaceHolder 之中

本範例將以程式動態加入各種控制項到 PlaceHolder 之中，請參考

PldControl.aspx 程式，步驟說明如下：

圖 4-30 動態加入控制項到 PlaceHolder 之中


4-40

：建立 PlaceHolder 控制項

請在 Page 頁面加入一個 PlaceHolder 控制項。

：以程式動態加入控制項

接著以 C# 程式動態加入控制項到 PlaceHolder 之中，並動態建立 Button 之

Click 委派事件程式，完整程式碼如下：

01 using System;


03 using System.Web.UI;

04 using System.Web.UI.WebControls;

05

06 public partial class PldControl : System.Web.UI.Page

07 {

08 protected void Page_init(object sender, EventArgs e)

09 {

10 AddControls(); //呼叫 AddControls()方法

11 }

12

13 //動態加入控制項到 PlaceHolder 之中

14 protected void AddControls()

15 {

16 //動態建立使用者姓名控制項

17 Label capName = new Label();

18 capName.Text = "姓名：";

19

20 TextBox txtName = new TextBox();

21 txtName.ID = "UserName";

22

23 //將控制項加入到 PlaceHolder1 之中

24 PlaceHolder1.Controls.Add(capName);

25 PlaceHolder1.Controls.Add(txtName);

26 PlaceHolder1.Controls.Add(new LiteralControl("<BR>"));

27

28 //動態建立使用者國家控制項

29 Label capCountry = new Label();

30 capCountry.Text = "國家：";

31

32 TextBox txtCountry = new TextBox();

33 txtCountry.ID = "Country";


35 PlaceHolder1.Controls.Add(capCountry);


4-41

36 PlaceHolder1.Controls.Add(txtCountry);


38

39 //動態建立使用者城市控制項

40 Label capCity = new Label();

41 capCity.Text = "城市：";

42

43 TextBox txtCity = new TextBox();

44 txtCity.ID = "City";


46 PlaceHolder1.Controls.Add(capCity);

47 PlaceHolder1.Controls.Add(txtCity);


49

50 //建立確定按鈕

51 Button btnOK = new Button();

52 btnOK.Text = "確定";

53

54 PlaceHolder1.Controls.Add(btnOK);


56

57 //動態建立 Button 的 Click 事件委派程式

58 btnOK.Click += new EventHandler(btnOK_Click);

59 }

60

61 //顯示使用者輸入資料

62 void btnOK_Click(object sender, EventArgs e)

63 {

64 Label txtMsg = new Label();


66 txtMsg.ForeColor = Color.Blue;

67 txtMsg.Text += "<BR/>您輸入的個人資料是：<BR/>";

68 txtMsg.Text += ((TextBox)form1.FindControl("UserName")).Text + "<BR/>";

69 txtMsg.Text += ((TextBox)form1.FindControl("Country")).Text + "<BR/>";

70 txtMsg.Text += ((TextBox)form1.FindControl("City")).Text + "<BR/>";

71 PlaceHolder1.Controls.Add(txtMsg);

72 }

73 }


4-42

程式說明：

1. new LiteralControl()的語法是動態建立一個 Literal 控制項，以便加

入 HTML 的<BR/>標籤宣告。而 Literal 控制項和 Label 很像，也是

用來顯示文字的。

2. 本範例雖用簡單的 C# 程式動態加入控制項到 Page 頁面之中，但有

些程式碼對初學者可能比較不容易理解，例如第 8 行的 Page_Init()為網頁初始化階段，第 58 行是動態建立 Button 的 Click 事件委派

的技巧，而第 69 行的 FindControl()方法則是找出 Page 中動態加入

的控制項之一種方法，以上三個是比較進階深入的議題，各位只要

知道這個技巧即可，背後深層的意義待將來深入學習時再來討論。

4-12 利用 ASP.NET 程式偵測瀏覽器的版本類型資訊

不同廠牌瀏覽器或相同廠牌但不同版本的瀏覽器，對於網頁支援能力可

能會有所不同，因此有時候也會影響到 ASP.NET 網頁執行功能的正確性。

雖然 ASP.NET 伺服器控制項會自動判斷瀏覽器之版本與能力，然後呈現適

當的標記。不過，仍有些控制項功能無法在舊的瀏覽器上進行轉譯

（Rendering），因此最好是盡可能在各種瀏覽器類型上檢測網頁功能是否正

常，以確保網頁可在所有瀏覽器上正常執行。

針對瀏覽器版本與支援功能可能存在的差異性，有時需要透過程式檢測

或收集使用者瀏覽器的詳細資訊，對於這種需求，可以透過

HttpBrowserCapabilities 物件來取得瀏覽器各種相關資訊。

範例 4-11 在 ASP.NET Web 網頁中偵測瀏覽器類型

本範例將說明如何在 ASP.NET Web 網頁中偵測瀏覽器類型，透過

HttpBrowserCapabilities 物件取得瀏覽器各種相關資訊，請參考

BrowserInfo.aspx 程式：


4-43

01 using System.Text;

02 ...略


04 {

05 System.Web.HttpBrowserCapabilities browser = Request.Browser;

06

07 StringBuilder info = new StringBuilder();

08 info.Append( "<ul>");

09 info.Append(String.Format("<li>名稱：{0}</li>", browser.Browser));

10 info.Append(String.Format("<li>版本：{0}</li>", browser.Version));

11 info.Append(String.Format("<li>名稱與版本：{0}</li>", browser.Type));

12 info.Append(String.Format("<li>主要版本：{0}</li>", browser.MajorVersion));

13 info.Append(String.Format("<li>次要版本：{0}</li>", browser.MinorVersion));

14 info.Append(String.Format("<li>用戶端使用的平台名稱：{0}</li>",browser.Platform));

15 info.Append(String.Format("<li>安裝在用戶端上的 .NET Framework 版本：{0}</li>",

browser.ClrVersion));

16 info.Append(String.Format("<li>是否為 Beta 版：{0}</li>", browser.Beta));

17 info.Append(String.Format("<li>是否為 Web Crawler 搜尋引擎：{0}</li>",

browser.Crawler));

18 info.Append(String.Format("<li>是否為 America Online(AOL)瀏覽器：{0}</li>",

browser.AOL));

19 info.Append(String.Format("<li>否為 Win16架構電腦：{0}</li>", browser.Win16));

20 info.Append(String.Format("<li>否為 Win32架構電腦：{0}</li>", browser.Win32));

21 info.Append(String.Format("<li>是否支援 Frames：{0}</li>", browser.Frames));

22 info.Append(String.Format("<li>是否支援 Tables：{0}</li>", browser.Tables));

23 info.Append(String.Format("<li>是否支援 Cookies：{0}</li>", browser.Cookies));

24 info.Append(String.Format("<li>是否支援 VBScript：{0}</li>",browser.VBScript));

25 info.Append(String.Format("<li>是否支援 JavaApplets：{0}</li>",

browser.JavaApplets));

26 info.Append(String.Format("<li>是否支援 ActiveXControls：{0}</li>",

browser.ActiveXControls));

27 info.Append(String.Format("<li>JScriptVersion 版本：{0}</li>",

browser.JScriptVersion));

28 info.Append(String.Format("<li>EcmaScript 版本：{0}</li>",

browser.EcmaScriptVersion));

29 info.Append(String.Format("<li>瀏覽器是否行動裝置：{0}</li>",

browser.IsMobileDevice));

30 info.Append("</ul>");

31 txtInfo.Text = info.ToString();

32 }


4-44

程式說明：

以上是將比較常用的瀏覽器資訊顯示出來，事實上還有許多未列出的屬

性，詳細資料可以查詢 MSDN Library 的 HttpBrowserCapabilities 類別，以

檢視其所有的屬性資訊。下圖為瀏覽器相關資訊的畫面。

圖 4-31 偵測瀏覽器相關資訊

結論

ASP.NET 程式設計主要就是伺服器控制項的建立與運用，透過視覺化

操作、屬性設定、程式碼撰寫這些程序的組合，就可以一步步建立 ASP.NET網頁，若再進一步與資料庫相結合，就可形成一個完整的 ASP.NET Web 網

頁專案，所以對於控制項的建立與設定必須十分熟悉，方能奠定 ASP.NET程式設計良好的基礎。


4-45

學習評量 1. 請說明什麼是屬性、方法、事件？

2. 請問按下哪個功能鍵便可執行網頁？

(1) F1

(2) F2

(3) F5

(4) F12

3. 可製作下拉式選項的控制項為何？

(1) CheckBoxList

(2) DropDownList

(3) RadioButtonList

(4) ListBox

4. 如果欲進行個人興趣之網頁問卷調查表，並允許多重選擇，適合用

哪個控制項來製作選項？

(1) CheckBoxList

(2) DropDownList

(3) RadioButtonList

(4) ListBox

5. 請使用 DropDownList 控制項建立台灣縣市選項，由使用者選擇後

顯示結果。

6. 請使用 RadioButtonList 建立星座選項，在使用者點選後顯示結果。

7. Calendar 控制項的哪個屬性可以取得選取的日期？

(1) SelectedDay

(2) SelectedTime

(3) SelectedMonth

(4) SelectedDate


4-46

8. 請使用 ListBox 建立「數位相機、MP3、手機、隨身碟、DV 數位

攝影機」商品清單，供使用者挑選商品，在按下確定按鈕後，將選

擇的商品名稱顯示出來。

9. 下面對 Panel 控制項功用的描述何者為非？

(1) Panel 控制項可容納其他控制項。

(2) Panel 控制項可在設計階段將控制項放到 Panel 之中。

(3) Panel 控制項可在執行階段以程式動態加入控制項。

(4) Panel 控制項不可設定捲軸（Scrollbar）功能。

10. 下面對 PlaceHolder 控制項的描述何者是正確？

(1) PlaceHolder 和 Panel 控制項一樣可容納其他控制項。

(2) PlaceHolder 控制項可在設計階段將控制項放到 PlaceHolder 之中。

(3) PlaceHolder 控制項可設定捲軸（Scrollbar）功能。

(4) PlaceHolder 控制項本身為可視控制項，且會佔用網頁版面配

置空間。

asp - epaper.gotop.com.twepaper.gotop.com.tw/pdf/ael007600.pdf · asp.net 3.5完美入門 —4...

Documents