跟着AI学习C#之项目实战-电商平台 Day2

📅 Day 2：商品展示页面开发（Product Listing & Detail）

✅ 今日目标：

• 创建商品列表页（支持分页、分类筛选）
• 创建商品详情页（显示价格、描述、图片）
• 使用 Markdown 渲染商品描述（可选）
• 提交 Git 版本记录进度

🛠️ 知识点预览

🧩 第一步：创建商品列表页（Products/Index）

✅ 添加 Razor Page

在 Pages/Products 文件夹中创建一个 Index.cshtml 和 Index.cshtml.cs 页面。

✅ Index.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Data;
using ECommercePlatform.Models;
using Microsoft.EntityFrameworkCore;

namespace ECommercePlatform.Pages.Products
{
    public class IndexModel : PageModel
    {
        private readonly ApplicationDbContext _context;

        public IndexModel(ApplicationDbContext context)
        {
            _context = context;
        }

        public IList<Product> Products { get; set; } = new List<Product>();
        public IList<Category> Categories { get; set; } = new List<Category>();
        [BindProperty(SupportsGet = true)]
        public int? CategoryId { get; set; }

        public async Task OnGetAsync()
        {
            IQueryable<Product> query = _context.Products
                .Include(p => p.Category);

            if (CategoryId.HasValue)
            {
                query = query.Where(p => p.CategoryId == CategoryId.Value);
            }

            Products = await query.ToListAsync();
            Categories = await _context.Categories.ToListAsync();
        }
    }
}

✅ Index.cshtml

@page
@model ECommercePlatform.Pages.Products.IndexModel

<h2>商品列表</h2>

<div class="row mb-3">
    <div class="col-md-4">
        <form method="get">
            <select name="CategoryId" asp-items="@(new SelectList(Model.Categories, "Id", "Name"))"
                    class="form-control" onchange="this.form.submit()">
                <option value="">全部分类</option>
            </select>
        </form>
    </div>
</div>

<div class="row">
    @foreach (var product in Model.Products)
    {
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@product.Name</h5>
                    <p class="card-text">@product.Description</p>
                    <p class="card-text text-danger">$@product.Price</p>
                    <a asp-page="/Products/Details" asp-route-id="@product.Id" class="btn btn-primary">查看详情</a>
                </div>
            </div>
        </div>
    }
</div>

🔍 第二步：创建商品详情页（Products/Details）

✅ 添加 Razor Page

在 Pages/Products 中添加 Details.cshtml 和 Details.cshtml.cs

✅ Details.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Data;
using ECommercePlatform.Models;
using Microsoft.EntityFrameworkCore;

namespace ECommercePlatform.Pages.Products
{
    public class DetailsModel : PageModel
    {
        private readonly ApplicationDbContext _context;

        public DetailsModel(ApplicationDbContext context)
        {
            _context = context;
        }

        public Product? Product { get; set; }

        public async Task<IActionResult> OnGetAsync(int id)
        {
            Product = await _context.Products
                .Include(p => p.Category)
                .FirstOrDefaultAsync(p => p.Id == id);

            if (Product == null)
            {
                return NotFound();
            }

            return Page();
        }
    }
}

✅ Details.cshtml

@page
@model ECommercePlatform.Pages.Products.DetailsModel

<h2>@Model.Product?.Name</h2>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">@Model.Product?.Category?.Name</h5>
        <p class="card-text">@Model.Product?.Description</p>
        <p class="card-text text-success">$@Model.Product?.Price</p>
        <a asp-page="/Cart/AddToCart" asp-route-id="@Model.Product?.Id" class="btn btn-warning">加入购物车</a>
    </div>
</div>

🖼️ 第三步：添加商品图片支持（可选）

你可以通过以下方式添加商品图片：

1. 在 Product 模型中添加字段：

   public string ImageUrl { get; set; } = "/images/default.jpg";
   

2. 修改 Details.cshtml 显示图片：

   <img src="@Model.Product.ImageUrl" class="img-fluid" alt="商品图片" />
   

3. 种子数据中添加示例图片链接，或上传到 /wwwroot/images/

🧪 第四步：可选：使用 Markdown 渲染商品描述

安装 Markdig：

dotnet add package Markdig

修改 Details.cshtml.cs 中的 OnGetAsync 方法：

using Markdig;

public string RenderedDescription { get; set; }

public async Task<IActionResult> OnGetAsync(int id)
{
    Product = await _context.Products
        .Include(p => p.Category)
        .FirstOrDefaultAsync(p => p.Id == id);

    if (Product == null) return NotFound();

    RenderedDescription = Markdown.ToHtml(Product.Description ?? "");

    return Page();
}

然后在 Details.cshtml 中渲染：

<div class="card-text">@Html.Raw(Model.RenderedDescription)</div>

📦 第五步：提交 Git 版本

git add .
git commit -m "Day2: Added product listing and detail pages with category filter"

📝 今日总结

今天你完成了：

✅ 创建商品列表页并支持分类筛选
✅ 创建商品详情页
✅ 添加 Markdown 商品描述渲染功能（可选）
✅ 提交版本控制记录

📆 明日计划（Day3）

我们将进入 用户系统整合阶段（Identity）：

• 注册、登录、注销功能
• 用户身份识别
• 角色管理（如 Admin）