第4章構(gòu)建基本W(wǎng)eb頁面

1、第4章 構(gòu)建基本W(wǎng)eb頁面 第4章 構(gòu)建基本W(wǎng)eb頁面 4.1 服務(wù)器控件概述 4.2 顯示文本信息 4.3 提交頁面 4.4 收集用戶輸入信息 4.5 顯示圖像 4.6 列表顯示 4.7 超級(jí)鏈接 4.1 服務(wù)器控件概述4.1.1 服務(wù)器控件基本知識(shí)服務(wù)器控件基本知識(shí) ASP.NET服務(wù)器控件封裝了頁面元素，以及能夠完成相關(guān)功能并且運(yùn)行在服務(wù)器端的對(duì)象。 ASP.NET服務(wù)器控件分為：HTML服務(wù)器控件Web 服務(wù)器控件驗(yàn)證控件用戶控件Web部件AJAX控件 4.1.2 HTML服務(wù)器控件 nHTML服務(wù)器控件是與HTML標(biāo)記相對(duì)應(yīng)的服務(wù)器端控件，具有屬性、方法和事件，可以對(duì)其編程，從而解決

2、了無法利用程序直接控制HTML標(biāo)記的問題。n任何HTML標(biāo)記可以通過添加屬性runat=“server”和id轉(zhuǎn)換為 HTML服務(wù)器控件。例如， 4.1.2 HTML服務(wù)器控件HTML服務(wù)器控件HTML標(biāo)記名稱控件事件HtmlAnchor超級(jí)鏈接ServerClickHtmlButton按鈕ServerClickHtmlSelect 列表框ServerChangeHtmlTextArea多行文本框ServerChangeHtmlInputButton按鈕ServerClickHtmlInputCheckBox復(fù)選框ServerChangeHtmlInputRadioButton單選按鈕Serv

3、erChangeHtmlInputText 和 單行文本框ServerChangeHtmlInputHidden隱藏框ServerChangeHtmlInputImage圖像ServerClickHtmlInputFile上載文件HtmlForm表單HtmlImage圖像HtmlGenericControl任何其它沒有對(duì)應(yīng)控件的標(biāo)記，如 等4.1.3 Web服務(wù)器控件 1. Web服務(wù)器控件的共有屬性服務(wù)器控件的共有屬性 nAttributes：獲取服務(wù)器控件標(biāo)記上表示的所有屬性名稱和值對(duì)的集合。只能在編程時(shí)使用此屬性。nBackColor：控件的背景色。nBorderStyle：控件的邊框樣

4、式。nCssClass：分配給控件的級(jí)聯(lián)樣式表 (CSS) 類。nStyle：為控件設(shè)置CSS樣式屬性。 nEnabled：控件是否被禁用。nFont控件：顯示的字體。nForeColor：控件的前景色。4.2 顯示文本信息 4.2.1 Label控件控件 用于在頁面上顯示靜態(tài)文本。語法格式為： 1. 顯示靜態(tài)文本顯示靜態(tài)文本使用Text屬性指定要在控件中顯示的內(nèi)容，例如， 例例4-1 顯示當(dāng)前日期 4.2.2 Literal控件 在頁面上顯示靜態(tài)文本。語法格式： Mode屬性：決定是否編碼其輸出。取值為：PassThrough：直接顯示控件內(nèi)容而不進(jìn)行編碼。Encode：先編碼，然后再顯示控

5、件內(nèi)容。Transform：直接刪除設(shè)備（例如手機(jī)）不支持的標(biāo)記，然后再顯示控件內(nèi)容。例例4-2 獲取用戶IP地址，并用Literal控件顯示該IP地址 4.3 提交頁面 三個(gè)用于向服務(wù)器提交頁面的控件：Button、LinkButton和ImageButton控件。4.3.1 Button控件控件n顯示一個(gè)按鈕，默認(rèn)為提交按鈕。利用提交按鈕可以向服務(wù)器端提交整個(gè)頁面。語法格式： 4.3.1 Button控件控件1. Click事件事件當(dāng)點(diǎn)擊按鈕時(shí)，引發(fā)Click事件。與之相關(guān)的事件處理過程：void Submit_Click(Object sender, EventArgs e) lblMs

