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

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

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

商品列表功能说明

一般首页主要用于呈现给客户最想看到的商品,如:销量最高,降价促销,季度新品等,如果客户想要的商品在首页并没有展示,就需要用户搜索商品的关键词来查找,或者通过商品类型来缩小范围,这时候就会需要用到商品列表功能。

商品列表主要用于搜索商品结果的展示,或者某一种商品类型商品的展示,呈现方式有两种:网格形式或者列表形式,用户可以在两种形式之间自由切换。

商品列表设计

根据功能分析,商品列表主要展示商品信息,有网格形式和列表形式两种。整体页面如下所示:

商品列表功能开发

商品列表主要展示商品信息,关于商品表EB_Product和对应模型Product的创建,可参考前一篇文章。

1. 数据处理层DAL

首先商品列表主要有两个来源,1.点击商品类型跳转商品列表 2. 关键字搜索进入商品列表。所以在检索时需要满足两个条件。DAL【Data Access Layer】层处理如下所示:

1. using EasyBuyShop.Models;
2. using EasyBuyShop.Utils;
3. 
4. namespace EasyBuyShop.DAL
5. {
6. public class ProductDal:BaseDal
7.     {
8. public List<Product> GetProductList(int categoryId,int subCategoryId,string productName)
9.         {
10. try
11.             {
12. using (var db = this.GetDb(BaseDal.ConnStr))
13.                 {
14. if(categoryId>0 && subCategoryId > 0)
15.                     {
16. return db.Queryable<Product>().Where(r=>r.CategoryId==categoryId && r.SubCategoryId==subCategoryId).ToList();
17.                     }
18. else
19.                     {
20. return db.Queryable<Product>().Where(r => r.Name.Contains(productName)).ToList();
21.                     }
22.                 }
23.             }
24. catch (Exception ex)
25.             {
26.                 LogHelper.Fatal(ex.Message);
27. return new List<Product>();
28.             }
29.         }
30.     }
31. }

 

2. 控制器获取

在控制器ProductController的Index方法中,以接收到的参数为条件,获取符合条件的商品列表,传递到视图层,如下所示:

1. public IActionResult Index(int categoryId,int subCategoryId,string productName)
2. {
3. var username = HttpContext.Session.GetString("username");
4. var realName = HttpContext.Session.GetString("realname");
5.     ViewBag.Username = username;
6.     ViewBag.RealName = realName;
7.     ProductDal productDal = new ProductDal();
8. var productList= productDal.GetProductList(categoryId, subCategoryId, productName);
9.     ViewData["ProductList"]= productList;
10. return View();
11. }

 

同样在本示例中,以ViewData来传递数据。个人建议:对于简单类型,可采用ViewBag进行传递;对于复杂类型,或视图中需要明确类型的,可采用ViewData进行传递。

3. 视图层展示

在视图Views\Product\Index.cshtml页面中,对控制器方法传递的数据进行解析组合展示。如下所示:

