ASP.NET 控件開發技巧 (一)：HtmlTextWriter 規範輸出、分段渲染重構、ID 命名策略與動態屬性條件輸出

控件渲染品質直接決定 HTML 輸出的標準度、可維護性與前端整合體驗。本文總結四大渲染最佳實踐。

1. 善用 HtmlTextWriter 強型別方法輸出標籤

不推薦：字串拼接 writer.Write("<select><option>...</select>") — 易出錯、無智慧提示、難維護。

推薦：流式 API：

writer.RenderBeginTag(HtmlTextWriterTag.Select);
writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
writer.RenderBeginTag(HtmlTextWriterTag.Option);
writer.Write("ASP.NET");
writer.RenderEndTag(); // </option>
writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
writer.RenderBeginTag(HtmlTextWriterTag.Option);
writer.Write("ASP.NET AJAX");
writer.RenderEndTag();
writer.RenderEndTag(); // </select>

• HtmlTextWriterTag / HtmlTextWriterAttribute / HtmlTextWriterStyle 列舉涵蓋所有標準 HTML 標籤/屬性/樣式。
• 自動處理屬性編碼、雙引號、布林屬性縮寫 (如 checked)、樣式字串組合。

2. 分段渲染重構：以 Render 開頭的私有方法

複雜控件渲染邏輯拆解為多個 RenderXxx 方法：

protected override void Render(HtmlTextWriter writer)
{
    RenderTable(writer);
}

private void RenderTable(HtmlTextWriter writer)
{
    writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0");
    writer.RenderBeginTag(HtmlTextWriterTag.Table);
    RenderPaymentMethod(writer);
    RenderCreditCardNo(writer);
    RenderCardholderName(writer);
    RenderExpirationDate(writer);
    RenderSubmitButton(writer);
    writer.RenderEndTag();
}

• 單一職責：每個方法只負責一個視覺區塊。
• 可覆寫：衍生類可選擇性覆寫特定區塊。
• 可測試：單元測試可針對個別 Render 方法驗證輸出。

3. 規範 ID 命名：UniqueID 作為前綴

// 父標籤
writer.AddAttribute(HtmlTextWriterAttribute.Id, this.UniqueID);
writer.RenderBeginTag(HtmlTextWriterTag.Select);

// 子標籤：父 ID + "_" + 語意後綴
writer.AddAttribute(HtmlTextWriterAttribute.Id, this.UniqueID + "_optAsp");
writer.RenderBeginTag(HtmlTextWriterTag.Option);

• 保證頁面內唯一，避免 ID 衝突導致 JS/CSS 選取錯誤。
2. 語意化前綴便於前端開發者定位 (如 ctl00_ContentPlaceHolder1_MyControl_optAsp)。 3. 支援 ClientIDMode="Predictable/AutoID/Static" (ASP.NET 4.0+) 進一步控制。

4. 動態屬性條件輸出：避免輸出空屬性

string text = this.Text;
if (!string.IsNullOrEmpty(text))
{
    writer.AddAttribute(HtmlTextWriterAttribute.Value, text);
}
// 若 text 為空，完全不輸出 value 屬性，而非 value=""

• 符合 HTML 規範：布林屬性無值即為 true，字串屬性無輸出優於空字串。
• 減少回應大小，利於前端解析效能。
• 擴充：if (this.BorderWidth.IsEmpty) writer.AddStyleAttribute(...) 等同邏輯。

綜合範例：標準輸入控件渲染

protected override void Render(HtmlTextWriter writer)
{
    RenderInput(writer);
}
private void RenderInput(HtmlTextWriter writer)
{
    writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
    writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
    writer.AddAttribute(HtmlTextWriterAttribute.Name, UniqueID);
    string val = Text;
    if (!string.IsNullOrEmpty(val)) writer.AddAttribute(HtmlTextWriterAttribute.Value, val);
    if (!Enabled) writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled");
    writer.AddAttribute(HtmlTextWriterAttribute.Class, CssClass);
    writer.RenderBeginTag(HtmlTextWriterTag.Input);
    writer.RenderEndTag();
}

遵循這四大原則，你的控件輸出將符合標準、易於除錯、前端友善，並具備良好的擴充性。