Web Form 表單與事件處理

第 4 章 Web Form 表單與事件處理 第 4 章 Web Form 表單與事件處理 4-1 事件處理的基礎 4-2 ASP.NET 網頁與 Page 物件 4-3 ASP.NET 的伺服端控制項 4-4 資料輸出控制項 4-5 送出資料的控制項 4-6 圖片和超連結控制項 http://www1.chihlee.edu.tw/teachers/chienhua/ 2 4-1 事件處理的基礎 4-1-1 事件的基礎 4-1-2 建立事件處理程序 4-1-3 事件處理程序的參數列 4-1-4 共用事件處理程序 4-1-1 事件的基礎 - 說明 事件 (Event) 是在執行應用程式時, 滑鼠或控制項載入等操作所觸發的一些動作 例如 : 將應用程式視為一輛公共汽車, 公車依照行車路線在馬路上行駛, 事件是在行駛過程中發生的一些動作, 如下所示 : 看到馬路上的紅綠燈 乘客上車 投幣和下車 動作發生時可以觸發對應事件, 當事件產生後, 接著針對事件進行處理 例如 : 看到站牌有乘客準備上車時, 乘客上車的事件就觸發, 司機知道需要路邊停車和開啟車門 3 4

4-1-1 事件的基礎 - 委託事件處理模型 Web Form 表單的事件處理是一種於委託事件處理模型, 分為引發事件的 事件來源 (Event Source) 控制項和處理事件的 傾聽者 (Listener), 如下圖所示 : 4-1-2 建立事件處理程序 - 方法一 : 建立預設事件處理程序 在 VS Express for Web 編輯視窗的設計檢視按二下控制項, 可以建立預設的事件處理程序, 常用控制項物件的預設事件處理程序, 如下表所示 : 5 6 4-1-2 建立事件處理程序 - 方法二 : 原始檔檢視建立事件處理程序 請在 VS Express for Web 編輯視窗的 物件 欄, 選取控制項物件後, 就可以在 事件 欄選擇指定的事件, 例如 :Page 物件的 PreRender 事件, 如下圖所示 : 選事件 4-1-2 建立事件處理程序 - 方法三 : 在屬性視窗建立事件處理程序 ASP.NET 網頁如果使用內嵌程式碼分割, 請在 屬性 視窗上方選取控制項物件後, 切換至事件清單, 就可以在下方 事件 欄按二下來建立事件處理程序, 如下圖所示 : 選物件 在上方工具列按 事件 鈕, 切換顯示此物件的事件清單 7 8

4-1-3 事件處理程序的參數列 事件處理程序預設是使用控制項名稱加上 _ 底線後的事件名稱為名, 如下所示 : Protected Sub Button1_Command(sender As Object, _ e As CommandEventArgs) End Sub 在事件處理程序的參數列有 2 個參數, 其說明如下所示 : 參數 sender: 此參數是 Object 資料型別, 代表觸發此事件的物件 參數 e: 它是 EventArgs 事件物件, 可以取得進一步的事件資訊 4-1-4 共用事件處理程序 - 說明 在 Web Form 表單新增的多個控制項可以共用同一個事件處理程序, 因為控制項的事件處理程序內容可能都大同小異, 我們可以建立共用的事件處理程序, 用來處理不同控制項所產生的事件 例如 : 在 Web Form 表單上擁有 Button1 和 Button2 兩個按鈕控制項, 依照之前的範例, 我們需要建立 Button1_Click() 和 Button2_Click() 兩個事件處理程序 事實上, 我們可以只建立 Button1_Click() 事件處理程序, 讓它同時處理 2 個按鈕的 Click 事件 9 10 4-1-4 共用事件處理程序 - 指定共用的事件處理程序 指定 Button2 也使用同一個事件處理程序, 請切換至設計檢視, 選 Button2 按鈕, 然後在 屬性 視窗上方選閃電鈕, 切換至 Button2 控制項的事件清單, 如下圖所示 : 指定事件處理程序為 Button1_Click 4-1-4 共用事件處理程序 - 判斷產生事件的控制項 因為程序處理 2 種不同控制項的事件, 為了知道事件是由哪一個控制項所產生, 我們需要使用 CType() 函數, 將參數 sender 轉換成控制項物件, 如下所示 : Dim btnbutton As Button btnbutton = CType(sender, Button) 上述程式碼宣告 Button 物件變數後, 使用 CType() 函數, 將參數轉換成 Button 物件, 函數第 2 個參數是轉換成的型別, 可以是資料型別或類別名稱 11 112

