---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

三、Produtcts的CRUD

1. 创建Product的Model
2. 创建ProductRepository

3.1 Products列表的展示页面（Read）

3.1.1 给Product的Model里添加Category的属性

1. 修改ProductRepository.cs里的获取所有products的方法，根据是否有CategoryId来判断，查询出有Id的产品的Category类

2. 修改，查询单个product的方法，同样根据是否有id，来查询

public static Product? GetProductById(int productId,bool loadCategory = false)
{
   
    var product = _products.FirstOrDefault(x => x.ProductId == productId);
    if (product != null)
    {
   
        var prod =  new Product
        {
   
            ProductId = product.ProductId,
            Name = product.Name,
            Quantity = product.Quantity,
            Price = product.Price,
            CategoryId = product.CategoryId
        };
        if (loadCategory && product.CategoryId.HasValue)
        {
   
            prod.Category = CategoriesRepository.GetCategoryById(product.CategoryId.Value);
        }
    }

    return null;
}

3.1.2 View视图里展示Product List

• 前端通过Product.Category.Name就可以获取Category 的Name属性

3.2 增加Product数据（Add）

• 在Add的页面里，我们需要展示所有Category的分类在下拉框里，所以这个页面里面需要两个类，分别是Product和Category

3.2.1 创建ViewModel用来组合多个Model

• 根目录下创建一个ViewModel的文件夹，并且创建ProductCategoryViewModel.cs ，并且给出默认值；

using WebApp.Models;

namespace WebApp.ViewModels
{
   
    public class ProductCategoryViewModel
    {
   
        public List<Category> Categories {
    get; set; } = new List<Category>();
        public Product Product {
    get; set; } = new Product();   
    }
}

3.2.2 在_ViewImposts里引入ViewModels

• 需要在_ViewImposts.cshtml里引入添加ViewModels，不然页面无法使用

@using WebApp;
@using WebApp.Models;
@using WebApp.ViewModels;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

3.2.3 添加Add的Action逻辑

• 在ProductsController.cs 里添加逻辑

1. Add的Get请求的Action
   
2. Add的Post请求的Action

3.2.4 添加Add的视图

• 引入ViewMoldes，该ViewModels，包含两个类Product和Category

@model ProductCategoryViewModel

• 添加下拉选项

3.3 编辑Product数据（Edit）

3.3.1 创建Edit的Get请求的Action

1. Product的Index页面，将ProductId传递给edit 的action

 <a class="btn btn-warning col-3 d-inline" asp-controller="products" asp-action="edit" /
 asp-route-id="@product.ProductId">Edit</a>

2. 创建Edit 的get请求的action

3.3.2 创建Edit的Post请求的Action

• 需要注意的是：Update的传参需要①通过product.CategoryId.Value获取可空类型的值，如果该值是空，则报错；②传递一个

[HttpPost]
public IActionResult Edit(ProductCategoryViewModel productCategoryViewModel)
{
   
    if (ModelState.IsValid)
    {
   
        ProductsRepository.UpdateProduct(productCategoryViewModel.Product.ProductId, productCategoryViewModel.Product);
        return RedirectToAction("Index");
    }

    productCategoryViewModel.Categories = CategoriesRepository.GetCategories();
    return View(productCategoryViewModel);
}

四、Cashier Console的实现

4.1创建Cashier的Index页面

4.1.1 创建ViewModel

• 在ViewModels文件夹下，创建SalesViewModel.cs，主要作用是，设置一个 用户传递选择的CategoryId和一个商品列表

using WebApp.Models;

namespace WebApp.ViewModels
{
   
    public class SalesViewModel
    {
   
        public int SelectedCategoryId {
    get; set; }
        public List<Category> Categories {
    get; set; } = new List<Category>();
    }
}

4.1.2 创建Index页面的商品类的Action

• 在SalesController.cs里面添加商品类别选择的Action，由于他只是展示一个下拉选项框，所以直接使用Get请求的Action;
• 从CategoiresRepository里读取到商品类别的列表，并且实例化，返回给视图

public IActionResult Index()
{
   
    var salesViewModel = new SalesViewModel
    {
   
        Categories = CategoriesRepository.GetCategories()
    };
    return View(salesViewModel);
}

4.1.3 创建Index的view视图页面

• 创建上面的页面的视图页面，展示下拉框，以及用占位
  将为完成的部分占位

4.2 创建Cashier Index页面里的product展示

• 由于Cashier index页面里有：
  1. 所有商品类别的下拉框
  2. 根据商品类别选择后的所有商品列表

所以，需要使用partial view分别或者试图，然后拼接在一起

• 效果展示：
  

4.2.1 product的controller里添加partial action用来分块展示商品

• 由于我们是需要从product的模型里读取商品的信息，所以partial view应该放入到ProductsController.cs里;
• 添加一个Action

1. 在ProductRepository里添加查询方法

• 在ProductsRepository.cs里，添加GetProductsByCategory（）方法，用来根据CategortId 查询出来所有的商品

 public static List<Product> GetProductsByCategory(int categoryId)
 {
   
     var products = _products.Where(x => x.CategoryId == categoryId).ToList();
     if (products != null)
     {
   
         return products;
     }
     else
     {
   
         return new List<Product>();
     }
 }

4.2.2 在Product的视图里添加商品表格的视图

• 只是一个商品表格展示的视图，在Product的视图里添加_ProductTble.cshtml，该视图只是整个页面的一个组件

@model List<Product>

@if(Model !=null && Model.Count > 0)
{
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th