Chapter 4 基本伺服器控制項.

Presentation on theme: "Chapter 4 基本伺服器控制項."— Presentation transcript:

1 Chapter 4 基本伺服器控制項

2 本章提要 4 - 1 認識 Web Form 與控制項 4 - 2 元件在網頁上的位置調整
4 - 3 顯示文字的 Label 、Literal 控制項 4 - 4 送出資料的按鈕－Button、LinkButton、ImageButton 控制項 4 - 5 TextBox 控制項－輸入文字的欄位 4 - 6 Postback 觀念與非按鈕控制項的事件觸發 4 - 7 預設按鈕與預設焦點

3 4 - 1 認識 Web Form 與控制項 什麼是 Web Form 事件驅動程式設計 什麼是控制項

4 什麼是 Web Form ASP.NET 中, 一個 Web Form 就是一個網頁。
在 VWD 的設計模式下, Web Form 就像是一張空白的畫布, 您可以在這張畫布以滑鼠拉曳的方式, 隨意放上自己想要的元件, 例如按鈕、文字欄...等, 設計出網頁程式的外觀：

5 什麼是 Web Form

6 什麼是 Web Form 除了放置元件以外, Web Form 也是各元件表演的舞台, 所有元件的運作, 都是在 Web Form 上面執行。 所以在 ASP.NET 中要製作動態網頁, 首先便必須新增一個 Web Form, 然後才能開始設計網頁程式。

7 事件驅動程式設計 在 Web Form 上面設計完外觀後, 如果要讓網頁『動』起來, 只要分別指定元件的各種『事件』 (Event) 發生時, 程式相對應的動作即可。 所有網頁上可能產生的狀況, 不論是頁面載入、按下按鈕...等都會觸發對應的事件, 例如按鈕 A 被按下 (click) 所觸發的事件, 便稱為按鈕 A 的 Click 事件, 您可以指定當發生此事件時, 會觸發一段程式執行某些動作：

8 事件驅動程式設計

9 事件驅動程式設計 所以『指定元件→選擇事件→撰寫事件處理程序』, 就是在 ASP.NET 中設計網頁程式的基本方式。
整個 Web Form 其實就是由不同元件 (物件) 所組成, 然後以事件來驅動的程式, 這便是前面第二、三章都曾經提到的『事件驅動程式設計』。

10 什麼是控制項 在 Web Form 上面的各個元件, 例如按鈕、文字框...等, 並不是所有元件都具備『動』 起來的能力。在 ASP.NET 網頁上可以動的元件, 稱為控制項 (Control)。

11 控制項的種類 控制項可以分成 HTML 伺服器控制項與 Web 伺服器控制項兩種, 我們先來觀察這兩種控制項。筆者在 Web Form 的設計模式新增以下兩個按鈕控制項 (新增控制項的方式隨後會說明)：

12 控制項的種類 切換至原始檔模式

13 控制項的種類 從上面可以看到一個明顯的區別, HTML 伺服器控制項是由具備 runat = "server" 屬性的 HTML 標籤所產生, 而 Web 伺服器控制項則是 <asp:xxx> 格式標籤所產生的, 下面將分別說明這兩種控制項。

14 HTML 伺服器控制項 在 ASP.NET 網頁中, 沒有 runat = "server" 屬性的一般 HTML 標籤, 都無法在 ASP.NET 網頁程式中針對其進行動態處理, 亦即您無法透過 ASP.NET 讓這些 HTML 標籤『動』起來。

15 HTML 伺服器控制項 不過如果您在 HTML 標籤中加上 runat = "server" 屬性, 則其將搖身一變, 成為 HTML 伺服器控制項, ASP.NET 看到這個屬性, 便會以 System.Web.UI.HtmlControls 命名空間中對應的類別產生物件, 以供程式處理。 如果您想要將網頁上的 HTML 標籤改成 HTML 伺服器控制項, 請在 VWD 的設計模式如下操作：

16 HTML 伺服器控制項

17 HTML 伺服器控制項

18 Web 伺服器控制項 每個 HTML 伺服器控制項都是由一個 HTML 標籤轉變而來的, 不過 Web 伺服器控制項便不同, 它們是 ASP.NET 特別提供的控制項。 幾乎所有網頁需要的元件, 例如按鈕、表格、項目、圖片...等, 都可以用 Web 伺服器控制項來製作, 所以絕大部分情況下, 當您設計 ASP.NET 網頁程式時, 可以全部使用 Web 伺服器控制項, 而不需要動用任何 HTML 伺服器控制項。