4-1-4 共用事件處理程序 - 範例網站 ASP.NET 網站 :Ch4-1-4 在 ASP.NET 網頁建立 2 個按鈕控制項共用同一個事件處理程序 Button1_Click(), 控制項模擬 2 張樸克牌, 其點數是由亂數產生, 按一下可以顯示點數, 可以猜測 2 張牌中, 哪一張牌的點數比較大, 如下圖所示 : 4-2 ASP.NET 網頁與 Page 物件 - 說明 在 VS Express for Web 建立的每一頁 ASP.NET 網頁, 在編譯後就是建立成 Page 物件 Page 物件是一個控制項的容器, 換句話說, 我們在 ASP.NET 網頁所新增的控制項就是新增在 Page 物件, 像是在一個大盒子中放入其他控制項的小盒子, 如下圖所示 : 13 14 4-2 ASP.NET 網頁與 Page 物件 - 屬性 Page 物件的常用屬性 4-2 ASP.NET 網頁與 Page 物件 - 事件 Page 物件的常用事件 15 16

4-2 ASP.NET 網頁與 Page 物件 - 範例網站 ASP.NET 網站 :Ch4-2 在 ASP.NET 網頁建立 Page 物件的事件處理程序, 以便在 Label 控制項顯示 Page 物件的事件觸發順序, 並且指定 Page 物件的 Title 屬性在瀏覽器上方顯示網站名稱的標題文字, 如下圖所示 : 4-3 ASP.NET 的伺服端控制項 4-3-1 伺服端控制項的基礎 4-3-2 HTML 控制項 4-3-3 Web 控制項 17 18 4-3-1 伺服端控制項的基礎 - 種類 ASP.NET 伺服端控制項的語法是使用 HTML 標籤或 XML 語法, 如下所示 : HTML 控制項 : 對應 System.Web.UI.HtmlControls 名稱空間的物件, 這些控制項直接對應 HTML 標籤, 只是新增 id 和 runat 屬性 Web 控制項 : 對應 System.Web.UI.WebControls 名稱空間的控制項物件, 它是使用 asp 字頭的 XML 標籤 4-3-1 伺服端控制項的基礎 - 說明 每一個控制項都是.NET Framework 物件, 透過 CLR 執行時, 控制項會轉換成 HTML 標籤, 例如 : TextBox 控制項標籤, 如下所示 : <asp:textbox id="name" runat="server"/> 在執行後就會轉換成 HTML 表單標籤 <input>, 如下所示 : <input type="text" name="name" id="name"/> 19 200

4-3-2 HTML 控制項 HTML 控制項是為了方便將現有 HTML 標籤轉換成伺服端控制項, 因為這些控制項都擁有對應的 HTML 標籤, 如下所示 : <input type="text" id="name" size ="20" runat="server"> 上述標籤和 HTML 標籤並沒有什麼不同, 其差異只在 runat 和 id 兩個屬性, 其說明如下表所示 : 4-3-3 Web 控制項 - 說明 Web 控制項是一組和 HTML 標籤完全無關的控制項, 其語法是使用 XML 標籤的寫法, 如下所示 : <asp:textbox id="name" width="200px" runat="server"/> 上述 Web 控制項是使用 asp 字頭的 XML 標籤, 在 : 符號後是控制項種類, 以此例是 TextBox 控制項,id 屬性為控制項名稱,runat 屬性值 server, 指明是位在伺服端處理 211 222 4-3-3 Web 控制項 - 常用控制項 4-3-3 Web 控制項 - 共同屬性 233 244

4-4 資料輸出控制項 4-4-1 Label 標籤與 Literal 文字值控制項 4-4-2 切換顯示的 Panel 控制項 4-4-1 Label 標籤與 Literal 文字值控制項 - 說明 Label 標籤控制項可以在網頁顯示文字內容, 它會轉換成 HTML 的 <span> 標籤 Literal 文字值控制項類似 Label 控制項, 只是沒有樣式屬性, 換句話說, 我們只能單純顯示文字內容 255 266 4-4-1 Label 標籤與 Literal 文字值控制項 - 新增控制項 在 工具箱 視窗的 標準 區段, 按二下 Label 控制項, 就可以在游標位置, 或拖拉至 <div> 標籤來新增 Label 標籤控制項, 選 Literal 控制項來新增 Literal 文字值控制項 4-4-1 Label 標籤與 Literal 文字值控制項 - 屬性 Label 和 Literal 控制項的常用屬性 277 288

4-4-1 Label 標籤與 Literal 文字值控制項 - 範例網站 ASP.NET 網站 :Ch4-4-1 在 ASP.NET 網頁新增 Label 和 Literal 控制項後, 指定 Label 控制項前景色彩為紅色後, 使用 Page_Load() 事件處理程序指定 Literal 控制項的初值和 Label 控制項的背景色彩, 如下圖所示 : 4-4-2 切換顯示的 Panel 控制項 - 說明 Panel 控制項如同是一個容器, 它的功能類似 HTML 標籤的 <div>, 其主要的目的是群組其他控制項且設定樣式, 以便建立網頁的輸出區域來控制網頁內容的顯示, 或執行切換顯示部分的網頁內容 Panel 控制項 299 30 4-4-2 切換顯示的 Panel 控制項 - 新增控制項 在 工具箱 視窗選 Panel 控制項, 然後拖拉至 <div> 標籤來新增控制項 4-4-2 切換顯示的 Panel 控制項 - 屬性 Panel 控制項的常用屬性 31 32

