Microsoft Word - AEL0070_CH03

Transcription

1 CHAPTER Standard Controls 本章重點 3.1 Button LinkButton 和 ImageButton 3.2 Namespace 及 Import Directive 3.3 Label HyperLink Image 及 ImageMap 3.4 TextBox 3.5 CheckBox 及 CheckBoxList 3.6 RadioButton 及 RadioButtonList 3.7 ListBox 及 DropDownList 3.8 Table TableRow 和 TableCell 3.9 Literal BulletedList 及 HiddenField 3.10 Calendar 3.11 AdRotator 3.12 FileUpLoad

2 透視 ASP.NET 3.5- 使用 VB 在網頁製作技術上,ASP.NET 提供了更強大的功能 為了有別於以往的網頁製作技術,ASP.NET 中的各種 controls 謂之 Web Form controls, 而以往的 controls 就謂之 HTML Form controls Web Form controls 包含九大類的 controls: 1. Standard controls, 包含 ASP.NET 1.1 版中的 Web controls Rich controls 及 ASP.NET 2.0 版中的一些 controls 2. Data controls, 用來展現資料庫的內容, 在 ASP.NET 3.5 版中多加進了 LinqDataSource ListView 及 DataPager 等 controls 3. Validation controls, 有驗證功能的控制標籤 4. Navigation controls, 包含 :SiteMapPath Menu 和 TreeView 等 controls 5. Login controls, 用來做登入時的帳號驗證 6. WebParts controls, 用來整合網站的一致性及外觀 7. AJAX controls,ajax 是 Asynchronous JavaScript and XML, 這類 controls 在瀏覽網頁時, 有穩定畫面的效果 8. Crystal Reports controls, 用來製作報表 9. HTML server controls, 即將傳統的 HTML 標籤賦予 server control 的功能 注意,HTML server controls 和 HTML Form controls 是不同的, 前者的各種 controls 中都含有 runat="server", 而後者都不含 runat="server" 在 ASP.NET 3.5 版中,control 部分的改變, 主要是在 Data controls 中加進了 LinqDataSource ListView 及 DataPager 等 controls 另外, 又加進了 AJAX controls, 其餘的部分和 ASP.NET 2.0 是一樣的 本章將先介紹 Standard controls, 其餘的 controls( 除了 Crystal Reports controls 之外 ) 都會在後面各章中陸續為讀者介紹 大多數 Web Form controls 中的 properties methods 和 events 都是繼承自一個基本的 class : WebControl, WebControl Class 是定義在 System.Web.UI.WebControls 這個 namespace 中 在介紹 Web Form controls 之前, 我們先列出 WebControl 中常用到的 properties, 見表 3.1, 其中各 properties 的用途將在 3.1 節中舉例說明 還有一些各個 control 共用的 properties methods 和 events, 讀者可以在 MSDN 中找到, 以自行揣摩 3-2

3 Standard Controls 3 表 3.1 Web Control 中常用到的 properties 名稱 AccessKey BackColor BorderColor 說明設定某個 control 的 access 鍵, 例如 :AccessKey="B", 表示按 Alt+B, 游標即移至該 control 背景顏色 邊框顏色 BorderStyle 邊框型式, 有 dashed dotted double groove inset none notset outset ridge solid 等 BorderWidth 邊框寬度 Enabled 若設定成 false, 則此 control 為 read only Font-Bold Text 以粗體字表現, 值為 true 或 false Font-Italic Text 以斜體字表現, 值為 true 或 false Font-Overline Text 之上加橫線, 值為 true 或 false Font-Size Text 字體大小 Font-Strikout Text 之中加橫線, 值為 true 或 false Font-Underline Text 加底線, 值為 true 或 false ForeColor Height Text 的顏色 Control 的高度 ID Control 的 identifier TabIndex Visible Width 此 control 在此網頁的 tab 次序 可見與否,visible="false", 則為不可見的 Control 的寬度 3.1 Button LinkButton 和 ImageButton Button control 的語法如下 : <asp:button id=" 此 control 的 ID" Text=" 按鈕文字 " PostBackUrl=" 要瀏覽的網址 " OnClientClick="Client 端的函數名稱 " OnClick=" 副程式名稱 " UseSubmitBehavior=" 是否要執行 Client 端的函數 " SoftKeyLabel="softkey 要變換的文字 " 3-3

