ASP.NET Web Pages - C# 與 VB.NET 完整實戰範例分類導覽

透過分類完整的實戰範例掌握 Web Pages 開發精髓，涵蓋基礎語法、資料庫操作、圖表視覺化、表單處理、版面配置等核心場景。

範例分類總覽

核心範例深度解析

1. 基礎 Web Pages - 動態內容與版面重用

@* _Layout.cshtml *@
<!DOCTYPE html>
<html><head><title>@Page.Title</title></head><body>
@RenderPage("_Header.cshtml")
@RenderBody()
@RenderPage("_Footer.cshtml")
</body></html>

@* _Header.cshtml *@
<header><nav>...</nav></header>

@* Default.cshtml *@
@{ Layout = "~/_Layout.cshtml"; Page.Title = "首頁"; }
<h1>歡迎來到 Web Pages</h1>

2. 資料庫整合 - WebGrid 高效呈現

@{
 var db = Database.Open("SmallBakery");
 var grid = new WebGrid(db.Query("SELECT * FROM Products"), 
 defaultSort: "Name", rowsPerPage: 10);
}
@grid.GetHtml(
 columns: grid.Columns(
 grid.Column("Name", "產品名稱"),
 grid.Column("Price", "價格", format: @<text>@item.Price.ToString("C")</text>),
 grid.Column("Description", "說明")
 ),
 mode: WebGridPagerModes.All
)

3. Chart 圖表 - 多資料源視覺化

@* 陣列資料源 *@
var chart = new Chart(600, 400)
 .AddTitle("銷售統計")
 .AddSeries("Series1", chartType: "Column",
 xValue: new[] { "Q1", "Q2", "Q3", "Q4" },
 yValues: new[] { 120, 150, 180, 200 })
 .Write();

@* 資料庫資料源 *@
var dbData = db.Query("SELECT Category, SUM(Amount) AS Total FROM Sales GROUP BY Category");
var chart = new Chart(600, 400)
 .AddTitle("分類銷售")
 .DataBindTable(dbData, "Category")
 .Write();

4. 表單處理 - 驗證與 POST-Redirect-GET

@{
 Validation.RequireField("email", "Email 為必填");
 Validation.Add("email", Validator.Email("請輸入有效 Email"));
 
 if (IsPost && Validation.IsValid()) {
 var email = Request["email"];
 // 處理商業邏輯
 Response.Redirect("~/Success");
 }
}
<form method="post">
<label>Email:</label> <input name="email" value="@Request["email"]" />
@Html.ValidationMessage("email")
<button type="submit">送出</button>
</form>

學習路徑建議

1. 入門：基礎 Web Pages → 基礎 C#/VB 語法 → HTML 表單處理
2. 進階：資料庫操作 → WebGrid/Chart 幫助器 → 版面配置與區塊
3. 實戰：驗證框架 → 檔案上傳 → Email 發送 → 快取優化 → 部署發佈

每個範例皆提供完整原始碼、執行畫面截圖與逐行解說，建議下載範例專案於本地實際執行除錯，加深理解。