【从实作学习ASP.NET Core】Day08 | 後台 | 新增商品类别

今天来处理昨天建立的 Category 商品类别模型
假如说商店有机会扩大经营的话，那商品类别势必会有所增减，所以我们不想把它写死，而是让管理者可以动态管理商品类别，既然如此就需要做一个能够管理商品类别的页面了。

新增类别

在OnlineShopContext.cs把 Category 的 DbSet 加进去，让 DBContext 可以对商品类别做资料库操作

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using OnlineShopCMS.Models;

namespace OnlineShopCMS.Data
{
    public class OnlineShopContext : DbContext
    {
        public OnlineShopContext (DbContextOptions<OnlineShopContext> options)
            : base(options)
        {
        }

        public DbSet<OnlineShopCMS.Models.Product> Product { get; set; }
        public DbSet<OnlineShopCMS.Models.Category> Category { get; set; }
    }
}

然後在ProductsController.cs 新增 CreateCategory() 动作并新增页面
跟新增商品一样的写法只是把对应的模型改为 Category：

public IActionResult CreateCategory()
{
    return View();
}

[HttpPost]
public async Task<IActionResult> CreateCategory(Category category)
{
    _context.Category.Add(category);
    await _context.SaveChangesAsync();
    return View();
}

访问https://localhost:44356/Products/CreateCategory

先新增4个类别：Nintendo Switch 主机、Nintendo Switch 游戏、PlayStaion 5 主机、PlayStaion 5 游戏 以便之後方便测试。

在商品的 Create 页面建立下拉式选单

建好了类别别忘了还要把商品绑定进去，接着要把类别选单加进商品的 Create 页面
在 ProductsController.cs 的 Create() 把类别选项用 ViewData 传进去

public IActionResult Create()
{
    ViewData["Categories"] = new SelectList(_context.Set<Category>(), "Id", "Name");
    return View();
}

接着把前端 Create.cshtml 页面上该有的栏位补一补

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>  //商品名称
        <input asp-for="Name" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Description" class="control-label"></label>  //简介
        <textarea asp-for="Description" class="form-control"></textarea>
    </div>
    <div class="form-group">
        <label asp-for="Content" class="control-label"></label>  //内容
        <textarea asp-for="Content" class="form-control"></textarea>
    </div>
    <div class="form-group">
        <label asp-for="Price" class="control-label"></label>  //单价
        <input asp-for="Price" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Stock" class="control-label"></label>  //库存
        <input asp-for="Stock" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Image" class="control-label"></label>  //图片
        <input type="file" class="form-control-file">
    </div>
    <div class="form-group">
        <label asp-for="CategoryId" class="control-label"></label>  //类别
        <select class="form-control" asp-for="CategoryId" asp-items="ViewBag.Categories"></select>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

注意一下类别选项是这样写的，用<select>来做选单

<div class="form-group">
    <label class="control-label">Category</label>
    <select class="form-control" asp-for="CategoryId" asp-items="ViewBag.Categories"></select>
</div>

简单排版後看一下成果，成功读到选单了

这麽一来在商品建立的时候，就会一并把类别绑定上去罗！