[ASP.NET WebForm] #3 控制項命名規則、常用控制項介紹(1)：Label、Textbox、Button

/ 後端技術 / 2025 年 3 月 13 日

本篇重點：

  • 控制項命名規則
  • 常用控制項介紹(上)：Label、TextBox、Button
  • 小練習~~~

控制項命名規則

在 ASP.NET Web Form 中，有許多控制項可以用來建立互動式的網頁表單，以下先列出幾個常用的：

  1. Label（標籤）：在網頁上顯示文字或資訊。
  2. TextBox（文字方塊）：接收使用者的文字輸入。
  3. Button（按鈕）：觸發後端程式碼的事件處理。
  4. CheckBox（核取方塊）：提供多選中的多個選擇。
  5. RadioButton（單選按鈕）：提供多選中的單一選擇。
  6. DropDownList（下拉式清單）：提供好幾個選項給使用者選擇。
  7. GridView（資料表格）：顯示資料的表格。
  8. FileUpload（檔案上傳）：可以上傳檔案至伺服器。
  9. Calendar（行事曆）：選擇日期或顯示日期資訊。

一般我們在命名時，會根據控制項的用途，搭配它的縮寫、數字組合起來。例如：

Label –> LB，顯示年齡的Label –> AgeLB <br/> TextBox–> TBX， 輸入姓名的 Textbox –> NameTBX <br/> Button –> BTN，確認的 Button –> YesBTN <br/>

如果有兩個以上那就 NameTBX1、NameTBX2，以此類推 ~~~~~

常用控制項介紹(上)

Label

打開前端頁面，點擊上方的「檢視」–> 「工具箱」、「屬性視窗」，有這兩個東西我們才可以使用控制項。

螢幕擷取畫面 (21)

接著在工具箱中點開「標準」–> 找到「Label」–> 滑鼠左鍵將它拖拉到右邊的頁面裡面 。

螢幕擷取畫面 (20)

  • 前端寫法：<br/>
<asp:Label ID="TestLB" runat="server" Text="Label"></asp:Label>

ID 就是這個控制項的名稱， runat=“server” 表示它能夠在伺服器上處理。<br/> 可以透過屬性視窗去修改控制項的外觀 (Font-size、style ……)、行為 (Enable、Visible ……)等。

  • 後端寫法：<br/>
Dim str As String = "Hello World！" 
TestLB.Text = str   'Label 名稱.text= 要輸出的內容

補充：在程式碼中可以用「‘」來註解，加在「’」後面的程式不會被編譯~~

TextBox

  • 前端寫法：<br/>
<asp:TextBox ID="TestTBX" runat="server"></asp:TextBox>
  • 後端寫法：<br/>
Dim str As String = "Hello World！" 
TestTBX.Text = str   'TextBox 名稱.text= 要輸出的內容

一般而言，TextBox 通常用來接收使用者輸入的內容，這時候就不會事先帶入值給它。

[補充] 屬性 <br/>

  • TextMode=“SingleLine”，預設單行
  • TextMode=“MultiLine”，可設定成多行
  • TextMode=“Password”，可設定成密碼輸入模式
  • MaxLength=“10”，可限制輸入的位元

Button

  • 前端寫法：<br/>
<asp:Button ID="TestBTN" runat="server" Text="Button" />

Text=“Button” 表示這個按鈕上方要顯示的文字。

  • 後端寫法：使用 OnClick 事件來處理按鈕的點擊事件。<br/>
Protected Sub TestBTNSubmit_Click(sender As Object, e As EventArgs) Handles TestBTN.Click
    ' 在這裡處理按鈕的點擊事件
End Sub

小練習

現在我們直接利用Label、TextBox、Button來寫一小段程式，底下是一個資料輸入的頁面

螢幕擷取畫面 (23)

  • 前端程式碼：

螢幕擷取畫面 (22)

<form id="form1" runat="server">
        <h1>學生基本資料</h1>
        <div>
            姓名： <asp:TextBox ID="NameTBX" runat="server"></asp:TextBox> <br/> 
            手機： <asp:TextBox ID="PhoneTBX" runat="server"></asp:TextBox> <br/>
            年齡：<asp:TextBox ID="AgeTBX" runat="server"></asp:TextBox> <br/>
            <br/>
            <asp:Button ID="SureBTN" runat="server" Text="輸入/修改" /> <br/>

            <asp:Label ID="MassageLB" runat="server" Text="請再次確認" Visible="False"></asp:Label> <br/>
            <asp:Label ID="NameLB" runat="server" Text="" ></asp:Label> <br/>
            <asp:Label ID="PhoneLB" runat="server" Text="" ></asp:Label> <br/>
            <asp:Label ID="AgeLB" runat="server" Text="" ></asp:Label> <br/>
            <br/>
            <asp:Button ID="SendBTN" runat="server" Text="送出" Visible="False" />
            <asp:Label ID="SuccessLB" runat="server" Text="資料輸入完成~~" Visible="False" ForeColor="Red"></asp:Label>
        </div>
    </form>

可以用 <br/> 換行來調整版面 (點視窗右下角的「設計」能夠看到畫面)。<br/> 一開始先將 MassageLB (提示訊息)、SendBTN (送出按鈕) 隱藏， 屬性是Visible=“False”，並且將 SuccessLB (成功訊息) 調整成紅字，屬性是 ForeColor=“Red”。

  • 後端程式碼：

螢幕擷取畫面 (24)

　'按下輸入/修改 Button 後
  Protected Sub SureBTNSubmit_Click(sender As Object, e As EventArgs) Handles SureBTN.Click

      '將提示訊息的 Label 改成可顯示
      MassageLB.Visible = True

      '將 TextBox 的值代入 Label
      NameLB.Text = "姓名：" & NameTBX.Text
      PhoneLB.Text = "手機：" & PhoneTBX.Text
      AgeLB.Text = "年齡：" & AgeTBX.Text

      '將送出的 Button 改成可顯示
      SendBTN.Visible = True

  End Sub

  '按下送出 Button 後
  Protected Sub SendBTNSubmit_Click(sender As Object, e As EventArgs) Handles SendBTN.Click

      '將成功訊息的 Label 改成可顯示
      SuccessLB.Visible = True

  End Sub