19 Web 伺服器控制項 Web 伺服器控制項除了產生按鈕、文字框...等基本的 HTML 元件以外, 還有許多功能強大的控制項, 例如月曆、廣告輪播、網站地圖...等。 在 VWD 內設計 Web Form 時, 旁邊工具箱除了 HTML 分類下的元件, 其他元件全部都是 Web 伺服器控制項, 請如下操作觀察 Web 伺服器控制項：

20 Web 伺服器控制項

21 Web 伺服器控制項

22 Web 伺服器控制項 存檔後請在原始檔模式窗格內按滑鼠右鈕, 執行在瀏覽器中檢視, 即可在瀏覽器中看到月曆的效果。
如果您在瀏覽器中檢視網頁原始碼, 會看到下面語法：

23 Web 伺服器控制項

24 Web 伺服器控制項 從上面的例子, 您可以看到 Web 伺服器控制項使用方便而且功能強大, 只要用滑鼠拉曳元件, 建立一行 <asp:xxx> 語法, 就可以做出單純使用 HTML 語法要寫半天的效果：

25 Web 伺服器控制項 由於 Web 伺服器控制項幾乎包含所有 HTML 伺服器控制項的效果, 而且還擁有更豐富的功能, 所以本書設計網頁程式時, 將以 Web 伺服器控制項為主, 在隨後章節中, 也會陸續為您介紹各 Web 伺服器控制項的使用方法。

26 4 - 2 元件在網頁上的位置調整 預設的位置定位方式 使用絕對位置隨意調整元件位置 使用相對位置設定元件間的相對距離
修改預設的位置定位方式

27 預設的位置定位方式 當您在 Web Form 上面設計網頁外觀時, 會發現預設狀態下, 各元件的位置定位方式有點像在記事本或是 Word 輸入文字一樣：

28 預設的位置定位方式 如果您有網頁設計經驗, 會知道這種定位原本就是 HTML 排版的方式, 這種定位稱為靜態位置。

29 使用絕對位置隨意調整元件位置 若您希望能在 Web Form 上面隨意設定元件的位置, 請如下操作：

30 使用絕對位置隨意調整元件位置

31 使用絕對位置隨意調整元件位置 所以只要如上設定使用絕對位置, 便可以隨意地調整元件的位置。

32 使用相對位置設定元件間的相對距離 除了靜態位置與絕對位置外, ASP.NET 還有一種相對位置的定位方式, 請如下操作測試相對位置：

33 使用相對位置設定元件間的相對距離

34 使用相對位置設定元件間的相對距離

35 使用相對位置設定元件間的相對距離

36 使用相對位置設定元件間的相對距離

37 修改預設的位置定位方式 VWD 預設排列位置的方式為靜態位置, 雖然可以個別調整元件的位置設定, 但是若元件的數量不少, 一一設定也實在很麻煩。 此時您可以執行『配置 / 位置 / 自動定位選項』命令, 修改預設的位置定位方式：

38 修改預設的位置定位方式

39 4 - 3 顯示文字的 Label、Literal 控制項
瞭解了 Web Form 與控制項的意義, 以及網頁上調整元件位置的方式之後, 隨後將開始說明各種 Web 伺服器控制項的使用方法, 一邊學習控制項, 也一邊學習 ASP.NET 的程式設計方式。

40 Label 控制項 當您想要在網頁上顯示靜態的文字時, 只要在設計模式中直接輸入文字即可。

41 建立 Label 控制項 請依下面方式操作, 於 Web Form 上面加入與設定 Label 控制項：

42 建立 Label 控制項

43 建立 Label 控制項 上面操作中, 您可以看到 Label 控制項的 Text 屬性是用來控制要顯示什麼文字, 所以未來在程式中只要修改某個 Label 控制項的 Text 屬性, 便可以改變該控制項於網頁上顯示的文字。 在 VWD 中選取網頁中的控制項時, 控制項的屬性都會列在屬性窗格內, 窗格下方也會簡要顯示說明各屬性用途, 所以您不需要特別記憶控制項的屬性。

44 建立 Label 控制項 此外, 在 Label 或隨後各控制項的屬性窗格內行為分類之中, 還有很多關於驗證、主題...等屬性, 這些屬性會在後續章節介紹。

