[回馈]ASP.NET Core MVC开发实战之商城系统(四)
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】，商品列表页面等功能的开发，今天继续讲解商品详情功能开发，仅供学习分享使用，如有不足之处，还请指正。商品详情功能说明
首页和商品列表，都是只展示商品的主要信息，如商品名称，商品价格，类型等内容，让人有一个先入为主的商品概念，当用户对商品有兴趣时，可以点击链接跳转商品详情页面，查看商品更全面的信息，如：颜色，尺寸等内容。
商品详情功能设计
根据商品详情页面功能说明，在此页面，用户可以查看商品的具体内容，如：图片，颜色，大小，类型，标签以及加入购物车，立即购买等功能，具体页面设计如下所示：
商品详情页面功能开发
商品详情主要展示商品信息和商品配置信息。
1. 数据表创建
关于商品表EB_Product和对应模型Product的创建，可参考第二篇文章。商品配置表EB_ProductConfig，主要配置商品的特殊属性，如：颜色，尺寸，缩略图等内容，如下所示：
创建表的语句，如下所示：
CREATE TABLE .(
IDENTITY(1,1) NOT NULL,
NULL,
(50) NULL,
(50) NULL,
(150) NULL,
NULL,
(50) NULL,
NULL,
(50) NULL
) ON
2. 商品配置实体创建
商品配置表对应的项目模型实体，和数据表一一对应，如下所示：
namespace EasyBuyShop.Models
{
/// <summary>
/// 产品配置，主要配置颜色，大小，缩略图路径等
/// </summary>
public class ProductConfig : EntityModel
{
public long ProductId { get; set; }
public string ConfigType { get; set; }
public string ConfigName { get; set; }
public string ConfigValue { get; set; }
}
}
3. 数据处理层DAL
商品详情页面主要根据商品ID获取商品的详细信息以及商品配置信息，如下所示：
商品详细信息在ProductDal中，如下所示：
public Product GetProduct(long Id)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<Product>().First(r=>r.Id==Id);
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return null;
}
}商品配置信息在ProductConfigDal中，获取配置信息如下所示：
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class ProductConfigDal : BaseDal
{
public ProductConfigDal()
{
}
/// <summary>
/// 获取产品配置
/// </summary>
/// <param name="productId"></param>
/// <returns></returns>
public List<ProductConfig> GetProductConfigListById(long productId)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<ProductConfig>().Where(r => r.ProductId == productId).ToList();
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<ProductConfig>();
}
}
}
}
4. 控制器获取
商品详细信息在ProductController的Detail方法中，根据传入的ID进行读取，如下所示：
public IActionResult Detail(int Id)
{
var username = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
ViewData["Username"] = username;
ViewData["RealName"] = realName;
ProductDal productDal = new ProductDal();
ProductConfigDal productConfigDal = new ProductConfigDal();
var product = productDal.GetProduct(Id);
var productConfigList = productConfigDal.GetProductConfigListById(Id);
ViewData["ProductConfigList"]=productConfigList;
ViewData["Product"] = product;
return View();
}将获取到的Product对象和ProductConfigList列表对象通过ViewData传递到View视图层中进行展示。
5. 视图层展示
在Views/Product/Detail.cshtml中，接收控制器方法传递的数据，并进行展示。如下所示：
@{
ViewData["Title"] = "商品详情";
}
@{
var product = ViewData["Product"] as Product;
var productConfigList = ViewData["ProductConfigList"] as List<ProductConfig>;
}
<form method="post" id="detailForm">
<input type="hidden" name="productId" value="@(product.Id)" />
<input type="hidden" name="color" id="color" value="" />
<input type="hidden" name="size" id="size" value="" />
@{
var productConfigImages = productConfigList.Where(r => r.ConfigType == "Image").ToList();
for (int i = 0; i < productConfigImages.Count; i++)
{
var productConfigImage = productConfigImages;
<img src="https://www.cnblogs.com/@(productConfigImage.ConfigValue)" alt="">
}
}
<ul >
@{
for (int i = 0; i < productConfigImages.Count; i++)
{
var productConfigImage = productConfigImages;
<li><a data-toggle="tab" target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:tabProductImage('sin-pro-@(i)',this);"> <img src="https://www.cnblogs.com/@(productConfigImage.ConfigName)" alt="quick view" > </a></li>
}
}
</ul>
<h3><strong>@product.Name</strong></h3>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<h4>$@product.PreferentialPrice</h4>
<p>@product.Description</p>
<ul>
<li>是否现货<strong>:</strong> 现货</li>
<li>是否新品<strong>:</strong> 新品</li>
<li>
商品类型<strong>:</strong>
<a target="_blank" href="https://www.cnblogs.com/">@product.BasicStyle</a>
<a target="_blank" href="https://www.cnblogs.com/">@product.ProductStyle</a>
</li>
</ul>
<ul>
<li>
颜色分类<strong>:</strong>
@{
var productColors = productConfigList.Where(r => r.ConfigType == "Color").ToList();
for (int i = 0; i < productColors.Count; i++)
{
@(productColors.ConfigValue)
}
}
</li>
<li>
大小<strong>:</strong>
@{
var productSizes = productConfigList.Where(r => r.ConfigType == "Size").ToList();
for (int i = 0; i < productSizes.Count; i++)
{
@(productSizes.ConfigValue)
}
}
</li>
<li>
标签<strong>:</strong>
<a target="_blank" href="https://www.cnblogs.com/">@product.BasicStyle</a>
<a target="_blank" href="https://www.cnblogs.com/">@product.ProductStyle</a>
</li>
</ul>
<ul>
<li >
数量
<inputname="quantity" maxlength="12" value="1" title="数量" type="text">
</li>
</ul>
<a target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:addCartByForm();">加入购物车</a>
<a target="_blank" href="https://www.cnblogs.com/##" onclick="javascript:addPurchaseByForm();">立即购买</a>
</form>
商品详情页面展示
运行程序，在首页或商品列表页面，点击商品链接，进入商品详情页面，如下所示：
以上就是ASP.NET Core MVC开发实战之商城系统第四部分内容，后续将继续介绍其他模块，敬请期待。
来源:https://www.cnblogs.com/hsiang/archive/2023/07/31/17592418.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]