[回馈]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;
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页面中，对控制器方法传递的数据进行解析组合展示。如下所示：
[code]@{    ViewData["Title"] = "商品列表";}                                                                                                                                                

                                    

•                                         网格                                    
  
•                                         列表                                
  

                                                                                        排序 :                                                                     位置                                    流行度                                    价格                                    评分                                                                                                                                                                                                                                                    @{                                            var products = ViewData["ProductList"] as List;                                            if(products!=null && products.Count > 0)                                            {                                                foreach (var product in products)                                                {                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                        添加购物车                                                                    立即购买                                                                                                                                                                                                                                                                                                                                                                                                    @product.Name

                                                                                                                                                                                                                $@product.PreferentialPrice                                                                                                                                                                                                                                                                        @(product.BasicStyle) | @(product.ProductStyle)                                                                                                                                                                                                                                                                                        }                                            }                                            else                                            {                                                没有符合条件的商品                                            }                                        }                                                                                                                                                                                                                                                                            @{                                                    if (products != null && products.Count > 0)                                                    {                                                        foreach (var product in products)                                                        {                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                     @(Math.Round(product.Preferential * 100, 0))%                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 @product.Name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        $@product.PreferentialPrice                                                                                    $@product.Price                                                                                                                                                                                                                                                                                                                                                                                                            加入购物车                                                                                    立即购买                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }                                                    }                                                    else                                                    {                                                        没有符合条件的商品                                                    }                                                }                                                                                                                                                                                                                            <ul>                                        @{                                            var totalNum =Math.Ceiling(products.Count / 40.0f);                                            var currentNum = 1;                                            for(int i = 1; i