45 控制項的 ID 就像人要有姓名或代號才能互相稱呼一樣, Web Form 上的每個控制項也都有一個識別碼 (ID), 這樣在程式中才能明確指定要處理哪一個控制項。 當您在 Web Form 上面建立控制項時, VWD 會自動賦予控制項一個預設 ID 識別碼, 您可以在該控制項的屬性窗格看到預設 ID 值, 也能直接將其改為好記的名稱：

46 控制項的 ID 有了 ID 識別碼之後, 在程式中只要使用 "ID.屬性" 的格式, 便可以存取其屬性, 例如 "Welcome.Text“
便表示要存取 ID 為 Welcome 的控制項之 Text 屬性。

47 使用程式存取與修改 Label 控制項的屬性
請依照前面的說明, 在 Web Form 中新增另一個 Label 控制項, 並如下設定其屬性：

48 使用程式存取與修改 Label 控制項的屬性
目前 Web Form 共有兩個 Label 控制項：

49 使用程式存取與修改 Label 控制項的屬性
在瀏覽器檢視執行結果

50 使用程式存取與修改 Label 控制項的屬性
接著請依照 3-1 節的說明, 建立 Page_Load 事件程序 (Page 物件代表目前正在執行的網頁, 而網頁被載入是一個事件, 至於 Page_Load 就是此事件所觸發的程序)。 請您在其中輸入以下程式碼：

51 使用程式存取與修改 Label 控制項的屬性

52 使用程式存取與修改 Label 控制項的屬性
執行結果：

53 使用程式存取與修改 Label 控制項的屬性
從上面的例子可以看到如何使用程式來修改控制項的屬性, 每一種控制項都有許多不同用途的屬性。 不過再次提醒您, 控制項的屬性都會列在其屬性窗格內, 下方也會簡要說明各屬性用途, 所以您不需要特別記憶控制項的所有屬性。

54 Literal 控制項 Literal 控制項與前述的 Label 控制項具備相同功能, 都能以程式控制顯示文字。
不過 Label 控制項具有許多樣式方面的屬性, 例如顏色、粗斜體、底線...等, 而 Literal 控制項則沒有樣式的屬性, 只能單純地將文字顯示於網頁上, 下面示意圖說明兩者的差異：

55 Literal 控制項

56 Literal 控制項 從上面可以看到, Label 控制項轉成 HTML 時, 會自動加上 <span> 標籤, 以顯示各種樣式效果；如果您不想要 ASP.NET 幫您 『加工』, 只想直接輸出單純的文字時, 就必須使用 Literal 控制項。 在 Web Form 中使用 Literal 控制項的方式如下：

57 Literal 控制項

58 Literal 控制項 此外, 請依照前面的說明, 在 Web Form 中新增另一個 Label 控制項, 並如下設定其屬性：

59 Literal 控制項 接著請建立 Page_Load 事件程序, 然後輸入以下程式碼, 並且在瀏覽器檢視執行結果：

60 Literal 控制項

61 Literal 控制項

62 Literal 控制項 在瀏覽器中檢視網頁原始碼

63 4 - 4 送出資料的按鈕－Button、LinkButton、ImageButton 控制項
按鈕可說是目前程式最不可缺少的一項元件, 不論是圖形或是網頁程式, 大多都需要按鈕讓使用者進行確認或送出資料。

64 按鈕的 Click 事件 按鈕最重要的一項特性是當使用者按下時, 按鈕會發出 Click 事件, 所以您可以在程式中設計一個對應的程序, 設定一旦收到按鈕的 Click 事件, 就觸發該程序執行某些動作：

65 使用 Button 控制項建立按鈕 請在 VWD 中如下操作以新增按鈕並設定對應 Click 事件的程序：

66 使用 Button 控制項建立按鈕

67 使用 Button 控制項建立按鈕 上面可以看到 VWD 自動建立了 ButtonA_Click 程序, 當 ButtonA 被按下而發出 Click 事件時, 便會觸發此程序, 所以您可以在 ButtonA_Click 程序內設計要執行的動作。 請在 ButtonA_Click 程序內輸入下面程式碼, 並且在瀏覽器檢視執行結果：

68 使用 Button 控制項建立按鈕

69 使用 Button 控制項建立按鈕 因為 ButtonA_Click 程序內的程式碼會修改 ButtonA 按鈕的 Text 屬性, 所以按下 ButtonA 時便會修改自己所顯示的文字：

70 多個按鈕的 Click 事件 如果 Web Form 上面有多個按鈕, 其設計的方法仍然與前述單一按鈕相同, 只要在設計模式下分別雙按各按鈕, 便可以個別建立各按鈕 Click 事件的處理程序。

