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

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

[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第1张图片

商品列表功能说明

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

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

商品列表设计

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

[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第2张图片

商品列表功能开发

商品列表主要展示商品信息,关于商品表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 {
没有符合条件的商品
} }
    @{ var totalNum =Math.Ceiling(products.Count / 40.0f); var currentNum = 1; for(int i = 1; i <= totalNum; i++) {
  • @i
  • } }
  • »

 

运行测试

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

[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第3张图片

UI设计说明

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

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

[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第4张图片

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

[回馈]ASP.NET Core MVC开发实战之商城系统(三)_第5张图片

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

你可能感兴趣的:(.Net技术,全栈开发,asp.net,mvc,后端,asp.net,core,microsoft,商城系统)