4 透視 ASP.NET 3.5- 使用 VB ValidationGroup=" 此 control 所屬的驗證 group" runat="server" /> 或 <asp:button id=" 此 control 的 ID" Text=" 按鈕文字 " OnClick=" 副程式名稱 " runat="server" > </asp:button> 這兩種語法只有結尾時有所不同, 所有的 controls 都有這兩種語法, 一般來說, 較常採用第一種語法, 因為較簡潔 但是當 control 是 container 時, 即 control 中有子標籤時, 則必須用第二種語法 為了節省篇幅起見, 在介紹其他的 control 時, 除非必要, 否則只以第一種語法來介紹 由於 control 的語法都是相同的型式, 剛開始幾個 control 我們仍然寫出對應的語法, 較後面的 control 我們就省略了語法的介紹, 而直接介紹各個 control 的 properties methods 和 events Button control 有許多 properties, 常用到的有上述語法中列出的九個 properties 其中 id 和 runat 這兩個 properties 是所有的 controls 都有的 properties id 是設定 control 的識別符號,runat="server" 表示此 control 要在 server 中執行 Text 這個 property 是設定顯示在按鈕上的文字 OnClick 這個 property 的設定值是一個副程式的名稱, 其用意為當此按鈕被點選時, 會觸發 Click 事件, 系統會去執行所設定的副程式 PostBackUrl 是用來設定要瀏覽的網址, 要注意的是, 當設定了 PostBackUrl 的網址後,OnClick 對應的副程式就不會被執行 OnClientClick 是用來執行 Client 端的函數, 而省卻用 Attributes 的方式將 Client 端的函數加進 Button 中的麻煩 UseSubmitBehavior 的值是 true 或 false, 是用來控制是否要執行 Client 端的函數, 其預設值為 true SoftKey 是 mobile devices 中的專有名詞, 泛指手機等小螢幕中的按鈕 SoftKeyLabel 是用來設定當 softkey 被點選時所要顯示的文字 ValidationGroup 是描述此 control 所屬的驗證 group, 我們將在介紹 Validation controls 時, 再做說明 我們先用此 control 來說明表 3.1 中各個 property 的用法, 見圖 3.1 的 WebPage0301.aspx 3-4

5 Standard Controls 3 1 <%@ Page Language="VB" %> 2 <%@ Import Namespace="System.Drawing" %> 1 <script runat="server"> 3 sub Page_Init(obj as Object, e as EventArgs) 4 Button5.TabIndex=1 5 Button10.TabIndex=2 6 end sub 7 8 sub ShowEvent(obj as Object, e as EventArgs) 9 select case obj.id 10 case "Button1" 11 Button1.Text="Alt+B" 12 Button1.AccessKey="B" 13 case "Button2" 14 Button2.BackColor= Color.FromName("lightblue") 15 case "Button3" 16 Button3.BorderColor= Color.FromName("red") 17 case "Button4" 18 Button4.Style("border-style")="Dashed" 19 case "Button5" 20 Button5.BorderWidth=Unit.Pixel(10) 21 case "Button6" 22 Button6.Font.Bold="true" 23 case "Button7" 24 Button7.Font.Italic="true" 25 case "Button8" 26 Button8.Font.Overline="true" 27 case "Button9" 28 Button9.Font.Size=FontUnit.Point(15) 29 case "Button10" 30 Button10.Font.Strikeout="true" 31 case "Button11" 32 Button11.Font.Underline="true" 33 case "Button12" 34 Button12.ForeColor=Color.FromName("#666633") 35 case "Button13" 36 Button13.Height=Unit.Point(25) 37 case "Button14" 38 Button14.Visible="false" 39 case "Button15" 40 Button15.Width=Unit.Point(85) 41 case "Button16" 42 Button16.Enabled=false 43 end select 44 end sub 45 </script> 46 <html><body><form runat="server"> 47 <asp:button id="button1" Text="AccessKey" OnClick="ShowEvent" runat="server" /> 48 <asp:button id="button2" Text="BackColor" OnClick="ShowEvent" runat="server" /> 49 <asp:button id="button3" Text="BorderColor" OnClick="ShowEvent" runat="server" /> 50 <asp:button id="button4" Text="BorderStyle" OnClick="ShowEvent" runat="server" /> 3-5