71 多個按鈕的 Click 事件 請在 Web Form 中新增 2 個 Button 控制項與 1 個 Label 控制項, 並如下設定其屬性：

72 多個按鈕的 Click 事件 接著請在設計模式下分別雙按 Button1 與 Button2, 建立 Button1_Click 與 Button2_Click 程序, 在其中輸入以下程式碼：

73 多個按鈕的 Click 事件 在瀏覽器檢視執行結果：

74 多個按鈕的 Click 事件

75 LinkButton 控制項－連結形式的按鈕
LinkButton 控制項是一種連結形式的按鈕, 功能與前述 Button 控制項一樣, 但是具有不同的外觀：

76 LinkButton 控制項－連結形式的按鈕
LinkButton 控制項的原理與使用方法皆與 Button 控制項相同, 所以此處不再贅述, 直接以範例說明。請在 Web Form 中新增 2 個 LinkButton 控制項與 1 個 Label 控制項：

77 LinkButton 控制項－連結形式的按鈕
除了上面說明的屬性外, 請再如下設定 Label 控制項的屬性：

78 LinkButton 控制項－連結形式的按鈕
接著請在設計模式下雙按 EnableCP 與 DisableCP, 建立 EnableCP_Click 與 DisableCP_Click 程序, 在其中輸入以下程式碼：

79 LinkButton 控制項－連結形式的按鈕
在瀏覽器檢視執行結果：

80 LinkButton 控制項－連結形式的按鈕

81 ImageButton 控制項－圖形式按鈕
ImageButton 控制項是圖形式的按鈕, 功能與前述 Button、LinkButton 控制項一樣, 但是可以指定圖片做為按鈕的外觀, 所以使用 ImageButton 控制項時, 必須先準備好圖片。 ImageButton 控制項的原理與使用方法皆與 Button 控制項相同, 所以此處不再贅述, 直接以範例說明。 請在 Web Form 中新增 1 個 ImageButton 控制項與 2 個 Label 控制項, 並如下設定其屬性：

82 ImageButton 控制項－圖形式按鈕

83 ImageButton 控制項－圖形式按鈕
ImageButton 控制項的 ImageUrl 屬性是用來設定圖片的 URL 位址, 上例中筆者使用旗標網站的圖片來當作圖形按鈕。

84 ImageButton 控制項－圖形式按鈕
除了使用外部圖片外, ImageButton 控制項當然也可以使用本身網站的圖片, 關於如何在 ASP.NET 中使用本身網站圖片的方法, 請參閱本書 2-33 頁。 接著請在設計模式下雙按 Go 按鈕, 建立 Go_Click 程序, 在其中輸入以下程式碼：

85 ImageButton 控制項－圖形式按鈕

86 ImageButton 控制項－圖形式按鈕

87 ImageButton 控制項－圖形式按鈕
在瀏覽器檢視執行結果：

88 4 - 5 TextBox 控制項－輸入文字的欄位 前面透過示意圖與範例程式, 說明了什麼是 『事件驅動程式設計』, 此外也已經為您介紹多種按鈕與動態顯示文字的控制項。 不過網頁程式上面除了動態文字與按鈕, 當然少不了讓使用者輸入文字的欄位, 這種欄位可以透過 TextBox 控制項來建立, 本節將說明 TextBox 控制項的屬性與使用方法。

89 使用 TextBox 控制項建立輸入欄位 請在 VWD 中如下操作以建立輸入欄位：

90 使用 TextBox 控制項建立輸入欄位 在瀏覽器檢視執行結果

91 使用 TextBox 控制項建立輸入欄位 上面例子可以看到 TextBox 控制項的 Text 屬性代表欄位中的文字, 所以未來程式要讀取使用者輸入的文字時, 也是從 Text 屬性即可取得。 接著便將說明如何搭配按鈕, 讀取使用者所輸入的資料。 請在 Web Form 中各建立 1 個 TextBox、Button、Label 控制項, 並如下設定其屬性：

92 使用 TextBox 控制項建立輸入欄位

93 使用 TextBox 控制項建立輸入欄位 接著請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

94 使用 TextBox 控制項建立輸入欄位 在瀏覽器檢視執行結果：

95 使用 TextBox 控制項建立輸入欄位

96 使用 TextBox 控制項建立輸入欄位 如果不輸入名字, 直接按送出鈕, 則網頁會顯示提醒語如下：

