第四章基本伺服器控制项.ppt

Chapter 4 基本伺服器控制項 本章提要 4 - 1 認識 Web Form 與控制項 4 - 2 元件在網頁上的位置調整 4 - 3 顯示文字的 Label 、Literal 控制項 4 - 4 送出資料的按鈕－Button、LinkButton、ImageButton 控制項 4 - 5 TextBox 控制項－輸入文字的欄位 4 - 6 Postback 觀念與非按鈕控制項的事件觸發 4 - 7 預設按鈕與預設焦點 4 - 1 認識 Web Form 與控制項 什麼是 Web Form 事件驅動程式設計 什麼是控制項 什麼是 Web Form ASP.NET 中, 一個 Web Form 就是一個網頁。 在 VWD 的設計模式下, Web Form 就像是一張空白的畫布, 您可以在這張畫布以滑鼠拉曳的方式, 隨意放上自己想要的元件, 例如按鈕、文字欄...等, 設計出網頁程式的外觀： 什麼是 Web Form 什麼是 Web Form 除了放置元件以外, Web Form 也是各元件表演的舞台, 所有元件的運作, 都是在 Web Form 上面執行。 所以在 ASP.NET 中要製作動態網頁, 首先便必須新增一個 Web Form, 然後才能開始設計網頁程式。 事件驅動程式設計 在 Web Form 上面設計完外觀後, 如果要讓網頁『動』起來, 只要分別指定元件的各種『事件』 (Event) 發生時, 程式相對應的動作即可。 所有網頁上可能產生的狀況, 不論是頁面載入、按下按鈕...等都會觸發對應的事件, 例如按鈕 A 被按下 (click) 所觸發的事件, 便稱為按鈕 A 的 Click 事件, 您可以指定當發生此事件時, 會觸發一段程式執行某些動作： 事件驅動程式設計 事件驅動程式設計 所以『指定元件→選擇事件→撰寫事件處理程序』, 就是在 ASP.NET 中設計網頁程式的基本方式。 整個 Web Form 其實就是由不同元件 (物件) 所組成, 然後以事件來驅動的程式, 這便是前面第二、三章都曾經提到的『事件驅動程式設計』。 什麼是控制項 在 Web Form 上面的各個元件, 例如按鈕、文字框...等, 並不是所有元件都具備『動』 起來的能力。在 ASP.NET 網頁上可以動的元件, 稱為控制項 (Control)。 控制項的種類 控制項可以分成 HTML 伺服器控制項與 Web 伺服器控制項兩種, 我們先來觀察這兩種控制項。筆者在 Web Form 的設計模式新增以下兩個按鈕控制項 (新增控制項的方式隨後會說明)： 控制項的種類 切換至原始檔模式 控制項的種類 從上面可以看到一個明顯的區別, HTML 伺服器控制項是由具備 runat = server 屬性的 HTML 標籤所產生, 而 Web 伺服器控制項則是 asp:xxx 格式標籤所產生的, 下面將分別說明這兩種控制項。 HTML 伺服器控制項 在 ASP.NET 網頁中, 沒有 runat = server 屬性的一般 HTML 標籤, 都無法在 ASP.NET 網頁程式中針對其進行動態處理, 亦即您無法透過 ASP.NET 讓這些 HTML 標籤『動』起來。 HTML 伺服器控制項 不過如果您在 HTML 標籤中加上 runat = server 屬性, 則其將搖身一變, 成為 HTML 伺服器控制項, ASP.NET 看到這個屬性, 便會以 System.Web.UI.HtmlControls 命名空間中對應的類別產生物件, 以供程式處理。 如果您想要將網頁上的 HTML 標籤改成 HTML 伺服器控制項, 請在 VWD 的設計模式如下操作： HTML 伺服器控制項 HTML 伺服器控制項 Web 伺服器控制項 每個 HTML 伺服器控制項都是由一個 HTML 標籤轉變而來的, 不過 Web 伺服器控制項便不同, 它們是 ASP.NET 特別提供的控制項。 幾乎所有網頁需要的元件, 例如按鈕、表格、項目、圖片...等, 都可以用 Web 伺服器控制項來製作, 所以絕大部分情況下, 當您設計 ASP.NET 網頁程式時, 可以全部使用 Web 伺服器控制項, 而不需要動用任何 HTML 伺服器控制項。 Web 伺服器控制項 Web 伺服器控制項除了產生按鈕、文字框...等基本的 HTML 元件以外, 還有許多功能強大的控制項, 例如月曆、廣告輪播、網站地圖...等。 在 VWD 內設計 Web Form 時, 旁邊工具箱除了 HTML 分類下的元件, 其他元件全部都是 Web 伺服器控制項, 請如下操作觀察 Web 伺服器控制項： Web 伺服器控制項 Web 伺服器控制項 Web 伺服器控制項 存檔後請在原始檔模式窗格內按滑鼠右鈕,