[回馈]ASP.NET Core MVC开发实战之商城系统(四)

经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面等功能的开发,今天继续讲解商品详情功能开发,仅供学习分享使用,如有不足之处,还请指正。

[回馈]ASP.NET Core MVC开发实战之商城系统(四)_第1张图片

商品详情功能说明

首页和商品列表,都是只展示商品的主要信息,如商品名称,商品价格,类型等内容,让人有一个先入为主的商品概念,当用户对商品有兴趣时,可以点击链接跳转商品详情页面,查看商品更全面的信息,如:颜色,尺寸等内容。

商品详情功能设计

根据商品详情页面功能说明,在此页面,用户可以查看商品的具体内容,如:图片,颜色,大小,类型,标签以及加入购物车,立即购买等功能,具体页面设计如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(四)_第2张图片

商品详情页面功能开发

商品详情主要展示商品信息和商品配置信息。

1. 数据表创建

关于商品表EB_Product和对应模型Product的创建,可参考第二篇文章。商品配置表EB_ProductConfig,主要配置商品的特殊属性,如:颜色,尺寸,缩略图等内容,如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(四)_第3张图片

创建表的语句,如下所示:

CREATE TABLE [dbo].[EB_ProductConfig](
	[Id] [bigint] IDENTITY(1,1) NOT NULL,
	[ProductId] [bigint] NULL,
	[ConfigType] [varchar](50) NULL,
	[ConfigName] [varchar](50) NULL,
	[ConfigValue] [varchar](150) NULL,
	[CreateTime] [datetime] NULL,
	[CreateUser] [varchar](50) NULL,
	[LastEditTime] [datetime] NULL,
	[LastEditUser] [varchar](50) NULL
) ON [PRIMARY]

 

2. 商品配置实体创建

商品配置表对应的项目模型实体,和数据表一一对应,如下所示:

namespace EasyBuyShop.Models
{
    /// 
    /// 产品配置,主要配置颜色,大小,缩略图路径等
    /// 
    [SqlSugar.SugarTable("EB_ProductConfig")]
    public class ProductConfig : EntityModel
    {
        public long ProductId { get; set; }
 
        public string ConfigType { get; set; }
 
        public string ConfigName { get; set; }
 
        public string ConfigValue { get; set; }
    }
}

 

3. 数据处理层DAL

商品详情页面主要根据商品ID获取商品的详细信息以及商品配置信息,如下所示:

商品详细信息在ProductDal中,如下所示:

public Product GetProduct(long Id)
{
    try
    {
        using (var db = this.GetDb(BaseDal.ConnStr))
        {
            return db.Queryable().First(r=>r.Id==Id);
        }
    }
    catch (Exception ex)
    {
        LogHelper.Fatal(ex.Message);
        return null;
    }
}

 

商品配置信息在ProductConfigDal中,获取配置信息如下所示:

using EasyBuyShop.Models;
using EasyBuyShop.Utils;
 
namespace EasyBuyShop.DAL
{
    public class ProductConfigDal : BaseDal
    {
        public ProductConfigDal()
        {
           
        }
 
        /// 
        /// 获取产品配置
        /// 
        /// 
        /// 
        public List GetProductConfigListById(long productId)
        {
            try
            {
                using (var db = this.GetDb(BaseDal.ConnStr))
                {
                    return db.Queryable().Where(r => r.ProductId == productId).ToList();
                }
            }
            catch (Exception ex)
            {
                LogHelper.Fatal(ex.Message);
                return new List();
            }
        }
    }
}

 

4. 控制器获取

商品详细信息在ProductController的Detail方法中,根据传入的ID进行读取,如下所示:

public IActionResult Detail(int Id)
{
    var username = HttpContext.Session.GetString("username");
    var realName = HttpContext.Session.GetString("realname");
    ViewData["Username"] = username;
    ViewData["RealName"] = realName;
    ProductDal productDal = new ProductDal();
    ProductConfigDal productConfigDal = new ProductConfigDal();
    var product = productDal.GetProduct(Id);
    var productConfigList = productConfigDal.GetProductConfigListById(Id);
    ViewData["ProductConfigList"]=productConfigList;
    ViewData["Product"] = product;
    return View();
}

 

将获取到的Product对象和ProductConfigList列表对象通过ViewData传递到View视图层中进行展示。

5. 视图层展示

在Views/Product/Detail.cshtml中,接收控制器方法传递的数据,并进行展示。如下所示:

@{
    ViewData["Title"] = "商品详情";
}
@{
    var product = ViewData["Product"] as Product;
    var productConfigList = ViewData["ProductConfigList"] as List;
}

 

商品详情页面展示

运行程序,在首页或商品列表页面,点击商品链接,进入商品详情页面,如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(四)_第4张图片

以上就是ASP.NET Core MVC开发实战之商城系统第四部分内容,后续将继续介绍其他模块,敬请期待。

你可能感兴趣的:(.Net技术,全栈开发,asp.net,mvc,后端,microsoft,c#)