6 透視 ASP.NET 3.5- 使用 VB 51 <asp:button id="button5" Text="BorderWidth" OnClick="ShowEvent" runat="server" /> 52 <p> 53 <asp:button id="button6" Text="Font-Bold" OnClick="ShowEvent" runat="server" /> 54 <asp:button id="button7" Text="Font-Italic" OnClick="ShowEvent" runat="server" /> 55 <asp:button id="button8" Text="Font-Overline" OnClick="ShowEvent" runat="server" /> 56 <asp:button id="button9" Text="Font-Size" OnClick="ShowEvent" runat="server" /> 57 <asp:button id="button10" Text="Font-Strikeout" OnClick="ShowEvent" runat="server" /> 58 <p> 59 <asp:button id="button11" Text="Font-Underline" OnClick="ShowEvent" runat="server"/> 60 <asp:button id="button12" Text="ForeColor" OnClick="ShowEvent" runat="server" /> 61 <asp:button id="button13" Text="Height" OnClick="ShowEvent" runat="server" /> 62 <asp:button id="button14" Text="Visible" OnClick="ShowEvent" runat="server" /> 63 <asp:button id="button15" Text="Width" OnClick="ShowEvent" runat="server" /> 64 <asp:button id="button16" Text="Enabled" OnClick="ShowEvent" runat="server" /> 65 </form></body></html> 圖 3.1 WebPage0301.aspx WebPage0301.aspx 在螢幕上安排了 16 個按鈕, 如圖 3.2 所示 這 16 個按鈕對應的 Button control 定義在圖 3.1 的第 48 行到第 65 行 Button controls 的 id 名稱從 Button1 到 Button16 每個 Button 上顯示的文字, 是根據要說明的 property 來設定 還有, 每一個 Button control 的 OnClick 都設定成副程式 ShowEvent 圖 3.2 瀏覽 WebPage0301.aspx 程式中第 4 行到第 7 行是 Page_Init 事件的副程式,Page Init 事件只有在網頁第一次被載入時才會被觸發 注意,Page Load 事件是網頁每次被載入時都會被觸發 此 Page_Init 副程式中的兩個 statements 是設定按 Tab 鍵時, 游標移動的次序 第 5 行 Button5.TabIndex=1 的意思是, 第一次按 Tab 鍵, 游標會移到 Button5, 即 BorderWidth 鈕 第 6 行 Button10.TabIndex=2 的意思是, 第二次按 Tab 鍵, 游標會移到 Button10, 即 Font-Strikeout 鈕 未定義 Tab 次序的鈕, 則依畫面中的位置依次出現, 即第三次按 Tab 鍵, 游標會移到 Button1, 即 AccessKey 鈕 第四次按 Tab 鍵, 游標會移到 BackColor 鈕, 其餘類推 第 9 行到第 45 行是 ShowEvent 副程式 第 10 行的 statement 是 Select case obj.id, 3-6

7 Standard Controls 3 即根據被點選的 Button 的 id 去執行對應的 case statement 第 12 行是將 Button1 的 Text property 設定成 "Alt+B" 第 13 行是將 AccessKey 鈕的 access 鍵設定為 "Alt+B", 即同時按 "Alt" 及 "B" 兩鍵, 游標會移到 AccessKey 鈕 圖 3.3 是每個 Button 都被點選後的畫面, 讀者可以看到 AccessKey 鈕顯示的文字已經改變 第 15 行設定 BackColor 鈕的背景顏色為淡藍色, 注意, 設定顏色時, 在.NET 程式碼區塊中的寫法和 Control 中的設定 property 的方法不同 在.NET 程式碼區塊中設定顏色不可以用 Button2.BackColor="lightblue" 這種方式來設定, 而要以 Button2.BackColor=Color.FromName("lightblue") 或是 Button2.BackColor= Color.lightblue 這種方式來設定 此例中有關顏色的設定還有第 17 行和第 35 行 ( 第 35 行是以顏色代碼來設定 ) 第 17 行是設定按鈕邊框的顏色, 第 35 行是設定按鈕中文字 ( 即 text) 的顏色 另外, 在使用顏色設定時, 必須 Import System.Drawing 這個 namespace, 如第 2 行所示, Import directive 及 Namespace 的意義將在 3.2 節中說明 第 19 行是設定按鈕邊框為虛線的型式, 注意不可以用 Button4.border-style="Dashed" 的方式來設定, 而要用 Style 這個 method 來設定 第 21 行設定邊框的寬度為 10 個 pixels, 讀者要注意有關長 寬 高的設定方法, 不可以寫成 Button5.BorderWidth=10 可以用的 methods 有 Unit.Pixel Unit.Point 及 Unit.Percentage,Pixel 和 Point 的參數是點數, 而 Percentage 是佔一行長度的百分比, 如 Unit.Point(10) 是指 10 個點的大小, 而 Unit.Percentage(30) 是指佔該行的百分之 30 第 行是有關字型的設定部分, 請注意各個 property 的名稱 Font.Bold="true" 是設定為粗體字, Font.Italic="true" 是設定為斜體字,Font.Overline="true" 是設定為字上畫橫線, Font.Strikeout="true" 是設定為字中畫橫線,Font.Underline="true" 是設定為字底畫橫線, 字體大小的設定要用 method FontUnit.Point, 而不是 Unit.Point 第 37 行和第 41 行是設定邊框的高度及長度設定時用的 method:unit.point 第 39 行是設定 Button 的 Visible property 為 false, 即隱藏該 Button 第 43 行是設定 Button 的 Enable property 為 false, 即將該 Button 設定為 Read Only 圖 3.3 每個 Button 都被點選後的畫面 3-7

8 透視 ASP.NET 3.5- 使用 VB 由於此例也可以用來說明 CodeBehind 中的 Handles statement, 所以我們也用 CodeBehind 的方式來設計 WebPage0301.aspx 首先用第一章的 1.2 節所介紹的方法拉出 16 個 Button controls, 如圖 3.4 所示 圖 3.4 WebPage0302.aspx 在圖 3.4 中, 已將各 Button control 的 Text 屬性值設定我們所要說明的 properties 名稱 雙擊圖 3.4 中左上角的 AccessKey, 會出現 WebPage0302.aspx 的 CodeBehind 程式碼 WebPage0302.aspx.vb, 如圖 3.5 所示 1 Partial Class Book_WebPage Inherits System.Web.UI.Page 3 4 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _ 5 Handles Button1.Click 6 7 End Sub 8 End Class 圖 3.5 原始的 WebPage0302.aspx.vb 3-8