6、g.Text=Hello ASP.NET; 4.3.1 Button控件控件n2. Command事件事件n如果希望頁面上的按鈕共用一個(gè)事件處理過程，則可以使用Command事件。n如何區(qū)分用戶點(diǎn)擊了哪個(gè)按鈕？ 使用CommandName屬性。CommandArgument屬性可以向Command事件處理過程傳遞附加信息n例例4-3 簡易四則運(yùn)算器 4.3.1 Button控件控件3. 引發(fā)客戶端按鈕單擊事件引發(fā)客戶端按鈕單擊事件n控件的OnClientClick屬性允許我們添加JavaScript代碼，當(dāng)單擊按鈕時(shí)，就會(huì)在客戶端運(yùn)行這些代碼。n例例4-4 利用OnClientClick屬性彈

7、出確認(rèn)框 4.3.2 LinkButton控件控件n與Button控件類似，但它的外觀顯示為超級(jí)鏈接，而不是按鈕。n在單擊LinkButton時(shí)，引發(fā)Click事件，而不是超級(jí)鏈接的頁面跳轉(zhuǎn)。n語法格式： n控件的屬性、方法和事件與Button控件完全相同，使用方法也一樣。 4.3.3 ImageButton控件控件n與Button控件類似，但使用定制的圖像作為按鈕的外觀。語法格式： nImageUrl屬性：指定所使用的圖像。n控件的事件處理過程：第二個(gè)參數(shù)類型為ImageClickEventArgs，它提供鼠標(biāo)單擊處的坐標(biāo)（e.X和e.Y）。n例例4-5 文本編輯器 4.4 收集用戶輸入信息

8、收集用戶輸入信息4.4.1 TextBox控件控件n用于顯示單行文本框、多行文本框和密碼框。語法格式為： 4.4.1 TextBox控件控件1. 設(shè)置顯示模式設(shè)置顯示模式nTextMode屬性：SingleLine：顯示為單行文本框，此為默認(rèn)值；MultiLine：顯示為多行文本框；Password：顯示為密碼框。n例如， 4.4.1 TextBox控件控件2. 獲取控制焦點(diǎn)獲取控制焦點(diǎn)使用Focus方法，可以使文本框獲得控制焦點(diǎn)。例如，protected void Page_Load(object sender, EventArgs e) TextBox1.Focus();3. 設(shè)置是否自動(dòng)

9、換行設(shè)置是否自動(dòng)換行 當(dāng)TextBox控件顯示為多行文本框時(shí)，若設(shè)置TextBox控件的Wrap屬性值為true，則文本框會(huì)自動(dòng)換行。例如， 4.4.1 TextBox控件控件4. 自動(dòng)完成自動(dòng)完成為AutoCompleteType屬性賦相應(yīng)值。 5. 其它常用屬性其它常用屬性nColumns屬性：以字符為單位指定文本框的顯示寬度。nMaxLength屬性：在文本框中允許輸入的最多字符數(shù)。nRows屬性：指定多行文本框的顯示行數(shù)。例如， 4.4.1 TextBox控件控件6. TextChanged事件事件n當(dāng)文本框中的內(nèi)容發(fā)生改變，且控制焦點(diǎn)移出文本框時(shí)，該事件被引發(fā)。n如果希望該事件能夠立

10、即被響應(yīng)，則應(yīng)該設(shè)置TextBox控件的AutoPostBack屬性為true。n例例4-6 用戶登錄 4.4.2 CheckBox控件控件 顯示為復(fù)選框，它允許用戶在真和假之間做出選擇。 語法格式： 1. 確定復(fù)選框是否被選中確定復(fù)選框是否被選中 Checked屬性取值為true時(shí)，表示復(fù)選框被選中，為false表示未選中。例如， CheckBox1.Checked = true;4.4.2 CheckBox控件控件2. 改變復(fù)選框的文本排列方向改變復(fù)選框的文本排列方向 TextAlign屬性：設(shè)置復(fù)選框的文本顯示在復(fù)選框的哪一邊邊。例如， 3. CheckedChanged事件事件 當(dāng)復(fù)選

