您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 2.0 Web 與 HTML 伺服器控制項：從基礎控制項到豐富元件完整解析

編輯：關於ASP.NET

伺服器控制項核心優勢

自動狀態保持：ViewState 機制跨回傳保留使用者輸入，無需手動重新繫結。
豐富物件模型：屬性、方法、事件完整封裝，程式碼操作直覺。
宣告式開發：.aspx 標記直接設定屬性、繫結事件、資料來源。
自適應渲染：依瀏覽器能力輸出 HTML 4.0 / XHTML / 行動裝置標記。
設計時支援：Visual Studio 拖曳、屬性視窗、智慧標籤、即時預覽。

兩大控制項家族

HTML 伺服器控制項

對應原生 HTML 標籤，加上 runat="server"。命名空間 System.Web.UI.HtmlControls。

HTML 標籤	伺服器控制項類別	關鍵屬性/事件
`<form>`	HtmlForm	Action, Method, Submit 事件
`<input type="text">`	HtmlInputText	Value, MaxLength, Size, ServerChange
`<input type="checkbox">`	HtmlInputCheckBox	Checked, ServerChange
`<select>`	HtmlSelect	Items, SelectedIndex, ServerChange
`<img>`	HtmlImage	Src, Alt, Align
`<table>`	HtmlTable	Rows, Cells, Border, CellPadding
其他無對應標籤	HtmlGenericControl	TagName, InnerHtml, InnerText

範例：

<form id="form1" runat="server">
    <h3>姓名：<input type="text" id="txtName" runat="server" /></h3>
    <select id="ddlCategory" runat="server">
        <option>心理學</option>
        <option>商業</option>
    </select>
    <input type="submit" value="查詢" runat="server" />
</form>

Web 伺服器控制項

功能更豐富、抽象層次更高、標記前綴 asp:。命名空間 System.Web.UI.WebControls。

控制項	用途	關鍵特性
`TextBox`	文字輸入	TextMode (Single/MultiLine/Password), AutoPostBack, TextChanged
`Button`	命令按鈕	CommandName, CommandArgument, Click, Command
`DropDownList`	下拉選單	Items, SelectedValue, AppendDataBoundItems, SelectedIndexChanged
`GridView`	資料表格	資料繫結、分頁、排序、編輯、樣板、樣式
`AdRotator`	輪播廣告	AdvertisementFile (XML), KeywordFilter, Impressions
`Calendar`	日期選擇	SelectedDate, VisibleDate, SelectionMode, DayRender
`Wizard`	精靈導航	WizardSteps, FinishComplete, Next/Previous 按鈕自動管理

AdRotator 範例：動態廣告輪播

<form runat="server">
    <asp:AdRotator ID="adRotator" runat="server"
        AdvertisementFile="~/App_Data/Ads.xml"
        BorderWidth="1" BorderColor="Black" />
</form>

Ads.xml：

<Advertisements>
  <Ad>
    <ImageUrl>~/images/ad1.jpg</ImageUrl>
    <NavigateUrl>https://example.com/product1</NavigateUrl>
    <AlternateText>產品一優惠</AlternateText>
    <Impressions>80</Impressions>
    <Keyword>electronics</Keyword>
  </Ad>
  <Ad>...</Ad>
</Advertisements>

狀態管理機制

ViewState：控制項層級，Base64 編碼儲存於隱藏欄位 __VIEWSTATE，預設啟用。
ControlState：關鍵資料（如 GridView 分頁索引），即使關閉 ViewState 也會保持。
Session/Application/Cache：跨頁面、跨使用者、伺服器端共享狀態。

事件模型

<asp:Button ID="btnSubmit" Text="送出" OnClick="btnSubmit_Click" runat="server" />
<asp:DropDownList ID="ddl" AutoPostBack="true" OnSelectedIndexChanged="ddl_Changed" runat="server" />

伺服器事件分類：

回傳事件：Click、TextChanged、SelectedIndexChanged → 完整頁面生命週期。
快取事件：Init、Load、PreRender、Unload → 每次請求皆觸發。
資料繫結事件：DataBinding、DataBound → DataBind() 時觸發。

設計時支援

智慧標籤：GridView、DetailsView 等提供快速設定選單（資料來源、欄位、分頁、樣式）。
屬性視窗：分類顯示所有屬性，提供下拉選單、編輯器、色彩選擇器。
即時預覽：Design 檢視直接呈現控制項渲染結果。

選擇指南：HTML vs Web 控制項

情境	推薦	理由
移植舊 ASP/HTML 頁面、需精確控制輸出標記	HTML 伺服器控制項	一對一對應、輕量、無額外抽象
新專案、資料密集型表單、需豐富功能（驗證、資料繫結、樣板）	Web 伺服器控制項	生產力高、功能完整、生態系豐富
行動裝置專用頁面	Mobile 控制項 (System.Web.UI.MobileControls)	自適應渲染 WML/cHTML/HTML