9 Standard Controls 3 首先在 WebPage0302.aspx.vb 的一開始加進一個 statement : Imports System.Drawing, 然後將 Handles Button1.Click( 圖 3.5 的第 5 行 ) 改成 Handles Button1.Click, Button2.Click,, Button16.Click, 表示 Button1 到 Button16 的 Click 事件發生時都是執行副程式 Button1_Click( 即 WebPage0301.aspx 中的副程式 ShowEvent) 然後再將 WebPage0301.aspx 中副程式 ShowEvent 的內容拷貝至副程式 Button1_Click 之內, 注意, 副程式 ShowEvent 中的 obj.id( 圖 3.1 的第 10 行 ) 要改成 sender.id 最後再將副程式 Page_Init 加進 WebPage0302.aspx.vb 之中, 即完成了 WebPage0302.aspx.vb 的製作 加進副程式 Page_Init 的方法, 可以回到 WebPage0302.aspx 的設計模式, 然後以滑鼠雙擊畫面中的空白處, 在 WebPage0302.aspx.vb 中會出現 Page_Load 的副程式, 將 Page_Load 和 Me.Load 分別改成 Page_Init 和 Me.Init 即可 完成後的 WebPage0302.aspx.vb 如圖 3.6 所示 瀏覽 WebPage0302.aspx 所得到的畫面, 其效果會和圖 3.2 和圖 3.3 是一樣的 1 Imports System.Drawing 2 Partial Class Book_WebPage Inherits System.Web.UI.Page 4 5 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _ 6 Handles Button1.Click, Button2.Click, Button3.Click, Button4.Click, _ 7 Button5.Click, Button6.Click, Button7.Click, Button8.Click, Button9.Click, _ 8 Button10.Click, Button11.Click, Button12.Click, Button13.Click, Button14.Click, _ 9 Button15.Click, Button16.Click 10 Select Case sender.id 11 Case "Button1" 12 Button1.Text = "Alt+B" 13 Button1.AccessKey = "B" 14 Case "Button2" 15 Button2.BackColor = Color.FromName("lightblue") 16 Case "Button3" 17 Button3.BorderColor = Color.FromName("red") 18 Case "Button4" 19 Button4.Style("border-style") = "Dashed" 20 Case "Button5" 21 Button5.BorderWidth = Unit.Pixel(10) 22 Case "Button6" 23 Button6.Font.Bold = "true" 24 Case "Button7" 25 Button7.Font.Italic = "true" 26 Case "Button8" 27 Button8.Font.Overline = "true" 28 Case "Button9" 29 Button9.Font.Size = FontUnit.Point(15) 30 Case "Button10" 3-9

10 透視 ASP.NET 3.5- 使用 VB 31 Button10.Font.Strikeout = "true" 32 Case "Button11" 33 Button11.Font.Underline = "true" 34 Case "Button12" 35 Button12.ForeColor = Color.FromName("#666633") 36 Case "Button13" 37 Button13.Height = Unit.Point(25) 38 Case "Button14" 39 Button14.Visible = "false" 40 Case "Button15" 41 Button15.Width = Unit.Point(85) 42 Case "Button16" 43 Button16.Enabled = False 44 End Select 45 End Sub Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) _ 48 Handles Me.Init 49 Button5.TabIndex = 1 50 Button10.TabIndex = 2 51 End Sub 52 End Class 圖 3.6 完成後的 WebPage0302.aspx.vb Button LinkButton 和 ImageButton 這三個按鈕的基本功能是一樣的, 所以 properties 和 methods 也大致相同, 只是外觀上有所不同 LinkButton 的語法如下 : <asp:linkbutton id=" 此 control 的 ID" Text=" 按鈕文字 " OnClick=" 副程式名稱 " runat="server" /> 此按鈕的 properties 和 Button control 一模一樣, 只是 Button control 是方塊形的按鈕, 而 LinkButton control 是文字形的按鈕 ImageButton 的語法如下 : <asp:imagebutton id=" 此 control 的 ID" ImageUrl=" 圖片檔案的 URL" ImageAlign=" 放置圖片的位置 " AlternateText=" 滑鼠停留時顯示的文字 " GenerateEmptyAlternateText=" 當無圖片時是否要顯示註記 " OnClick=" 副程式名稱 " 3-10