97 可輸入密碼或是多行文字的欄位 TextBox 控制項所建立的欄位預設只能輸入單行資料, 不過有時候留言板之類的網頁需要讓使用者一次輸入多行資料, 或者有的欄位想要讓使用者輸入密碼, 為了安全考量希望不要將文字顯示於螢幕上。 要建立這些不同用途的輸入欄位, 只要修改 TextBox 控制項的 TextMode 屬性即可：

98 可輸入密碼或是多行文字的欄位

99 可輸入密碼或是多行文字的欄位

100 可輸入密碼或是多行文字的欄位 建立多行欄位時, 除了上述超過欄位長度會出現垂直捲動軸以外, 也可以使用 Wrap 屬性, 設定超過欄位寬度時, 是否出現水平捲動軸：

101 可輸入密碼或是多行文字的欄位

102 使用多行的 TextBox 控制項建立留言板
到這裡我們已經說明了 TextBox 以及其他多個控制項的屬性, 因此可以學以致用, 用 TextBox、Button 與 Label 控制項, 來建立一個簡單的留言板程式。 由於我們還沒有學到如何將資料存放於檔案或資料庫, 所以這裡的留言板程式將只接收使用者輸入的文字, 然後單純地顯示於網頁上。雖然不是一個真的留言板, 但是可以讓我們練習程式的寫作。

103 使用多行的 TextBox 控制項建立留言板
請在 Web Form 中各建立 1 個 TextBox、Button 與 Label 控制項, 並如下設定其屬性：

104 使用多行的 TextBox 控制項建立留言板

105 使用多行的 TextBox 控制項建立留言板
當使用者在 TextBox 控制項內輸入文字, 然後按下 Button 控制項, 此時會產生按鈕的 Click 事件, 因此觸發相對應的事件處理程序, 這個流程在前面範例已經練習過許多次了。 而這個簡易留言板程式著重的地方, 在於如何撰寫 Click 的事件處理程序, 將使用者留言顯示於網頁。下面是我們將使用的處理流程：

106 使用多行的 TextBox 控制項建立留言板

107 使用多行的 TextBox 控制項建立留言板
您會注意到上面流程中有一個處理留言的步驟, 其實如果只要讀取文字然後顯示留言, 並不需要這個步驟, 但是因為網頁使用 HTML 語法顯示文字, 而在 HTML 語法中, 空白必須使用 “ ” 符號來表示, 另外換行也要使用 "<br/>" 標籤, 所以程式讀取使用者輸入的純文字後, 應該將空白代換為 " ", 換行代換為 "<br/>", 才能正常地將留言顯示於網頁上。

108 使用多行的 TextBox 控制項建立留言板
各控制項的 Text 屬性都是 .NET Framework 的 String 類別的物件, 可呼叫其 Replace() 方法進行字串代換。將舊字串代換為新字串的語法如下： 瞭解邏輯流程以及代換字串的方式後, 接著請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

109 使用多行的 TextBox 控制項建立留言板

110 使用多行的 TextBox 控制項建立留言板

111 使用多行的 TextBox 控制項建立留言板
在瀏覽器檢視執行結果：

112 使用多行的 TextBox 控制項建立留言板

113 使用多行的 TextBox 控制項建立留言板

114 使用多行的 TextBox 控制項建立留言板
前面曾經提到必須代換純文字的換行與空白, 在程式碼中要表示空白字元很簡單, 但是換行是特殊的字元, 要如何表示呢？ 為了解決這個問題, Visual Basic 已經預先設定好了 vbCrLf 這個常數代表換行字元, 所以在第 15 行使用 vbCrLf 就可以針對換行字元進行處理了。

115 使用多行的 TextBox 控制項建立留言板
Visual Basic 中還有許多其他常數代表其他特殊字元, 詳細請參考線上說明的『列印和顯示常數』段落。 一般留言板會在留言前面加上日期與時間, 所以程式第 18 行以 Now 屬性取得日期與時間, 然後使用 ToString 方法轉為字串。Now 是 .NET Framework 的 Microsoft.VisualBasic 命名空間下 DateAndTime 模組的成員, 可以用來取得伺服器目前的日期時間。

116 4 - 6 Postback 觀念與非按鈕控制項的事件觸發
前面我們已經使用『事件驅動程式設計』的觀念設計了多個網頁程式, 您可能會產生疑問：為何一定都是按下按鈕才會產生事件？ 本節將介紹事件驅動背後的運作原理, 並且說明如何讓其他非按鈕的控制項也能觸發事件處理程序讓網頁動起來。

