📅 Day 6：后臺管理系統開發（Admin Panel）

? 今日目標：

• 創建管理員頁面布局
• 實現商品管理（CRUD）
• 實現訂單管理（查看、狀態變更）
• 添加權限控制（僅管理員可訪問）
• 提交 Git 版本記錄進度

---

🧩 功能概覽

頁面	功能
/Admin/Dashboard.cshtml	后臺首頁儀表盤
/Admin/Products/Index.cshtml	商品列表
/Admin/Products/Create.cshtml	添加商品
/Admin/Products/Edit.cshtml	編輯商品
/Admin/Products/Delete.cshtml	刪除商品
/Admin/Orders/Index.cshtml	訂單管理（查看、修改狀態）

---

🛠? 知識點預覽

技術	內容
身份驗證	使用 [Authorize(Roles = "Admin")] 控制訪問權限
數據模型	復用 Product, Order, OrderItem 模型
CRUD 操作	使用 Razor Pages 實現創建、讀取、更新、刪除
UI 設計	使用 Bootstrap 構建簡潔的后臺界面
分頁支持	可選實現分頁功能

---

🔐 第一步：添加管理員授權檢查

在所有 Admin 頁面模型中添加：

[Authorize(Roles = "Admin")]
public class IndexModel : PageModel
{// ...
}

并在 _Layout.cshtml 中添加后臺導航鏈接：

@if (User.IsInRole("Admin"))
{<li class="nav-item"><a class="nav-link" href="/Admin/Dashboard">后臺管理</a></li>
}

---

🧱 第二步：創建 Admin 頁面結構

創建以下文件夾和頁面結構：

/Pages/Admin/
├── Dashboard.cshtml
├── Products/
│   ├── Index.cshtml
│   ├── Create.cshtml
│   ├── Edit.cshtml
│   └── Delete.cshtml
└── Orders/├── Index.cshtml└── Details.cshtml

---

📦 第三步：實現商品管理（CRUD）

? Product Index 頁面（列出所有商品）

Index.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class IndexModel : PageModel{private readonly ApplicationDbContext _context;public IndexModel(ApplicationDbContext context){_context = context;}public IList<Product> Products { get; set; } = new List<Product>();public void OnGet(){Products = _context.Products.ToList();}}
}

Index.cshtml

@page
@model ECommercePlatform.Pages.Admin.Products.IndexModel<h2>商品管理</h2><a asp-page="/Admin/Products/Create" class="btn btn-primary mb-3">添加新商品</a><table class="table table-bordered"><thead><tr><th>名稱</th><th>價格</th><th>庫存</th><th>操作</th></tr></thead><tbody>@foreach (var product in Model.Products){<tr><td>@product.Name</td><td>$@product.Price</td><td>@product.Stock</td><td><a asp-page="/Admin/Products/Edit" asp-route-id="@product.Id" class="btn btn-warning btn-sm">編輯</a><a asp-page="/Admin/Products/Delete" asp-route-id="@product.Id" class="btn btn-danger btn-sm">刪除</a></td></tr>}</tbody>
</table>

---

? Product Create 頁面（添加商品）

Create.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class CreateModel : PageModel{private readonly ApplicationDbContext _context;public CreateModel(ApplicationDbContext context){_context = context;}[BindProperty]public Product Product { get; set; } = new();public IActionResult OnPost(){if (!ModelState.IsValid){return Page();}_context.Products.Add(Product);_context.SaveChanges();return RedirectToPage("/Admin/Products/Index");}}
}

Create.cshtml

@page
@model ECommercePlatform.Pages.Admin.Products.CreateModel<h2>添加新商品</h2><form method="post"><div class="form-group"><label>名稱</label><input asp-for="Product.Name" class="form-control" /></div><div class="form-group"><label>價格</label><input asp-for="Product.Price" class="form-control" /></div><div class="form-group"><label>庫存</label><input asp-for="Product.Stock" class="form-control" /></div><div class="form-group"><label>圖片地址</label><input asp-for="Product.ImageUrl" class="form-control" /></div><button type="submit" class="btn btn-success mt-2">提交</button>
</form>

---

? Product Edit 頁面（編輯商品）

Edit.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class EditModel : PageModel{private readonly ApplicationDbContext _context;public EditModel(ApplicationDbContext context){_context = context;}[BindProperty]public Product Product { get; set; } = new();public IActionResult OnGet(int id){var product = _context.Products.Find(id);if (product == null) return NotFound();Product = product;return Page();}public IActionResult OnPost(){if (!ModelState.IsValid){return Page();}_context.Products.Update(Product);_context.SaveChanges();return RedirectToPage("/Admin/Products/Index");}}
}

Edit.cshtml