11、框的狀態(tài)改變（由選中變?yōu)槲催x中，或反之）時(shí)，該事件被引發(fā)。例例4-7 多選題 4.4.3 RadioButton控件 n顯示為單選按鈕。語法格式： nGroupName屬性：使多個(gè)單選按鈕形成一組，組成互斥按鈕。例如， 4.5 顯示圖像顯示圖像n在頁面上顯示圖像。語法格式： 1. 顯示指定圖像顯示指定圖像n把圖像文件的路徑賦值給ImageUrl屬性，即可顯示指定的圖像。例如， n例例4-8 無限風(fēng)光 4.6 列表顯示列表顯示 五個(gè)列表顯示控件：ListBox、DropDownList、RadioButtonList、CheckBoxList和BulletedList控件。4.6.1 ListB

12、ox控件控件 顯示為列表框，允許從一個(gè)給定的選項(xiàng)列表中選擇一項(xiàng)或多項(xiàng)。語法格式： Item 1 4.6.1 ListBox控件控件1. 定義列表項(xiàng)定義列表項(xiàng)控件是列表項(xiàng)的一個(gè)容器。每個(gè)列表項(xiàng)均由ListItem對(duì)象所創(chuàng)建。n列表項(xiàng)的常用屬性為：Text屬性：列表項(xiàng)所顯示的文字內(nèi)容。Value屬性：與列表項(xiàng)關(guān)聯(lián)的值，通常是一些能被程序處理的值。Selected屬性：確定列表項(xiàng)是否被選中。n例如，顯示一個(gè)價(jià)格列表十一元五角八元三角 4.6.1 ListBox控件控件2. 單選還是多選單選還是多選SelectionMode屬性:Single：允許單選；Multiple：允許多選。用戶可以使用Ctrl

13、或Shift鍵配合進(jìn)行多選。例如， 3. 獲取選定項(xiàng)獲取選定項(xiàng)n若列表框?yàn)閱芜x，則使用SelectedIndex、SelectedItem和SelectedValue屬性獲取用戶所選項(xiàng)。如， Image1.ImageUrl = /images/ + DropDownList1.SelectedValue.ToString() + .jpg;n若列表框?yàn)槎噙x，則獲取選定項(xiàng)：foreach( ListItem li in ListBox1.Items)if(li.Selected)/判斷該列表項(xiàng)是否被選中l(wèi)blMsg.Text += li.Text + ; /輸出選中列表項(xiàng)4.6.1 ListBo

14、x控件控件4. 添加或刪除列表項(xiàng)添加或刪除列表項(xiàng)n控件的Items屬性是一個(gè)集合屬性，保存了列表框中的所有列表項(xiàng)，每個(gè)列表項(xiàng)均是ListItem對(duì)象。n可以使用兩種方法添加或刪除列表項(xiàng)。（1）使用Visual Studio.NET集成開發(fā)環(huán)境的屬性窗口。 （2）使用代碼動(dòng)態(tài)添加或刪除列表項(xiàng) 5. SelectedIndexChanged事件事件n當(dāng)用戶所選的列表項(xiàng)發(fā)生改變時(shí)，引發(fā)該事件。n例例4-9 裝機(jī)清單 4.6.2 DropDownList控件控件n顯示為下拉列表框，用戶可以從列表框中選擇一項(xiàng)。語法格式： Item 1 Item 2n控件的屬性、方法和事件與ListBox控件均一樣，所不

15、同的是DropDownList控件只允許單選，不允許多選。n例例4-10 選課 4.6.3 CheckBoxList控件控件n生成一組復(fù)選框，相當(dāng)于多個(gè)CheckBox控件。語法格式 Item 1 n控件是多個(gè)復(fù)選框的一個(gè)容器。每個(gè)復(fù)選框均由ListItem對(duì)象所創(chuàng)建。CheckBoxList控件的屬性、方法和事件與ListBox控件幾乎一樣。 4.6.3 CheckBoxList控件控件1. 顯示多列復(fù)選框顯示多列復(fù)選框n使用RepeatColumns屬性，設(shè)定在一行中顯示多少列復(fù)選框。例如， 1 2 3 44.6.3 CheckBoxList控件控件2. 復(fù)選框在頁面上的布局方式復(fù)選框在頁

