经过一段时间的准备，新的一期【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开发实战之商城系统第三部分内容。后续将继续介绍其他模块。
