企业手机网站案例官网设计比较好看的网站

---

---

项目地址

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

• 代码仓库地址：

• 所用到的框架和插件：

三、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 {