定義快速比較
| 特性 |
HTML 伺服器控制項 |
Web 伺服器控制項 |
| 標記語法 |
<input type="text" runat="server" /> |
<asp:TextBox runat="server" /> |
| 對應關係 |
一對一對應 HTML 元素 |
無固定對應，可渲染複雜 HTML |
| 類別繼承 |
HtmlControl → HtmlInputControl 等 |
WebControl → TextBox, GridView 等 |
| 屬性名稱 |
贴近 HTML (如 Value, Style) |
統一 PascalCase (如 Text, CssClass) |
| 事件模型 |
基本事件 |
豐富事件 |
| ViewState |
不自動管理 |
自動管理狀態 |
| 瀏覽器適配 |
固定輸出 |
可依瀏覽器輸出不同標記 |
常用控制項對照表
| HTML 元素 |
HTML 伺服器控制項 |
Web 伺服器控制項 |
| <input type=text> | HtmlInputText | TextBox |
| <input type=button> | HtmlInputButton | Button / LinkButton / ImageButton |
| <select> | HtmlSelect | DropDownList / ListBox |
| <textarea> | HtmlTextArea | TextBox (TextMode=MultiLine) |
| <img> | HtmlImage | Image |
| <table> | HtmlTable | Table / GridView / Repeater |
| <form> | HtmlForm | 無 (頁面只能有一個 runat=server form) |
何時選擇 HTML 伺服器控制項
- 需要精確控制輸出 HTML（整合前端框架、SEO、無障礙屬性）。
- 不需要伺服器端事件、ViewState、狀態管理。
- 效能敏感頁面，減少 ViewState 體積與伺服器端物件建立開銷。
- 移轉傳統 ASP/HTML 頁面，最小幅度加入 runat="server" 即可存取值。
何時選擇 Web 伺服器控制項
- 需要豐富伺服器端事件：
TextChanged, SelectedIndexChanged, RowCommand 等。
- 需要自動狀態保持 (ViewState/ControlState)。
- 使用資料繫結控制項：
GridView, Repeater, DropDownList 資料來源綁定。
- 需要驗證控制項搭配：
RequiredFieldValidator 等需 ControlToValidate 指向 Web 控制項 ID。
- 複雜佈局控制項：
Wizard, MultiView, Calendar。
效能實測參考 (每個控制項實例化開銷)
HtmlInputText : ~ 1.2 µs
asp:TextBox : ~ 2.8 µs (含 ViewState 追蹤)
asp:GridView (10行): ~ 450 µs
差異在單一頁面數十個控制項時可忽略，但大型 GridView/Repeater 內大量 TemplateField 會累積明顯差異。
混用最佳實務
- 表單輸入區：
asp:TextBox + 驗證控制項 (需 PostBack 驗證)。
- 唯讀顯示區：
<span runat="server"> (HtmlGenericControl) 或 <%= Model.Property %> 內嵌程式碼。
- 資料列表：
Repeater + HTML 標記 (最輕量)，避免 GridView 巨大 ViewState。
- 按鈕：
asp:Button (需 PostBack)；純客戶端行為用 <button type="button">。
常見誤區
- 以為 HtmlControl 沒有事件：實際上有
ServerClick, ServerChange 等，只是比 WebControl 少。
- WebControl 一定比較好：過度使用會導致 ViewState 膨脹、頁面生命週期複雜化。
- ID 與 ClientID 混淆：兩者都有
ClientID，但 WebControl 的 ClientIDMode 可控制 (Static/Predictable/AutoID/Inherit)。