11 Standard Controls 3 runat="server" /> 其中 ImageUrl 是圖片檔案的 URL(Uniform Resource Locator) ImageAlign 是圖片放置的位置, 可以設定的值有 :AbsBottom AbsMiddle BaseLine Bottom Left Middle NotSet TextTop 和 Top 等 AlternateText 是設定當滑鼠移至圖案上時所要顯示的文字 我們用圖 3.7 的 WebPage0303.aspx 來說明這三個按鈕 1 <%@ Page Language="VB" %> 2 <script runat="server"> 3 Sub ChangeBorder(ByVal obj As Object, ByVal e As EventArgs) 4 btnbutton.style("border-style") = "dashed" 5 End sub 6 7 Sub Reset(ByVal obj As Object, ByVal e As ImageClickEventArgs) 8 btnbutton.style("border-style") = "outset" 9 End sub 10 </script> <script language="javascript"> 13 function SecondChance(){ 14 alert('chage the border of the above button.'); 15 } 16 </script> 17 <html><body><form runat="server"> 18 <asp:button id="btnbutton" PostBackUrl="~/Book/WebPage0301.aspx" 19 Text=" 瀏覽 WebPage0301.aspx" runat="server" /><br /> 20 <asp:linkbutton id="lbtbutton" Text="Change Button border" 21 OnClientClick="SecondChance()" OnClick="ChangeBorder" runat="server" /><br /> 22 <asp:imagebutton id="ibtbutton" AlternateText="Reset the button border" 23 ImageUrl="WebPage0304.bmp" OnClick="Reset" runat="server" /> 24 </form></body></html> 圖 3.7 WebPage0303.aspx 圖 3.7 中第 18 行到第 23 行有三個 controls, 分別定義 Button LinkButton 和 ImageButton, 瀏覽後顯示的畫面如圖 3.8 由圖 3.8 可以看出 LinkButton 顯示出的是有畫底線的文字,ImageButton 顯示出的是一個圖案,ImageUrl 是圖案的檔案名稱 當點選圖 3.8 中的第一個按鈕時, 因為 PostBackUrl="~/Book/WebPage0301.aspx", 所以會去執行 WebPage0301.aspx, 所顯示的畫面如圖 3.2 所示 第 3 行到第 15 行有三個副程式, 前兩個副程式是 3-11

12 透視 ASP.NET 3.5- 使用 VB server 的副程式, 而第三個副程式是 client 端的副程式 第三個副程式是按第二個鈕時首先被執行的副程式, 顯示的畫面如圖 3.9 所示 當按了圖 3.9 中的 " 確定 " 鈕後, 副程式 ChangeBorder 才會被執行, 此副程式會改變第一個按鈕的邊框 副程式 Reset 是按第三個鈕時被執行的副程式, 會將三個按鈕還原成圖 3.8 最後要注意的一點是第 7 行中的第 2 個參數 ImageClickEventArgs, 不可以寫成 EventArgs 參數 ImageClickEventArgs 是 ImageButton 被觸發時的事件參數名稱 圖 3.8 瀏覽 WebPage0303.aspx 圖 3.9 按第二個鈕後的畫面 3.2 Namespace 及 Import Directive 我們在設計程式時, 會發展出許許多多的物件, 這許許多多的物件, 可以在以後設計各種應用程式時, 反覆使用, 不必重新設計, 這也是物件導向程式設計對程式設計的一項重大的貢獻 微軟公司 (Microsoft) 的.NET Framework 正是貫徹這種觀念,.NET Framework 中包含了許多設計好的物件 ASP.NET 中 ".NET" 的由來也正是這個原因, 意思是將.NET Framework 中的物件, 應用在 ASP 的程式設計中 3-12

13 Standard Controls 3.NET Framework 中有成千上萬的物件, 某一類型的許多物件可以納入同一個 namespace 例如: 所有有關著色的物件都納入 System.Drawing 這個 namespace 中 ; 所有有關資料庫的物件皆納入 System.Data 這個 namespace 中 ; 所有有關 XML 的物件皆納入 System.Xml 這個 namespace 中等等 Namespace 的主要用意是, 當設計很複雜的系統時, 可以用來避免命名的困擾 因為系統很複雜, 設計的成員通常不只一位, 所以不同的子系統難免會取相同的名字 但是將兩個子系統合起來時, 就會有相同變數名稱的問題 要避免這種相同變數名稱的問題, 可以將子系統再取一個名字, 即 namespace 的名稱, 則在用子系統中的變數時, 每個變數名稱前面再冠上 namespace 的名稱, 就不會搞混是哪個子系統中的變數了 例如 : 許多縣市都有中山路, 只寫路名無法區別是哪個縣市的中山路, 但是寫成桃園縣中山路和台中市中山路就不會搞混了, 其中桃園縣和台中市都是該區域路名的 namespace 雖然 namespace 可以解決不同子系統中相同變數名稱的困擾, 但是也增加了撰寫程式時, 變數名稱太長的苦惱 例如 : 在圖 3.1 的程式 WebPage0301.aspx 中, 要用到 System.Drawing namespace 中的 Color 物件中的 FromName() property 時, 要寫成 System.Drawing.Color.FromName() 想想看如果在圖 3.1 中的第 15 行 第 17 行和第 35 行都要用這種方法來寫, 那有多煩 Import directive 就是為了解決變數名稱太長而設計的 例如 : 在程式中有多處要用到 System.Drawing 中的變數時, 可在程式開始時加進 <%@ Import Namespace="System.Drawing" %> 則在此程式中使用 System.Drawing 這個 namespace 中的變數時, 就可以不必再冠上 System.Drawing 這個字首 以前面的例子來說, 可以直接用 Color.FromName(), 而不必寫成 System.Drawing.Color.FromName() 如果有許多的 namespaces 都要 import, 則每個 namespace 都各要用一個 import directive 要知道 ASP.NET 中有哪些 Namespaces, 可以透過物件瀏覽器 (the Object Browser) 來觀察 其步驟如下 : 在 Visual Studio.NET 工作平台中按上方 檢視 (View) 的選項, 然後按 物件瀏覽器 (Object Browser), 顯示的畫面如圖

