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

太阳下的蒲公英

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

 
商品详情功能说明

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

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

 
商品详情页面功能开发

 
商品详情主要展示商品信息和商品配置信息。
 
1. 数据表创建

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

创建表的语句，如下所示：

1. CREATE TABLE [dbo].[EB_ProductConfig](
2.         [Id] [bigint] IDENTITY(1,1) NOT NULL,
3.         [ProductId] [bigint] NULL,
4.         [ConfigType] [varchar](50) NULL,
5.         [ConfigName] [varchar](50) NULL,
6.         [ConfigValue] [varchar](150) NULL,
7.         [CreateTime] [datetime] NULL,
8.         [CreateUser] [varchar](50) NULL,
9.         [LastEditTime] [datetime] NULL,
10.         [LastEditUser] [varchar](50) NULL
11. ) ON [PRIMARY]

复制代码

 
2. 商品配置实体创建

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

1. namespace EasyBuyShop.Models
2. {
3.     /// <summary>
4.     /// 产品配置，主要配置颜色，大小，缩略图路径等
5.     /// </summary>
6.     [SqlSugar.SugarTable("EB_ProductConfig")]
7.     public class ProductConfig : EntityModel
8.     {
9.         public long ProductId { get; set; }
11.         public string ConfigType { get; set; }
13.         public string ConfigName { get; set; }
15.         public string ConfigValue { get; set; }
16.     }
17. }

复制代码

 
3. 数据处理层DAL

 
商品详情页面主要根据商品ID获取商品的详细信息以及商品配置信息，如下所示：
商品详细信息在ProductDal中，如下所示：

1. public Product GetProduct(long Id)
2. {
3.     try
4.     {
5.         using (var db = this.GetDb(BaseDal.ConnStr))
6.         {
7.             return db.Queryable<Product>().First(r=>r.Id==Id);
8.         }
9.     }
10.     catch (Exception ex)
11.     {
12.         LogHelper.Fatal(ex.Message);
13.         return null;
14.     }
15. }

复制代码

商品配置信息在ProductConfigDal中，获取配置信息如下所示：

1. using EasyBuyShop.Models;
2. using EasyBuyShop.Utils;
4. namespace EasyBuyShop.DAL
5. {
6.     public class ProductConfigDal : BaseDal
7.     {
8.         public ProductConfigDal()
9.         {
10.            
11.         }
13.         /// <summary>
14.         /// 获取产品配置
15.         /// </summary>
16.         /// <param name="productId"></param>
17.         /// <returns></returns>
18.         public List<ProductConfig> GetProductConfigListById(long productId)
19.         {
20.             try
21.             {
22.                 using (var db = this.GetDb(BaseDal.ConnStr))
23.                 {
24.                     return db.Queryable<ProductConfig>().Where(r => r.ProductId == productId).ToList();
25.                 }
26.             }
27.             catch (Exception ex)
28.             {
29.                 LogHelper.Fatal(ex.Message);
30.                 return new List<ProductConfig>();
31.             }
32.         }
33.     }
34. }

复制代码

 
4. 控制器获取

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

1. public IActionResult Detail(int Id)
2. {
3.     var username = HttpContext.Session.GetString("username");
4.     var realName = HttpContext.Session.GetString("realname");
5.     ViewData["Username"] = username;
6.     ViewData["RealName"] = realName;
7.     ProductDal productDal = new ProductDal();
8.     ProductConfigDal productConfigDal = new ProductConfigDal();
9.     var product = productDal.GetProduct(Id);
10.     var productConfigList = productConfigDal.GetProductConfigListById(Id);
11.     ViewData["ProductConfigList"]=productConfigList;
12.     ViewData["Product"] = product;
13.     return View();
14. }

复制代码

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

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

