教學思路ASP.Net之伺服器控制項：一、Label、TextBox、HyperLink、三種Button控制項

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在ASP.net中，控制項主要分為HTML控制項和伺服器控制項，具體在頁面中採用哪一類的控制項，隨著學習的深入和開發經驗的積累，同學們會慢慢的熟練起來，就目前而言，伺服器控制項在學習中使用的比較頻繁，而且在用法上和Winform很類型，為了更好的過渡，我們先教授伺服器控制項，首先，讓我們從最簡單的label控制項開始學習。

伺服器控制項在一個頁面的原始碼中必須使用<asp: Contolstype（控制項類型如：Label） ID=”控制項名稱”runat=“server” Text=“控制項上的文字” >控制項的作用範圍，如：在控制項上的顯示繫結資料</asp:>，如果控制項沒有需要作用的範圍也可以採用沒有閉元素的形式，如：<asp: Contolstype（控制項類型如：Label） ID=”控制項名稱”runat=“server” Text=“控制項上的文字”Contolstype（控制項類型如：Label） />，這是一種XHTML的書寫格式。

label控制項除了能起到標籤的作用，比如我們可以像Winform中一樣，設定其Text屬性，還能起到給頁面添加熱鍵的功能，終端使用者在網頁上執行操作的用Alt+熱鍵即可。在給控制項設定熱鍵時，要避免IE已經使用了的Alt+F、E、V、I、O、T、A、W、H，如果使用了這些字母，IE操作就會替代我們在頁面上的操作。

TextBox控制項的使用中與Winform有一個屬性是需要記住的，TextMode文本的行為模式，值分別為：single單行輸入文本、MultiLine多行輸入文本、Password密碼輸入文本，當TextBox支援多行時，一定還需要修改wrap屬性，將其改為True，這樣輸入的文本可以根據文字框的width自動進行換行，而不是需要使用者輸入斷行符號進行換行；AutoCompleteType 屬性增加了自動完成功能，會記錄下此符合此屬性值的曆史填寫記錄，當其值是None時，TextBox 控制項與不同頁面上具有相同 ID 屬性的其他 TextBox 控制項共用該列表，當其值為Disabled視為取消自動完成功能。

HyperLink控制項會在頁面出現超連結的效果，可以設定NavigateUrl屬性點擊後將從一個頁面轉向NavigateUrl屬性值的頁面，類似於<a>標籤，Text屬性的值將設定為超連結的文本。如

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">使用Hyperlink控制項實現超連結</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx" Text="使用Hyperlink控制項實現超連結"/>

Button控制項在web中分為三種樣式：Button（標準的表單按鈕）、LinkButton（在按鈕上顯示超文本連結的按鈕控制項）、ImageButton（按鈕的顯示方式是用一張圖片），如果想修改Button和LinkButton按鈕的上的顯示文字，同樣是修改Text屬性；ImageButton上的圖片需要將圖片的路徑賦給ImagUrl屬性；LinkButton中最重要的屬性是PostBackUrl，值為當點擊linkbutton時，可以講頁面轉向到的頁面地址，這個頁面地址和圖片路徑一樣都可以採用相對路徑和絕對路徑，

下面同學們在工具列裡拖放兩個label和兩個TextBox控制項，三種button到頁面，布置成登入表單的功能，因為在頁面上不識別斷行符號，所以在使用者名稱與密碼行的換行，可以在頁面的原始碼中使用<br/>來實現換行，請同學們試著將密碼文字框改為密碼形式，將標準按鈕文字設定為“清空”、將linkbutton文本設定為“進入百度”，顯示效果是當用到點擊此按鈕時，將進入到http://www.baidu.com/,將登入按鈕用Imagebutton來布置，選擇一張本地圖片，目前的學習我還不打算寫任何代碼，一切得操作到是在設計介面的屬性介面可以做到如上效果。

布局登入
1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5     <title>無標題頁</title>
6 </head>
7 <body>
8     <form id="form1" runat="server">
9     <div>
10     
11         <asp:Label ID="Label1" runat="server" Text="使用者名稱：" AccessKey="y"
12             AssociatedControlID="TextBox1">User<u>n</u>ame</asp:Label>
13             
15         <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Email"></asp:TextBox>
16         <br />
17         <asp:Label ID="Label2" runat="server" Text="密   碼：" AccessKey="m"
18             AssociatedControlID="TextBox2"><u>P</u>assword</asp:Label>
19         <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
20         <br />
21         
22         <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/denglu.gif" />
23         <asp:Button ID="Button1" runat="server" Text="清空" />
24          
25         <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="http://www.baidu.com">進入百度搜尋</asp:LinkButton>
26     </div>
27     </form>
28 </body>
29 </html>
30

效果如下：請同學們注意留意TextBox1中AutoCompleteType屬性修改後的。

有關具體代碼實現具體功能的C#語句我會在講過常用的控制項用法後具體講解！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More