14 透視 ASP.NET 3.5- 使用 VB 圖 3.10 用物件瀏覽器觀察 namespaces 有些常用到的 namespaces, 會自動加進使用者的程式中, 以避免使用者的程式一開始就有一大堆的 import directives 下列 namespaces 就是會自動被 import 進使用者的網頁中 : System System.Collections.Specialized System.IO System.Text.RegularExpressions System.Collections System.Configuration System.Text System.Web System.Web.Security System.Web.UI System.Web.UI.WebControls System.Web.Caching System.Web.SessionState System.Web.UI.HtmlControls System.Web 圖 3.11 自動 import 進使用者網頁中的 namespaces Import 一個 namespace 並不會自動 import 該 namespace 中的子命名空間, 例如 :import 了命名空間 System.Data, 並不會自動 import System.Data 中的子 3-14

15 Standard Controls 3 命名空間, 如 System.Data.SqlClient 如果兩個 namespaces 都要 import, 則必須各自 import 之, 如下 : <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> 兩者出現的次序並沒有要求, 誰先誰後都可以 由於有太多的 namespaces, 甚或讀者還可以定義自己的 namespaces, 本書無法為讀者一一介紹 在後面各章中, 當用到某個 namespace 時, 會對用到的 namespace 略作說明 3.3 Label HyperLink Image 及 ImageMap Image control 是用來顯示圖案, 其語法如下 : <asp:image id=" 此 control 的 ID" ImageUrl=" 圖片檔案的 URL" ImageAlign=" 放置圖片的位置 " AlternateText=" 滑鼠停留時顯示的文字 " runat="server" /> 其 properties 大致上和 ImageButton 相同, 主要的不同點在於 Image 只顯示圖案, 而 ImageButton 還有 OnClick property HyperLink control 是用來連結其他網址或檔案, 其語法如下 : <asp:hyperlink id=" 此 control 的 ID" ImageUrl=" 圖片檔案的 URL" NavigateUrl=" 超連結網址的 URL" Target=" 目標視窗 " Text=" 超連結文字 " Runat="server" /> 其中 NavigateUrl 是要超連結的網址, 若在同一個資料夾中, 則寫檔案名稱即可, 如 NavigateUrl="WebPage0303.aspx" Text 是設定當滑鼠移至圖案上時所顯示的文字 Target 用來選擇顯示的視窗, 其值有 :_blank _parent _search _self 和 _top _blank 是將超連結的網頁另外開一個新的 IE 視窗來瀏覽, 關閉新的視窗, 原來的視窗還在 _search 是將原來的視窗分割成兩半, 左邊顯示超連 3-15

16 透視 ASP.NET 3.5- 使用 VB 結的網頁, 關閉超連結的網頁則還原成原來的視窗 _parent 是填滿原來的視窗, 原來的視窗還在, 但是要透過瀏覽器的 " 前一頁 "(back) 鈕回到原來的視窗 _self 是填滿原來的 frame, 並不影響其他的 frames _top 是填滿右邊的 frame, 並不影響其他的 frames 如果畫面中只有一個 frame, 則 _parent _self 和 _top 的效果都是一樣的, 都是填滿原來的視窗, 且都是以滑鼠點選 " 前一頁 " 及 " 下一頁 " 的方式轉換視窗, 關閉任何一個網頁就是關閉整個視窗 看下例 : <asp:hyperlink ImageUrl="WebPage0304.bmp" NavigateUrl=" Target="_blank" Text=" 瀏覽 Runat="server" /> 此例是顯示一個圖片 " WebPage0304.bmp", 點選該圖片時會另開新的視窗來瀏覽 NBA 的網頁 Label control 的語法如下 : <asp:label id=" 此 control 的 ID" Text=" 標示的文字 " AssociatedControlID=" 與此 Label 結合的 control" runat="server" /> 當標示的文字很多時, 則可以用下面的語法如下 : <asp:label id=" 此 control 的 ID" runat="server" > 標示的文字 </asp:label> 第二種語法中的 " 標示的文字 " 也是一種 control, 謂之 Literal control Label control 通常用來顯示各種抬頭或是用其傳達網頁執行後的一些訊息, 如圖 3.12 所示 圖 3.12 中第 4 5 行即為 Label 的一個例子, 此 Label 的 ID 為 "lblheader"; 高度為 "25px", 寫成 "25" 亦可 寬度佔滿整行, 注意 "100%" 和 "100" 不同, 前者為整行, 後者為 100 點大小 背景顏色為 "#99ff99","#99ff99" 為顏色代碼 Label 中標示的文字為 "A Label Example", 字體為白色粗體 在程式中, 要取得或更改各個 property 時, 須在 property 之前加上 "lblheader." 如要改高度成"30px", 要寫成 lblheader.height="30px" 將 Text 改成 " 一個 Label 的例子 ", 要寫成 lblheader.text=" 一個 Label 的例子 ", 其餘類推 圖 3.12 中的第 9 行安排了一個 TextBox, 是用來說明 AssociatedControlID 的意思 第 4 行的 Label control 中 3-16

