当前位置: 首页 > news >正文

MVC基础——市场管理系统(二)


文章目录

  • 项目地址
  • 三、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

  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>
  1. 创建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 {
http://www.lryc.cn/news/500482.html

相关文章:

  • java------------常用API preiod duration 计算时间差
  • 使用 FAISS 进行高效相似性搜索:从文本检索到动态数据处理
  • 执行“go mod tidy”遇到“misbehavior”错误
  • 深入详解人工智能机器学习:强化学习
  • 力扣打卡11:合并区间(比较器内联,引用传参的优化)
  • 《 bilibili-起步级 用户模块接口文档 经验分享 ~》
  • AES 与 SM4 加密算法:深度解析与对比
  • 启保停电路如何接到PLC
  • HTTP multipart/form-data 请求
  • 配置服务器的免密登录
  • 普通遥控电动遮阳雨棚怎么接入米家并用苹果手机Siri控制
  • 两种不同简缩极化的六个方程
  • 环形缓冲区(Ring Buffer):概念、功能、使用场景与实现
  • 大连理工大学数据结构2003年硕士入学试题
  • Master EDI 项目需求分析
  • 图海寻径——图相关算法的奇幻探索之旅
  • 亚马逊云科技re:Invent:生成式AI与全球布局
  • Android 因为混淆文件配置,打release包提示running R8问题处理
  • 20241209给Ubuntu20.04系统的的交换分区增加为20GB的步骤
  • Centos7环境下nifi单机部署
  • 如何通过轻易云实现金蝶云星空与旺店通数据集成
  • OSG开发笔记(三十七):OSG基于windows平台msvc2017x64编译器官方稳定版本OSG3.4.1搭建环境并移植Demo
  • 2024最新小猫咪PHP加密系统源码V1.4_本地API接口_带后台
  • K8S OOM killer机制
  • 什么是绩效文化?
  • 【人工智能-CV领域】对抗生成网络(GAN)与扩散模型全面解析与深度融合:实现AI生成能力的新突破
  • IT系统运维监控指标体系-持续完善中
  • RPC设计--TcpAcceptor
  • 《Python数据分析:活用pandas库》学习笔记Day1:Panda DataFrame基础知识
  • 【Go 基础】并发相关