[回馈]ASP.NET Core MVC开发实战之商城系统(三)
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】等功能的开发，今天继续讲解商品列表页面功能开发，仅供学习分享使用，如有不足之处，还请指正。
![[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第1张图片](http://img.e-com-net.com/image/info8/fdca41164c564fe89261182f86a3ae49.jpg)
商品列表功能说明
一般首页主要用于呈现给客户最想看到的商品，如：销量最高，降价促销，季度新品等，如果客户想要的商品在首页并没有展示，就需要用户搜索商品的关键词来查找，或者通过商品类型来缩小范围，这时候就会需要用到商品列表功能。
商品列表主要用于搜索商品结果的展示，或者某一种商品类型商品的展示，呈现方式有两种：网格形式或者列表形式，用户可以在两种形式之间自由切换。
商品列表设计
根据功能分析，商品列表主要展示商品信息，有网格形式和列表形式两种。整体页面如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第2张图片](http://img.e-com-net.com/image/info8/8991d02240364ea3bd1fb3189c62963e.jpg)
商品列表功能开发
商品列表主要展示商品信息，关于商品表EB_Product和对应模型Product的创建，可参考前一篇文章。
1. 数据处理层DAL
首先商品列表主要有两个来源，1.点击商品类型跳转商品列表 2. 关键字搜索进入商品列表。所以在检索时需要满足两个条件。DAL【Data Access Layer】层处理如下所示：
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class ProductDal:BaseDal
{
public List GetProductList(int categoryId,int subCategoryId,string productName)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
if(categoryId>0 && subCategoryId > 0)
{
return db.Queryable().Where(r=>r.CategoryId==categoryId && r.SubCategoryId==subCategoryId).ToList();
}
else
{
return db.Queryable().Where(r => r.Name.Contains(productName)).ToList();
}
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List();
}
}
}
}
2. 控制器获取
在控制器ProductController的Index方法中，以接收到的参数为条件，获取符合条件的商品列表，传递到视图层，如下所示：
public IActionResult Index(int categoryId,int subCategoryId,string productName)
{
var username = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
ViewBag.Username = username;
ViewBag.RealName = realName;
ProductDal productDal = new ProductDal();
var productList= productDal.GetProductList(categoryId, subCategoryId, productName);
ViewData["ProductList"]= productList;
return View();
}
同样在本示例中，以ViewData来传递数据。个人建议：对于简单类型，可采用ViewBag进行传递；对于复杂类型，或视图中需要明确类型的，可采用ViewData进行传递。
3. 视图层展示
在视图Views\Product\Index.cshtml页面中，对控制器方法传递的数据进行解析组合展示。如下所示：
@{
ViewData["Title"] = "商品列表";
}
@{
var products = ViewData["ProductList"] as List;
if(products!=null && products.Count > 0)
{
foreach (var product in products)
{
@(product.BasicStyle) | @(product.ProductStyle)
}
}
else
{
没有符合条件的商品
}
}
@{
if (products != null && products.Count > 0)
{
foreach (var product in products)
{
}
}
else
{
没有符合条件的商品
}
}
运行测试
运行页面，点击商品类型，跳转到商品列表，效果如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第3张图片](http://img.e-com-net.com/image/info8/1be4aacdf0f64751941495b258aa49c0.jpg)
UI设计说明
在本示例中，其实后端业务逻辑并不是很复杂，主要是前端UI相对比较麻烦，如布局，展示，定位等相关内容。如果没有对应方面的知识储备，建议先找相资料进行学习。
关于CSS中display属性以及说明如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第4张图片](http://img.e-com-net.com/image/info8/2e735ecbb4324cdc9b1ec789b19421b1.jpg)
关于CSS中的Position属性说明如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第5张图片](http://img.e-com-net.com/image/info8/2139da9520d34ab58136534cef1c6802.jpg)
以上就是ASP.NET Core MVC开发实战之商城系统第三部分内容。后续将继续介绍其他模块。