使用自定義 ViewHelper 簡化 ASP.NET MVC View 開發（第二部分）

建立 HtmlText ViewHelper 的完整實作

承接上一篇，我們將深入探討如何建立一個功能完整的 HtmlText ViewHelper。這個 Helper 旨在封裝文字輸入框所需的所有 HTML 元素，包括標籤、輸入框本身、驗證訊息，並支援選擇性的 <li> 包裹與唯讀模式，極大地提升 View 頁面的程式碼重用性。

核心屬性設計

HtmlText 類別繼承自 AbstractHtmlViewObject，其建構函式接收請求上下文、名稱、標籤文字、值、驗證訊息、唯讀旗標、是否建立 <li> 以及額外的 HTML 屬性。以下是所有私有欄位與建構函式的完整程式碼：

private readonly string mLabelText;
private readonly bool mCreateLabel;
private readonly object mValue;
private readonly string mValidationMessage;
private readonly bool mCreateValidationMessage;
private readonly bool mCreateLi;
private readonly bool mReadonly;

public HtmlText(
    ViewRequestContext requestContext, string name, string labelText, object value,
    string validationMessage, bool @readonly, bool createLi, object attributes)
    : base(requestContext, name)
{
    mLabelText = labelText;
    mCreateLabel = !string.IsNullOrEmpty(mLabelText);
    mValidationMessage = validationMessage;
    mCreateValidationMessage = !string.IsNullOrEmpty(validationMessage);
    mCreateLi = createLi;
    mReadonly = @readonly;
    Attributes = attributes;

    object valueToAssign = value;
    if (valueToAssign == null)
    {
        // 嘗試從 ModelState 取得值
        valueToAssign = GetModelStateValue(name, typeof(string));
    }

    mValue = valueToAssign;
}

關鍵邏輯解析

• 標籤自動產生： 若 labelText 不為空，自動設定 mCreateLabel = true，並在輸出時渲染 <label for="...">。
• 驗證訊息整合： 同樣依據 validationMessage 決定是否輸出驗證標記，符合 Part 1 提到的五大設計標準。
• ModelState 回填： 當傳入值為 null 時，自動從 ModelState 讀取同名欄位的值，確保表單重新顯示時保留使用者輸入。
• 彈性包裝： mCreateLi 控制是否用 <li> 包裹整組元素，配合 CSS 設計師的命名慣例。
• 唯讀支援： mReadonly 直接對應 input 的 readonly 屬性。

在 View 中的使用範例

有了這個 Helper，View 頁面只需一行程式碼：

<% Html.NewText("FirstName", "First name"); %>

即可產出符合設計規範的完整 HTML 結構，開發者不再需要手寫重複的 <li>、<label>、Html.TextBox、Html.ValidationMessage 等樣板程式碼，也能確保團隊間的 HTML 風格一致。

下一步將展示如何擴充此架構以支援下拉選單、核取方塊等其他表單元素，敬請期待。