17 Standard Controls 3 將 AssociatedControlID 設定成 "mytextbox", 即上述 TextBox 的 ID 並將 Label control 中的 AccessKey 設定成 "N", 表示當 "ALT" 鍵和 "N" 一起被按下時, 游標要移至名為 "mytextbox" 的 TextBox 的位置 1 <html> 2 <body> 3 <center> 4 <asp:label ID="lblHeader" AssociatedControlID="myTextBox" AccessKey="N" 5 Height="25px" Width="100%" BackColor="#99ff99" ForeColor="white" 6 Font-Bold="True" Text="A Label Example" Runat="server" /> 7 </center> 8 <form runat="server"> 9 <asp:textbox ID="myTextBox" runat="server" /> 10 </form> 11 </body> 12 </html> 圖 3.12 WebPage0305.aspx ImageMap control 的語法如下 : <asp:imagemap id=" 此 control 的 ID" ImageUrl = " 地圖或圖片檔案的 URL" ImageAlign=" 地圖在網頁中的擺放位置 " HotSpotMode="Hot Spot 的模式 " OnClick=" 副程式名稱 " runat="server" > <asp:circlehotspot /> <asp:rectanglehotspot /> <asp:polygonhotspot /> </asp: ImageMap > ImageMap control 是用來顯示一幅圖案, 而且可在圖案中安排一些可以點選的位置, 當點選那些位置時, 可以瀏覽別的網址, 或顯示一些訊息, 那些刻意安排的位置就稱作 Hot Spot( 熱點 ) Image control 中的 ImageAlign 屬性是描述圖案在網頁中的擺放位置, 其值有十個 :AbsBottom AbsMiddle Baseline Bottom Left Middle NoSet Right TextTop Top HotSpotMode 的值有四種 :Inactive Navigate NoSet 和 PostBack Inactive 的意思是所安排的 Hot Spot 沒有作用,Navigate 的意思是 Hot Spot 的作用是瀏覽所描述的網址 NoSet 的意思是設定為預設值, 即 Navigate PostBack 的意思是傳回 PostBackValue ImageMap control 有三個子 controls : CircleHotSpot RectangleHotSpot 和 3-17

18 透視 ASP.NET 3.5- 使用 VB PolygonHotSpot, 這三個子 controls 是用來描述 Hot Spot 的位置 我們用例子來說明 ImageMap control 及其三個子 controls 的用法, 見圖 3.13 的 WebPage0306.aspx 1 <%@ Page Language="VB" %> 2 <script runat="server"> 3 Sub ShowInfo(ByVal obj As Object, ByVal e As ImageMapEventArgs) 4 Response.Write(" 台東大學 is in " & e.postbackvalue) 5 End Sub 6 </script> 7 <html><body> 8 <form runat="server"> 9 <asp:imagemap ImageUrl="WebPage0307.jpg" OnClick="ShowInfo" runat="server" > 10 <asp:circlehotspot X="110" Y="115" Radius="20" 11 NavigateUrl=" /> 12 <asp:rectanglehotspot Left="135" Right="155" Top="80" Bottom="150" 13 NavigateUrl=" /> 14 <asp:polygonhotspot Coordinates="115,160,135,180,110,210,105,237,108,200" 15 HotSpotMode="PostBack" PostBackValue="TaiDong." /> 16 </asp:imagemap> 17 </form> 18 </body></html> 圖 3.13 WebPage0306.aspx 在圖 3.13 的第 9 行到第 16 行安排了一個 ImageMap control, 用來顯示 WebPage0307.jpg 中的台灣地圖, 瀏覽 WebPage0306.aspx 的畫面如圖 3.14(a) 所示 為了說明 CircleHotSpot RectangleHotSpot 和 PolygonHotSpot 的用法, 我們在此地圖中安排了三個 Hot Spot, 分別安排在南投 花蓮和台東 南投的 Hot Spot 是用 CircleHotSpot control 來描述,CircleHotSpot control 是用來描述一個圓形的 Hot Spot CircleHotSpot control 中常用到的 properties 有 :X Y Radius NavigateUrl HotSpotMode 和 PostBackValue, 其中 X Y 和 Radius 是用來描述熱點的位置 X 和 Y 是用來描述圓心的 x 座標和 y 座標,Radius 是用來描述圓心的半徑 此例中 X="110" Y="115" Radius="20" 表示圓心的座標為 (110, 115), 半徑為 20 個 pixel 的範圍 注意座標的標示法, 網頁左上角的座標為 (0, 0), 越往右 x 的座標值越大, 越往下則 y 的座標值越大 NavigateUrl 是描述, 當點選 Hot Spot 時所要瀏覽的網址 HotSpotMode 則是決定要瀏覽網址還是傳回 PostBackValue, 其用法將在介紹 PolygonHotSpot control 時說明之 RectangleHotSpot control 是用來描述一個矩形的 Hot Spot, 矩形上 下 左 右四個邊的位置分別用 Top Bottom Left Right 來描述, 見此例中的 3-18