117 產生事件的原理－Postback 第 1 章已經介紹過動態網頁程式的基本原理, ASP.NET 程式是在遠端伺服器上面執行, 而用戶端只負責接收與送出資料：

118 產生事件的原理－Postback

119 產生事件的原理－Postback 使用者在網頁的操作及輸入的資料, 會在上面的步驟 3 送回給伺服器, ASP.NET 收到用戶端傳送過來的資料後, 會開始分析並產生事件, 例如按鈕 A 被按下, 便產生按鈕 A 的 Click 事件, 然後執行對應的事件處理程序：

120 產生事件的原理－Postback 由上面說明可以發現, 因為網頁是顯示於用戶端, 所以不論使用者做出任何動作操作, 如果沒有送回伺服器, 那些操作就永遠無法產生事件並且觸發相對應的程序。 而『送回伺服器』這個動作在 ASP.NET 中被稱為 Postback, 因此換句話說, 使用者的動作一定要 Postback 回伺服器, 才能順利觸發事件處理程序。

121 產生事件的原理－Postback 按鈕是傳統網頁送出資料的基本工具, 所以前面我們幾乎都是藉由按鈕的 Click 事件來執行程式。

122 TextBox 控制項的 TextChanged 事件
我們將藉由 TextBox 控制項的 TextChanged 事件, 說明非按鈕的控制項如何 Postback 回伺服器。 TextChanged 事件代表輸入欄位中的文字已經發生變化, 也就是使用者在 TextBox 控制項中新增或刪除文字, 便會產生 TextChanged 事件。

123 TextBox 控制項的 TextChanged 事件
請在 Web Form 中各建立 1 個 TextBox 與 Label 控制項, 並如下設定其屬性：

124 TextBox 控制項的 TextChanged 事件
接著請在設計模式下雙按 TextBox1, 建立 TextBox1_TextChanged 程序, 在其中輸入以下程式碼：

125 TextBox 控制項的 TextChanged 事件
在瀏覽器檢視執行

126 TextBox 控制項的 TextChanged 事件
要讓非按鈕控制項的事件可以 Postback 回伺服器其實相當簡單, 只要將控制項的 AutoPostBack 屬性設定為 “True”, 便表示此控制項的事件會自動 Postback, 再也不需要透過按鈕了。 所以請在 VWD 中將 TextBox1 的 AutoPostBack 屬性設定為 "True", 然後重新在瀏覽器檢視執行：

127 TextBox 控制項的 TextChanged 事件

128 4 - 7 預設按鈕與預設焦點 下面是一般在 ASP.NET 網頁程式中輸入資料的步驟：

129 預設按鈕與預設焦點 先用滑鼠點輸入欄位, 最後用滑鼠按下按鈕, 這是每個人都很熟悉的簡單動作。
不過在某些狀況下, 例如業務或會計人員要快速輸入大量資料, 這時候一下拿滑鼠, 一下用鍵盤, 操作上相當不便, 如果可以讓手一直保持在鍵盤上就好了。

130 預設按鈕與預設焦點 從上面輸入資料的步驟中, 您可以看到步驟 1 與 4 一定要使用滑鼠, 所以如果可以讓網頁載入時, 自動將游標放在第一個欄位中, 等全部資料輸入完畢後, 按下 鍵網頁就會自動使用預設按鈕送出資料, 這樣不用滑鼠即可輸入並送出資料。 要達成這個功能, 在 Web Form 的 DefaultButton 屬性內即可設定 鍵代表的按鈕, 而在 DefaultFocus 屬性內則能夠設定焦點預設放置的欄位。

131 預設按鈕與預設焦點 要建立如上圖的訂購單網頁, 並設定預設的按鈕與焦點。請如下在 Web Form 中建立 1 個 Label、2 個 TextBox 與 2 個 Button 控制項, 並如下設定其屬性：

132 預設按鈕與預設焦點 接著請在設計模式下雙按 Submit 與 Cancel 按鈕, 建立 Submit_Click 與 Cancel_Click 程序, 在其中輸入以下程式碼：

133 預設按鈕與預設焦點

134 預設按鈕與預設焦點 設計完訂購單程式後, 請如下設定此 Web Form 預設的按鈕與輸入游標一開始要放置的欄位：

135 預設按鈕與預設焦點 儲存檔案後, 在瀏覽器檢視執行結果：

136 預設按鈕與預設焦點

137 預設按鈕與預設焦點