ASP.NET Web Pages - 幫助器完整生態系統：核心元件分類、安裝管理、自訂開發與現代化遷移

ASP.NET 幫助器將複雜功能封裝為簡潔的 Razor API，大幅簡化 Web 開發常見工作。本文系統性介紹核心幫助器分類、安裝機制、自訂開發模式與現代替代方案。

核心內建幫助器分類速覽

第三方擴充幫助器：社交、分析、雲端服務整合

幫助器安裝與管理機制

WebMatrix 時代：Web Pages Administration

1. 開啟 WebMatrix → Site 工作區**
2. 點擊 Web Pages Administration**
3. 設定管理密碼 (首次使用)
4. 搜尋關鍵字 (如 "Facebook", "Chart", "Mvc")
5. 點擊 Install** 自動下載 NuGet 套件至 bin/ 與 App_Data/

現代專案：NuGet Package Manager

# Visual Studio Package Manager Console
Install-Package Microsoft.AspNet.WebPages.Helpers

# 或 .NET CLI
dotnet add package Microsoft.AspNet.WebPages.Helpers

# 個別功能套件
Install-Package Microsoft.Web.Helpers  # 含 Facebook, Twitter, ReCaptcha 等

自訂幫助器開發：封裝可重用 UI 邏輯

建立 .cshtml 幫助器檔案 (App_Code/Helpers/ 或 ~/Helpers/)

@* File: ~/Helpers/HtmlHelpers.cshtml *@
@helper RenderBootstrapAlert(string message, string type = "info") {
 <div class="alert alert-@type alert-dismissible fade show" role="alert">
 @message
 <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
 </div>
}

@helper Pager(int currentPage, int totalPages, string baseUrl, int window = 2) {
 if (totalPages <= 1) { return; }
 <nav aria-label="Page navigation">
 <ul class="pagination">
 @for (var i = Math.Max(1, currentPage - window); i <= Math.Min(totalPages, currentPage + window); i++) {
 var active = (i == currentPage) ? "active" : "";
 <li class="page-item @active">
 <a class="page-link" href="@(baseUrl.Replace("{page}", i.ToString()))">@i</a>
 </li>
 }
 </ul>
 </nav>
}

在頁面中使用自訂幫助器

@HtmlHelpers.RenderBootstrapAlert("儲存成功！", "success")

@HtmlHelpers.Pager(currentPage: 3, totalPages: 15, baseUrl: "~/Products?page={page}")

進階：強型別幫助器 (C# 類別庫)

// HtmlHelpers.cs
public static class HtmlHelpers {
 public static IHtmlString BootstrapAlert(this HtmlHelper html, string message, string type = "info") {
 var tag = new TagBuilder("div");
 tag.AddCssClass($"alert alert-{type} alert-dismissible fade show");
 tag.Attributes["role"] = "alert";
 tag.InnerHtml = message + "";
 return MvcHtmlString.Create(tag.ToString());
 }
}

WebImage 幫助器深度應用：上傳處理管線

@{
 if (IsPost) {
 var image = WebImage.GetImageFromRequest();
 if (image != null) {
 // 驗證
 var allowedTypes = new[] { "jpg", "jpeg", "png", "gif" };
 if (!allowedTypes.Contains(image.ImageFormat.ToLower())) {
 ModelState.AddError("image", "僅支援 JPG/PNG/GIF 格式");
 } else if (image.Width > 4000 || image.Height > 4000) {
 ModelState.AddError("image", "圖片尺寸過大");
 } else {
 // 處理管線
 image.Resize(1200, 1200, preserveAspectRatio: true, preventEnlarge: true);
 image.AddTextWatermark("© MySite.com", fontColor: "White", opacity: 0.5, fontSize: 24);
 var fileName = Guid.NewGuid() + "." + image.ImageFormat;
 var savePath = Server.MapPath("~/Uploads/" + fileName);
 image.Save(savePath);
 // 儲存資料庫記錄...
 }
 }
}
}
<form method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" />
<button type="submit">上傳</button>
</form>

遷移指引：ASP.NET Core / 現代架構對應方案

核心理念轉變：伺服器端渲染幫助器 → 前端元件 + 後端 API**，分離關注點、提升可測試性、支援 SPA/PWA 架構。