19 Standard Controls 3 Left="135" Right="155" Top="80" Bottom="150" PolygonHotSpot control 是用來描述一個多邊形的 Hot Spot, 描述的方法是記載多邊形所有的頂點, 此例中 Coordinates="115, 160, 135, 180, 110, 210, 105, 237, 108, 200" 是描述五邊形的五個頂點的座標, 依次分別為 :(115, 160) (135, 180) (110, 210) (105, 237) (108, 200) 此例中將 HotSpotMode 的值設為 "PostBack", 並將 PostBackValue 的值設為 "TaiDong.", 表示點選此 Hot Spot 時, 要去執行 ImageMap control 中 Click 事件所對應的副程式 ShowInfo, 且此 PostBackValue 會儲存在 ImageMapEventArgs 之中, 見 WebPage0306.aspx 中的第 3 行和第 4 行 點選台灣地圖中的南投 花蓮和台東時的畫面, 分別如圖 3.14(b) (c) 和 (d) 所示 (a) (b) (c) (d) 圖 3.14 瀏覽 WebPage0306.aspx 3.4 TextBox TextBox control 除了表 3.1 中的 properties 外, 還有一些常用的 properties 及 events 如表 3.2 所示 表 3.2 TextBox 常用的 Properties 及 Events 名稱 AutoPostBack 說明若 AutoPostBack="true", 則當 TextChanged 事件發生後, 立即執行對應該事件的副程式 若 AutoPostBack="false", 則當 form 被傳送後,OnTextChanged 對應的副程式才會被執行 3-19

20 透視 ASP.NET 3.5- 使用 VB 名稱 說明 CausesValidation 決定是否要做此 TextBox 的驗證, 若值為 true 則表示要做,false 表示不要做 Columns 當 TextMode="MultiLine" 時的欄位行數 MaxLength 欄位內最多可鍵入的字數, 如 MaxLength="10", 則該欄最多鍵入 10 個 characters ReadOnly 欄位內容是 readonly( 唯讀 ) 的 Rows Text TextMode Wrap OnTextChanged 當 TextMode="MultiLine" 時的欄位列數 TextBox 中的文字內容, 通常當作 TextBox 的初值或預設值 有 3 種 modes:singleline( 單行 ) MultiLine( 多行 ) 及 Password( 密碼 ), 預設值為 SingleLine 當 TextMode="MultiLine" 時, 若 Wrap="true", 則一行資料打滿時, 游標會自動換行 當欄位內容改變時, 會觸發此事件 我們用一個例子來說明表 3.2 中某些 properties 的意思, 見圖 3.15 的 WebPage0308.aspx 沒講到的 properties, 則請讀者自行揣摩 1 <%@ Page Language="VB" %> 2 <script runat="server"> 3 sub Show(obj as Object, e as EventArgs) 4 lblmessage.text = tbdata.text 5 end sub 6 </script> 7 <html> 8 <body> 9 <form runat="server"> 10 <asp:textbox id="tbdata" TextMode="MultiLine" Rows="2" Columns="10" 11 Wrap="True" OnTextChanged="Show" runat="server" /><br> 12 <asp:button Text="submit" Runat="server" /><br> 13 <asp:label id="lblmessage" text="look!" runat="server" /> 14 </form> 15 </body> 16 </html> 圖 3.15 WebPage0308.aspx 圖 3.15 中第 行定義了一個 2 列 10 行的 TextBox, 故 TextMode 要設定成 "MultiLine" Wrap="True" 表示當一橫行打滿時要自動換行 注意, 當 TextMode="MultiLine" 時,AutoPostBack 設定成 "True" 也沒作用, 一定要等傳送 form 後, 才會執行 OnTextChanged 所定義的副程式 3-20