@page
@model ECommercePlatform.Pages.Admin.Products.EditModel<h2>編輯商品</h2><form method="post"><input type="hidden" asp-for="Product.Id" /><div class="form-group"><label>名稱</label><input asp-for="Product.Name" class="form-control" /></div><div class="form-group"><label>價格</label><input asp-for="Product.Price" class="form-control" /></div><div class="form-group"><label>庫存</label><input asp-for="Product.Stock" class="form-control" /></div><div class="form-group"><label>圖片地址</label><input asp-for="Product.ImageUrl" class="form-control" /></div><button type="submit" class="btn btn-success mt-2">保存</button>
</form>

---

? Product Delete 頁面（刪除商品）

Delete.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class DeleteModel : PageModel{private readonly ApplicationDbContext _context;public DeleteModel(ApplicationDbContext context){_context = context;}public Product? Product { get; set; }public IActionResult OnGet(int id){Product = _context.Products.Find(id);if (Product == null) return NotFound();return Page();}public IActionResult OnPost(int id){var product = _context.Products.Find(id);if (product != null){_context.Products.Remove(product);_context.SaveChanges();}return RedirectToPage("/Admin/Products/Index");}}
}

Delete.cshtml

@page
@model ECommercePlatform.Pages.Admin.Products.DeleteModel<h2>確認刪除?</h2>
<p>你確定要刪除商品：<strong>@Model.Product?.Name</strong>？</p><form method="post"><button type="submit" class="btn btn-danger">確認刪除</button><a asp-page="/Admin/Products/Index" class="btn btn-secondary">取消</a>
</form>

---

🧾 第四步：實現訂單管理（查看 + 修改狀態）

? Orders/Index.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Orders
{[Authorize(Roles = "Admin")]public class IndexModel : PageModel{private readonly ApplicationDbContext _context;public IndexModel(ApplicationDbContext context){_context = context;}public IList<Order> Orders { get; set; } = new List<Order>();public void OnGet(){Orders = _context.Orders.Include(o => o.Items).ToList();}}
}

Orders/Index.cshtml

@page
@model ECommercePlatform.Pages.Admin.Orders.IndexModel<h2>訂單管理</h2><table class="table table-bordered"><thead><tr><th>訂單號</th><th>用戶ID</th><th>總金額</th><th>狀態</th><th>操作</th></tr></thead><tbody>@foreach (var order in Model.Orders){<tr><td>@order.Id</td><td>@order.UserId</td><td>$@order.TotalAmount</td><td>@order.Status</td><td><a asp-page="/Admin/Orders/Details" asp-route-id="@order.Id" class="btn btn-info btn-sm">查看詳情</a></td></tr>}</tbody>
</table>

---

? Orders/Details.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Orders
{[Authorize(Roles = "Admin")]public class DetailsModel : PageModel{private readonly ApplicationDbContext _context;public DetailsModel(ApplicationDbContext context){_context = context;}public Order? Order { get; set; }public IActionResult OnGet(int id){Order = _context.Orders.Include(o => o.Items).FirstOrDefault(o => o.Id == id);if (Order == null) return NotFound();return Page();}public IActionResult OnPostUpdateStatus(int id, string status){var order = _context.Orders.Find(id);if (order != null){Enum.TryParse(status, out OrderStatus parsedStatus);order.Status = parsedStatus;_context.SaveChanges();}return RedirectToPage("/Admin/Orders/Details", new { id });}}
}

Orders/Details.cshtml

@page
@model ECommercePlatform.Pages.Admin.Orders.DetailsModel<h2>訂單詳情 - #@Model.Order?.Id</h2><p>用戶ID: @Model.Order?.UserId</p>
<p>日期: @Model.Order?.OrderDate</p>
<p>狀態:<form method="post" class="d-inline"><input type="hidden" name="id" value="@Model.Order?.Id" /><select name="status" asp-for="Order.Status" asp-items="Html.GetEnumSelectList<OrderStatus>()" onchange="this.form.submit()"></select></form>
</p><h4>商品列表：</h4>
<table class="table table-bordered"><thead><tr><th>商品名</th><th>單價</th><th>數量</th><th>總價</th></tr></thead><tbody>@foreach (var item in Model.Order?.Items ?? new()){<tr><td>@item.ProductName</td><td>$@item.Price</td><td>@item.Quantity</td><td>$@item.TotalPrice</td></tr>}</tbody>
</table>

---

📦 第五步：提交 Git 版本

git add .
git commit -m "Day6: Added admin panel with product management and order management"

---

📝 今日總結

今天你完成了：

? 創建后臺管理頁面（Dashboard + Products + Orders）
? 實現商品的增刪改查（CRUD）
? 實現訂單查看與狀態變更
? 添加管理員權限控制
? 提交版本控制記錄

---

📆 明日計劃（Day7）

我們將進入 部署準備與優化階段：

• 添加靜態資源（CSS/JS 圖片等）
• 優化頁面樣式與交互體驗
• 添加分頁功能（商品、訂單列表）
• 配置生產環境設置（appsettings.Production.json）
• 準備發布部署（dotnet publish）