1. @{
2.     ViewData["Title"] = "商品列表";
3. }
4. <div class="shop-page-area ptb-100">
5. <div class="container" style="width:100%;padding-left:0px;padding-right:0px;">
6. <div class="row">
7. <div class="col-md-9">
8. <div class="blog-wrapper shop-page-mrg">
9. <div class="tab-menu-product">
10. <div class="tab-menu-sort">
11. <div class="tab-menu">
12. <ul role="tablist">
13. <li class="active" id="gridTab">
14. <a href="#grid" data-toggle="tab" onclick="javascript:showGrid();return false;">
15. <i class="fa fa-th-large"></i>
16.                                             网格
17. </a>
18. </li>
19. <li id="listTab">
20. <a href="#list" data-toggle="tab" onclick="javascript:showList();return false;">
21. <i class="fa fa-align-justify"></i>
22.                                             列表
23. </a>
24. </li>
25. </ul>
26. </div>
27. <div class="tab-sort">
28. <label>排序 : </label>
29. <select>
30. <option value="">位置</option>
31. <option value="">流行度</option>
32. <option value="">价格</option>
33. <option value="">评分</option>
34. </select>
35. </div>
36. </div>
37. <div class="tab-product">
38. <div class="tab-content">
39. <div class="tab-pane active" id="grid">
40. <div class="row">
41.                                         @{
42.                                             var products = ViewData["ProductList"] as List<Product>;
43.                                             if(products!=null && products.Count > 0)
44.                                             {
45.                                                 foreach (var product in products)
46.                                                 {
47. <div class="col-md-6 col-lg-4 col-sm-6">
48. <div class="single-shop mb-40">
49. <div class="shop-img">
50. <a href="#"><img src="@product.ImageUrl" alt=""></a>
51. <div class="shop-quick-view">
52. <a href="/Product/Detail/@product.Id" data-toggle="modal" data-target="#quick-view" title="预览">
53. <i class="pe-7s-look"></i>
54. </a>
55. </div>
56. <div class="button-group">
57. <a href="#" title="添加购物车" onclick="javascript:addCart(@(product.Id));return false;">
58. <i class="pe-7s-cart"></i>
59.                                                                         添加购物车
60. </a>
61. <a class="wishlist" href="#" title="立即购买" onclick="javascript:buy(@(product.Id));return false;">
62. <i class="pe-7s-like"></i>
63.                                                                         立即购买
64. </a>
65. </div>
66. </div>
67. <div class="shop-text-all">
68. <div class="title-color fix">
69. <div class="shop-title f-left">
70. <h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
71. </div>
72. <span class="price f-right">
73. <span class="new">$@product.PreferentialPrice</span>
74. </span>
75. </div>
76. <div class="fix">
77. <span class="f-left">@(product.BasicStyle) | @(product.ProductStyle)</span>
78. </div>
79. </div>
80. </div>
81. </div>
82.                                                 }
83.                                             }
84.                                             else
85.                                             {
86. <div>没有符合条件的商品</div>
87.                                             }
88.                                         }
89. </div>
90. </div>
91. <div class="tab-pane mb-10" id="list">
92. <div class="row">
93. <div class="col-md-12">
94. <div class="row">
95.                                                 @{
96.                                                     if (products != null && products.Count > 0)
97.                                                     {
98.                                                         foreach (var product in products)
99.                                                         {
100. <div class="single-shop mb-40">
101. <div class="col-md-4 col-sm-4 col-xs-12">
102. <div class="shop-list-left">
103. <div class="shop-img">
104. <a href="#"><img src="@product.ImageUrl" alt=""></a>
105. <div class="shop-quick-view">
106. <a href="#" data-toggle="modal" data-target="#quick-view" title="预览">
107. <i class="pe-7s-look"></i>
108. </a>
109. </div>
110. <div class="price-up-down">
111. <span class="sale-new"> @(Math.Round(product.Preferential * 100, 0))% </span>
112. </div>
113. </div>
114. </div>
115. </div>
116. <div class="col-md-8 col-sm-8 col-xs-12">
117. <div class="shop-list-right">
118. <div class="shop-list-all">
119. <div class="shop-list-name">
120. <h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
121. </div>
122. <div class="shop-list-rating">
123. <span class="ratting">
124. <i class="fa fa-star active"></i>
125. <i class="fa fa-star active"></i>
126. <i class="fa fa-star active"></i>
127. <i class="fa fa-star active"></i>
128. <i class="fa fa-star active"></i>
129. </span>
130. </div>
131. <div class="shop-list-price">
132. <span class="list-price">
133. <span class="new">$@product.PreferentialPrice</span>
134. <span class="old">$@product.Price</span>
135. </span>
136. </div>
137. <div class="shop-list-cart">
138. <div class="shop-group">
139. <a href="#" title="加入购物车" onclick="javascript:addCart(@(product.Id));return false;">
140. <i class="pe-7s-cart"></i>
141.                                                                                         加入购物车
142. </a>
143. <a class="wishlist" href="#" title="立即购买" onclick="javascript:buy(@(product.Id));return false;">
144. <i class="pe-7s-like"></i>
145.                                                                                         立即购买
146. </a>
147. </div>
148. </div>
149. </div>
150. </div>
151. </div>
152. </div>
153.                                                         }
154.                                                     }
155.                                                     else
156.                                                     {
157. <div>没有符合条件的商品</div>
158.                                                     }
159.                                                 }
160. </div>
161. </div>
162. </div>
163. </div>
164. <div class="page-pagination text-center" style="margin-top:10px;">
165. <ul>
166.                                         @{
167.                                             var totalNum =Math.Ceiling(products.Count / 40.0f);
168.                                             var currentNum = 1;
169.                                             for(int i = 1; i <= totalNum; i++)
170.                                             {
171. <li><a class="@(i == currentNum?"active":string.Empty)" href="#">@i</a></li>
172.                                             }
173.                                         }
174. <li><a href="#"><i class="fa fa-angle-double-right">»</i></a></li>
175. </ul>
176. </div>
177. </div>
178. </div>
179. </div>
180. </div>
181. </div>
182. </div>
183. </div>
184. </div>
185. <script src="~/js/plugins.js"></script>
186. <script src="~/js/shop.js"></script>

 

运行测试

运行页面,点击商品类型,跳转到商品列表,效果如下所示:

UI设计说明

在本示例中,其实后端业务逻辑并不是很复杂,主要是前端UI相对比较麻烦,如布局,展示,定位等相关内容。如果没有对应方面的知识储备,建议先找相资料进行学习。

关于CSS中display属性以及说明如下所示:

关于CSS中的Position属性说明如下所示:

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

相关文章
|
7月前
|
安全 数据管理 中间件
云LIS系统源码JavaScript+B/S架构MVC+SQLSugar医院版检验科云LIS系统源码 可提供演示
检验科云LIS系统源码是医疗机构信息化发展的重要趋势。通过云计算技术实现数据的集中管理和共享可以提高数据利用效率和安全性;通过高效灵活的系统设计和可扩展性可以满足不同医疗机构的需求;通过移动性和智能化可以提高医疗服务的精准度和效率;通过集成性可以实现医疗服务的协同性和效率。因此,多医院版检验科云LIS系统源码将成为未来医疗机构信息化发展的重要方向之一。
96 2
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
50 7
|
4月前
|
供应链 前端开发 Java
服装库存管理系统 Mybatis+Layui+MVC+JSP【完整功能介绍+实现详情+源码】
该博客文章介绍了一个使用Mybatis、Layui、MVC和JSP技术栈开发的服装库存管理系统,包括注册登录、权限管理、用户和货号管理、库存管理等功能,并提供了源码下载链接。
服装库存管理系统 Mybatis+Layui+MVC+JSP【完整功能介绍+实现详情+源码】
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
79 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
57 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
4月前
|
开发框架 NoSQL .NET
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
|
6月前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
84 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
4月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
148 0
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
87 0