4-4-2 切換顯示的 Panel 控制項 - 切換顯示 在 ASP.NET 網頁可以使用 If 條件判斷 Visible 屬性值來切換顯示 Panel 控制項, 如下所示 : If pnlswitch.visible = True Then pnlswitch.visible = False Else pnlswitch.visible = True End If 4-4-2 切換顯示的 Panel 控制項 - 範例網站 ASP.NET 網站 :Ch4-4-2 在 ASP.NET 網頁新增 Panel 控制項建立網頁顯示區域, 內含 Label 控制項, 提供按鈕可以切換 Panel 控制項的顯示, 如下圖所示 : 33 34 4-5 送出資料的控制項 - 說明 ASP.NET 送出資料的控制項, 也就是三種按鈕控制項, 其說明如下所示 : Button 按鈕控制項 : 顯示一個按鈕, 按一下, 就可以執行指定的事件處理程序 LinkButton 超連結按鈕控制項 : 其功能如同 Button 控制項, 只是顯示外觀是超連結文字 ImageButton 圖片按鈕控制項 : 其功能也如同 Button 控制項, 只是其顯示外觀是一張圖片 4-5 送出資料的控制項 - 新增 Button 控制項 在 工具箱 視窗選 Button 控制項, 然後拖拉至表格的第 1 個儲存格 Button 控制項 35 36

4-5 送出資料的控制項 - Button 控制項屬性 Button 控制項的相關屬性說明, 如下表所示 : 4-5 送出資料的控制項 - 新增 LinkButton 控制項 請在 工具箱 視窗選 LinkButton 控制項, 然後拖拉至表格的第 2 個儲存格, 指定控制項 Text 屬性為 顯示使用者, 如下圖所示 : LinkButton 控制項 LinkButton 控制項的相關屬性和 Button 控制項相同 37 38 4-5 送出資料的控制項 - 新增 ImageButton 控制項 在 工具箱 視窗選 ImageButton 控制項, 然後拖拉至表格的第 3 個儲存格, 在選擇圖片後, 可以建立 ImageButton 控制項, 如下圖所示 : 4-5 送出資料的控制項 - ImageButton 控制項屬性 ImageButton 控制項的相關屬性和 Button 控制項相似, 只是沒有 Text 屬性, 其說明如下表所示 : ImageButton 控制項 39 40

4-5 送出資料的控制項 - 範例網站 ASP.NET 網站 :Ch4-5 在 ASP.NET 網頁新增 Button LinkButton 和 ImageButton 控制項後, 分別建立事件處理程序在 Label 控制項輸出訊息文字, 如下圖所示 : 4-6 圖片和超連結控制項 4-6-1 Image 圖片控制項 4-6-2 HyperLink 超連結控制項 41 42 4-6-1 Image 圖片控制項 - 說明 Image 圖片控制項可以顯示點陣圖格式 GIF PNG 或 JPG 等圖檔的內容, 如下圖所示 : 4-6-1 Image 圖片控制項 - 新增 Image 控制項 Image 圖片控制項可以用來顯示點陣圖格式 GIF 或 JPG 等圖檔的內容 請在 工具箱 視窗的 標準 區段, 選 Image 控制項, 就可以拖拉至表格的第二列, 然後拖拉放大尺寸 43 44

4-6-1 Image 圖片控制項 -Image 控制項屬性 Image 圖片控制項的常用屬性 4-6-1 Image 圖片控制項 - 範例網站 ASP.NET 網站 :Ch4-6-1 在 ASP.NET 網頁建立簡易的秀圖程式, 當新增 Image 控制項後, 按一下上方按鈕, 可以在下方顯示不同圖檔的圖片, 如右圖所示 : 45 46 4-6-2 HyperLink 超連結控制項 - 新增 HyperLink 控制項 HyperLink 超連結控制項可以用來在 ASP.NET 網頁顯示超連結文字或圖片, 它和 LinkButton 控制項雖然外觀相同, 不過, 它並不會送出資料至 Web 伺服器 請在 工具箱 視窗的 標準 區段, 選 HyperLink 控制項, 就可以拖拉至表格的第一列 4-6-2 HyperLink 超連結控制項 - HyperLink 控制項屬性 HyperLink 超連結控制項的常用屬性 47 48

4-6-2 HyperLink 超連結控制項 - 範例網站 ASP.NET 網站 :Ch4-6-2 在 ASP.NET 網頁新增圖片超連結來連接中華電信網站, 和一個文字超連結連接旗標公司的網站, 如下圖所示 : Reading Assignment Chapter 4 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 49 Slides developed by Chien-Hua Tsai 50