企业手机网站案例seo推广软件排行榜
文章目录
- 项目地址
- 三、Produtcts的CRUD
- 3.1 Products列表的展示页面(Read)
- 3.1.1 给Product的Model里添加Category的属性
- 3.1.2 View视图里展示Product List
- 3.2 增加Product数据(Add)
- 3.2.1 创建ViewModel用来组合多个Model
- 3.2.2 在_ViewImposts里引入ViewModels
- 3.2.3 添加Add的Action逻辑
- 3.2.4 添加Add的视图
- 3.3 编辑Product数据(Edit)
- 3.3.1 创建Edit的Get请求的Action
- 3.3.2 创建Edit的Post请求的Action
- 四、Cashier Console的实现
- 4.1创建Cashier的Index页面
- 4.1.1 创建ViewModel
- 4.1.2 创建Index页面的商品类的Action
- 4.1.3 创建Index的view视图页面
- 4.2 创建Cashier Index页面里的product展示
- 4.2.1 product的controller里添加partial action用来分块展示商品
- 1. 在ProductRepository里添加查询方法
- 4.2.2 在Product的视图里添加商品表格的视图
- 4.2.3 将上面的Partial View整合到Index页面里
- 1. 将jquery的脚本添加到Layout页面
- 2. 在Sales的Index视图里,使用jq引入product的partial view
- 4.3 展示详细的商品信息
- 4.3.1 点击商品Table实现行高亮
- 1. 给需要高亮的地方,添加一个类名
- 2. 静态文件里添加高亮样式
- 3. 添加jq方法,显示高亮
- 4.3.2 高亮之后,显示商品的详情
- 1.获取商品的id
- 2. 添加显示商品详请功能
- 4.4 Sales Fom implement
- 4.4.1 添加Sales Form的视图
- 1. 修改SalesViewModel
- 2. 创建form的视图
- 3. 只有选择商品后才显示表单
- 4. 自定义验证,验证输入数量是否大于库存
- 4.4.2 提交数量后,计算和出库并且展示最新信息
- 1. 添加Transaction的Model
- 2. 完善sell Action的功能
- 3. 创建ViewComponent
项目地址
- 教程作者:
- 教程地址:
- 代码仓库地址:
- 所用到的框架和插件:
三、Produtcts的CRUD
- 创建Product的Model
- 创建ProductRepository
3.1 Products列表的展示页面(Read)
3.1.1 给Product的Model里添加Category的属性
- 修改
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
里添加逻辑
- Add的Get请求的Action
- Add的Post请求的Action
3.2.4 添加Add的视图
- 引入ViewMoldes,该ViewModels,包含两个类Product和Category
@model ProductCategoryViewModel
- 添加下拉选项
3.3 编辑Product数据(Edit)
3.3.1 创建Edit的Get请求的Action
- 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>
- 创建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 {