1. @{
2.     ViewData["Title"] = "商品详情";
3. }
4. @{
5.     var product = ViewData["Product"] as Product;
6.     var productConfigList = ViewData["ProductConfigList"] as List<ProductConfig>;
7. }
9.     <form method="post" id="detailForm">
10.         <input type="hidden" name="productId" value="@(product.Id)" />
11.         <input type="hidden" name="color" id="color" value="" />
12.         <input type="hidden" name="size" id="size" value="" />
13.         
14.         
15.             
16.                
17.                     
18.                         
19.                            
20.                                 
21.                                     
22.                                        
23.                                             
24.                                                 
25.                                                     @{
26.                                                         var productConfigImages = productConfigList.Where(r => r.ConfigType == "Image").ToList();
27.                                                         for (int i = 0; i < productConfigImages.Count; i++)
28.                                                         {
29.                                                             var productConfigImage = productConfigImages[i];
30.                                                             
31.                                                                 <img src="https://www.cnblogs.com/@(productConfigImage.ConfigValue)" alt="">
32.                                                             
33.                                                         }
34.                                                     }
35.                                                 
36.                                                 
37.                                                    
38.                                                         <ul >
39.                                                             @{
40.                                                                 for (int i = 0; i < productConfigImages.Count; i++)
41.                                                                 {
42.                                                                     var productConfigImage = productConfigImages[i];
43.                                                                     <li><a data-toggle="tab" target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:tabProductImage('sin-pro-@(i)',this);"> <img src="https://www.cnblogs.com/@(productConfigImage.ConfigName)" alt="quick view" > </a></li>
44.                                                                 }
45.                                                             }
46.                                                         </ul>
47.                                                    
48.                                                 
49.                                             
50.                                        
51.                                        
52.                                             
53.                                                 
54.                                                     <h3><strong>@product.Name</strong></h3>
55.                                                    
56.                                                         <i ></i>
57.                                                         <i ></i>
58.                                                         <i ></i>
59.                                                         <i ></i>
60.                                                         <i ></i>
61.                                                    
62.                                                    
63.                                                         <h4>$@product.PreferentialPrice</h4>
64.                                                    
65.                                                     <p>@product.Description</p>
66.                                                    
67.                                                         
68.                                                             
69.                                                                 <ul>
70.                                                                     <li>是否现货<strong>:</strong> 现货</li>
71.                                                                     <li>是否新品<strong>:</strong> 新品</li>
72.                                                                     <li>
73.                                                                         商品类型<strong>:</strong>
74.                                                                         <a target="_blank" href="https://www.cnblogs.com/">@product.BasicStyle</a>
75.                                                                         <a target="_blank" href="https://www.cnblogs.com/">@product.ProductStyle</a>
76.                                                                     </li>
77.                                                                 </ul>
78.                                                             
79.                                                         
80.                                                    
81.                                                    
82.                                                         
83.                                                             
84.                                                                 <ul>
85.                                                                     <li>
86.                                                                         颜色分类<strong>:</strong>
87.                                                                         
88.                                                                             @{
89.                                                                                 var productColors = productConfigList.Where(r => r.ConfigType == "Color").ToList();
90.                                                                                 for (int i = 0; i < productColors.Count; i++)
91.                                                                                 {
92.                                                                                     @(productColors[i].ConfigValue)
93.                                                                                 }
94.                                                                             }
95.                                                                         
96.                                                                     </li>
97.                                                                     <li>
98.                                                                         大小<strong>:</strong>
99.                                                                         
100.                                                                             @{
101.                                                                                 var productSizes = productConfigList.Where(r => r.ConfigType == "Size").ToList();
102.                                                                                 for (int i = 0; i < productSizes.Count; i++)
103.                                                                                 {
104.                                                                                     @(productSizes[i].ConfigValue)
105.                                                                                 }
106.                                                                             }
107.                                                                         
108.                                                                     </li>
109.                                                                     <li>
110.                                                                         标签<strong>:</strong>
111.                                                                         <a target="_blank" href="https://www.cnblogs.com/">@product.BasicStyle</a>
112.                                                                         <a target="_blank" href="https://www.cnblogs.com/">@product.ProductStyle</a>
113.                                                                     </li>
114.                                                                 </ul>
115.                                                             
116.                                                         
117.                                                    
118.                                                    
119.                                                         
120.                                                             
121.                                                                
122.                                                                     <ul>
123.                                                                         <li >
124.                                                                             数量
125.                                                                             <input  name="quantity" maxlength="12" value="1" title="数量" type="text">
126.                                                                         </li>
127.                                                                     </ul>
128.                                                                
129.                                                             
130.                                                             
131.                                                                
132.                                                                     <a target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:addCartByForm();">加入购物车</a>
133.                                                                
134.                                                                
135.                                                                     <a target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:addPurchaseByForm();">立即购买</a>
136.                                                                
137.                                                             
138.                                                         
139.                                                    
140.                                                 
141.                                             
142.                                        
143.                                     
144.                                 
145.                            
146.                         
147.                     
148.                
149.             
150.         
151.         
152.     </form>

复制代码

 
商品详情页面展示

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

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

来源:https://www.cnblogs.com/hsiang/archive/2023/07/31/17592418.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！