16、面上的布局方式nRepeatLayout：Table（默認(rèn)設(shè)置）：以表格布局方式呈現(xiàn)；Flow：以流式布局方式呈現(xiàn)。nRepeatDirection：Vertical：復(fù)選框以垂直方式呈現(xiàn)。Horizontal：以水平方式呈現(xiàn)。4.6.4 RadioButtonList控件控件n生成一組單選按鈕，相當(dāng)于多個(gè)RadioButton控件。語法格式： Item 1 n控件是多個(gè)單選按鈕的一個(gè)容器。每個(gè)單選按鈕均由ListItem對(duì)象所創(chuàng)建?？丶膶傩?、方法和事件與CheckBoxListItem控件一樣。n例例4-11 單選題 4.6.5 BulletedList控件 n顯示一個(gè)有序或無序列表，相當(dāng)

17、于HTML的或標(biāo)記。語法格式： Item1 Item2 Item3 4.6.5 BulletedList控件1. 設(shè)置項(xiàng)目符號(hào)樣式設(shè)置項(xiàng)目符號(hào)樣式nBulletStyle屬性：列表項(xiàng)前的項(xiàng)目符號(hào)樣式，取值為：NotSet（未設(shè)置）Numbered（數(shù)字）LowerAlpha（小寫字母）、UpperAlpha（大寫字母）LowerRoman（小寫羅馬數(shù)字）、UpperRomanDisc（實(shí)心圓）、Circle（圓圈）、Square（實(shí)心正方形）CustomImage（自定義圖像）。 4.6.5 BulletedList控件2. 為列表指定一個(gè)起始編號(hào)為列表指定一個(gè)起始編號(hào)nFirstBullet

18、Number屬性：有序列表的起始編號(hào)。如果是無序列表，即BulletStyle 屬性值為Disc、Square、Circle 或 CustomImage，則忽略FirstBulletNumber屬性的值。例如， C# VB 4.6.5 BulletedList控件3. 設(shè)置列表項(xiàng)的顯示模式設(shè)置列表項(xiàng)的顯示模式nDisplayMode屬性：將列表項(xiàng)內(nèi)容顯示為文本、超級(jí)鏈接或LinkButton。取值為：Text：列表項(xiàng)的內(nèi)容顯示為文本；HyperLink：列表項(xiàng)的內(nèi)容顯示為超級(jí)鏈接，此時(shí)必須使用Value屬性指定超級(jí)鏈接的URL；LinkButton：列表項(xiàng)的內(nèi)容顯示為LinkButton，當(dāng)用

19、戶單擊LinkButton時(shí)，可以觸發(fā)BulletedList控件的Click事件。 4.7 超級(jí)鏈接 4.7.1 HyperLink控件控件n為頁面添加超級(jí)鏈接，相當(dāng)于標(biāo)記。語法格式： 1. 文本超級(jí)鏈接文本超級(jí)鏈接nText屬性：為超級(jí)鏈接設(shè)置文本標(biāo)題。例如， 4.7.1 HyperLink控件控件2. 圖像超級(jí)鏈接圖像超級(jí)鏈接nImageUrl屬性：指定圖像文件的路徑，從而顯示一個(gè)帶有超級(jí)鏈接的圖像。例如， 3. 指定指定URLnNavigateUrl屬性：指定單擊 HyperLink 控件時(shí)鏈接到的 URL。4.7.1 HyperLink控件控件4. 指定目標(biāo)窗口指定目標(biāo)窗口nTarg

20、et屬性：指定單擊 HyperLink 控件時(shí)加載目標(biāo)網(wǎng)頁的窗口或框架。n取值為：_blank、_self、_top、_parent或_search。n例例4-12 使用搜索引擎4.7.2 ImageMap控件 n熱區(qū)：圖像上的一個(gè)區(qū)域，該區(qū)域有超級(jí)鏈接功能。當(dāng)用戶單擊圖像的不同區(qū)域（熱區(qū)）時(shí)，會(huì)產(chǎn)生回發(fā)或?qū)Ш降讲煌腢RL上。n一個(gè)ImageMap控件就相當(dāng)于多個(gè)圖像超級(jí)鏈接。利用它可以實(shí)現(xiàn)網(wǎng)站導(dǎo)航、網(wǎng)站地圖、游戲地圖、各種流程圖等。n語法格式： 熱區(qū) 4.7.2 ImageMap控件 1. 指定圖像指定圖像ImageUrl屬性：指定控件上所顯示圖像的圖像文件的路徑。例如，2. 設(shè)置熱區(qū)設(shè)置熱區(qū)ImageMap控件提供三種類型的熱區(qū)：（1）圓形區(qū)域熱