可以添加到ASP.NET頁面上的控制項有3種類型：
HTML伺服器控制項——這些控制項類比HTML元素，HTML開發人員會很熟悉他們。
Web伺服器控制項——這是一組新的控制項，其中一些控制項的功能與HTML控制項相同，但它們的屬性和其他元素有一個公用的命名模式，便於進行開發，而且可以與相似的Windows表單控制項保持一致。Web伺服器控制項有幾種類型，包括標準控制項，如按鈕、驗證使用者輸入的驗證控制項、簡化使用者管理的登入控制項，和處理資料來源的一些較複雜的控制項。
定製控制項和使用者控制項——由開發人員定義的控制項。
所有的Web伺服器控制項都以下出XML元素的方式使用：
| 代碼如下 | 複製代碼 |
<asp:X runat="server" attribute="value">Contents</asp:X> |
|
其中X是ASP.NET伺服器控制項的名稱，attribute=”value”是一個或多個屬性規範，Contents指定控制項的內容那個。
注意，控制項的文法是基於XML的（它們也可以內嵌在非XML代碼中，例如HTML）。省略閉合標記、空元素/>，或者重疊控制項，都會產生錯誤。
Web伺服器控制項上的runat=”server”屬性，遺落這個屬性，結果將是一個不能啟動並執行Web表單。
第一個例子，添加了兩個Web表單控制項，標籤和按鈕：
| 代碼如下 | 複製代碼 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label runat="server" ID="resultLable" /><br> <asp:Button runat="server" ID="triggerButton" Text="Click Me" /> </div> </form> </body> </html> |
|
看看設計螢幕（點擊代碼視窗的左下角“設計”），其中已經添加了控制項，並用它們的ID屬性命名。與Windows表單一樣，可以通過Properties視窗訪問所有的屬性、事件等。
添加的所有伺服器控制項都會自動成為物件模型的一部分，該物件模型是在這段後置代碼中為表單構建的。
要讓這個應用程式完成一些工作，應添加單擊按鈕的事件處理常式，可以在Propertier視窗中為按鈕輸入一個方法名，也可以雙擊該按鈕，得到預設的事件處理常式。如果雙擊按鈕，就可以自動添加一個事件處理方法：
| 代碼如下 | 複製代碼 |
protected void triggerButton_Click(object sender, EventArgs e) {
} |
|
把一些代碼添加到Default.aspx中，就可以把事件處理常式連結到按鈕上：
| 代碼如下 | 複製代碼 |
<div> <asp:Label runat="server" ID="resultLable" /><br> <asp:Button runat="server" ID="triggerButton" Text="Click Me" OnClick="triggerButton_Click" /> </div> |
|
其中OnClick屬性告訴ASP.NET運行庫，在產生表單的代碼模型時，把按鈕的單擊事件封裝到triggerButton_Click方法中。
修改triggerButton_Click()的代碼：
| 代碼如下 | 複製代碼 |
protected void triggerButton_Click(object sender, EventArgs e) { resultLable.Text="Button clicked!" } |
|
下面準備運行它，儲存所有內容。把Web瀏覽器指向Web網站的地址。如果使用IIS，就在瀏覽器輸入指向的URL。如果是使用內建的Web伺服器，需要啟動運行，快速鍵是Ctrl+F5，啟動伺服器，開啟一個瀏覽器，並指向指定的URL。
運行後，一般使用的是IE瀏覽器，所以按右鍵頁面，“查看原始碼（View Source）”。可以發現：
| 代碼如下 | 複製代碼 |
<form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTE2MjY5MTY1NQ9kFgICAw9kFgICAQ8PFgIeBFRleHQFD0J1dHRvbiBjbGlja2VkIWRkZPTxXBnqHNinCo99sErnwRMItG2q" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKwm6irAgLHpP+yC30qWqA4YEcrIE5FA3FFiB7agLXl" /> </div> <div> <span id="resultLable">Button clicked!</span><br> <input type="submit" name="triggerButton" value="Click Me" id="triggerButton" /> </div> </form> |
|
Web伺服器控制項產生了HTML，<span>和<input>分別代表<asp:Lable>和<asp:Button>。還有一個名為__VIEWSTATE的<input type=”hidden”>欄位，把前面提到的表單狀態封裝起來。在表單傳送伺服器以重新建立UI，同時跟蹤改變時使用這些資訊。注意<form>元素進行了配置，通過HTTP POST操作（在method中指定）把資料傳送回Default.aspx（在action中指定），它還被賦予了一個名稱form1。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
