經過一段時間的準備，新的一期【ASP.NET Core MVC開發實戰之商城系統】已經開始，在之前的文章中，講解了商城系統的整體功能設計，頁面佈局設計，環境搭建，系統配置，及首頁【商品類型，banner條，友情鏈接，降價促銷，新品爆款】，商品列表頁面等功能的開發，今天繼續講解商品詳情功能開發，僅供學... ...
經過一段時間的準備，新的一期【ASP.NET Core MVC開發實戰之商城系統】已經開始，在之前的文章中，講解了商城系統的整體功能設計，頁面佈局設計，環境搭建，系統配置，及首頁【商品類型，banner條，友情鏈接，降價促銷，新品爆款】，商品列表頁面等功能的開發，今天繼續講解商品詳情功能開發，僅供學習分享使用，如有不足之處，還請指正。
商品詳情功能說明
首頁和商品列表，都是只展示商品的主要信息，如商品名稱，商品價格，類型等內容，讓人有一個先入為主的商品概念，當用戶對商品有興趣時，可以點擊鏈接跳轉商品詳情頁面，查看商品更全面的信息，如：顏色，尺寸等內容。
商品詳情功能設計
根據商品詳情頁面功能說明，在此頁面，用戶可以查看商品的具體內容，如：圖片，顏色，大小，類型，標簽以及加入購物車，立即購買等功能，具體頁面設計如下所示：
商品詳情頁面功能開發
商品詳情主要展示商品信息和商品配置信息。
1. 數據表創建
關於商品表EB_Product和對應模型Product的創建，可參考第二篇文章。商品配置表EB_ProductConfig，主要配置商品的特殊屬性，如：顏色，尺寸，縮略圖等內容，如下所示：
創建表的語句，如下所示：
CREATE TABLE [dbo].[EB_ProductConfig](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[ProductId] [bigint] NULL,
[ConfigType] [varchar](50) NULL,
[ConfigName] [varchar](50) NULL,
[ConfigValue] [varchar](150) NULL,
[CreateTime] [datetime] NULL,
[CreateUser] [varchar](50) NULL,
[LastEditTime] [datetime] NULL,
[LastEditUser] [varchar](50) NULL
) ON [PRIMARY]
2. 商品配置實體創建
商品配置表對應的項目模型實體，和數據表一一對應，如下所示：
namespace EasyBuyShop.Models
{
/// <summary>
/// 產品配置，主要配置顏色，大小，縮略圖路徑等
/// </summary>
[SqlSugar.SugarTable("EB_ProductConfig")]
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>;
}
<div class="">
<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="" />
<!-- quick view start -->
<div class="container">
<div class="row">
<div id="view-gallery">
<div class="col-xs-12">
<div class="d-table" style="width:100%">
<div class="d-tablecell">
<div class="main-view modal-content">
<div class="row">
<div class="col-xs-12 col-sm-5">
<div class="quick-image">
<div class="single-quick-image tab-content text-center">
@{
var productConfigImages = productConfigList.Where(r => r.ConfigType == "Image").ToList();
for (int i = 0; i < productConfigImages.Count; i++)
{
var productConfigImage = productConfigImages[i];
<div class="tab-pane fade in @(i==0?"active":"")" id="sin-pro-@(i)">
<img src="@(productConfigImage.ConfigValue)" alt="">
</div>
}
}
</div>
<div class="quick-thumb">
<div class="nav nav-tabs">
<ul style="padding-left:0px;">
@{
for (int i = 0; i < productConfigImages.Count; i++)
{
var productConfigImage = productConfigImages[i];
<li><a data-toggle="tab" href="##" onclick="javascript:tabProductImage('sin-pro-@(i)',this);"> <img src="@(productConfigImage.ConfigName)" alt="quick view" style="width:90px;height:90px;"> </a></li>
}
}
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-7">
<div class="quick-right">
<div class="quick-right-text">
<h3><strong>@product.Name</strong></h3>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="amount">
<h4>[email protected]</h4>
</div>
<p>@product.Description</p>
<div class="row m-p-b">
<div class="col-sm-12">
<div class="por-dse responsive-strok clearfix">
<ul>
<li><span>是否現貨</span><strong>:</strong> 現貨</li>
<li><span>是否新品</span><strong>:</strong> 新品</li>
<li>
<span>商品類型</span><strong>:</strong>
<a href="">@product.BasicStyle</a>
<a href="">@product.ProductStyle</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row m-p-b">
<div class="col-sm-12">
<div class="por-dse color">
<ul>
<li>
<span>顏色分類</span><strong>:</strong>
<div class="por-dsc-div">
@{
var productColors = productConfigList.Where(r => r.ConfigType == "Color").ToList();
for (int i = 0; i < productColors.Count; i++)
{
<span class="por-dsc-span" onclick="javascript:checkActive(this,'color');">@(productColors[i].ConfigValue)</span>
}
}
</div>
</li>
<li>
<span>大小</span><strong>:</strong>
<div class="por-dsc-div">
@{
var productSizes = productConfigList.Where(r => r.ConfigType == "Size").ToList();
for (int i = 0; i < productSizes.Count; i++)
{
<span class="por-dsc-span" onclick="javascript:checkActive(this,'size');">@(productSizes[i].ConfigValue)</span>
}
}
</div>
</li>
<li>
<span>標簽</span><strong>:</strong>
<a href="">@product.BasicStyle</a>
<a href="">@product.ProductStyle</a>
</li>
</ul>
</div>
</div>
</div>
<div class="dse-btn">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="por-dse clearfix">
<ul>
<li class="share-btn clearfix">
<span>數量</span>
<input class="input-text qty" name="quantity" maxlength="12" value="1" title="數量" type="text">
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="por-dse add-to" style="display:inline-block">
<a href="##" onclick="javascript:addCartByForm();">加入購物車</a>
</div>
<div class="por-dse add-to" style="display:inline-block">
<a href="##" onclick="javascript:addPurchaseByForm();">立即購買</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- quick view end -->
</form>
</div>
<script src="~/js/shop.js"></script>
商品詳情頁面展示
運行程式，在首頁或商品列表頁面，點擊商品鏈接，進入商品詳情頁面，如下所示：
以上就是ASP.NET Core MVC開發實戰之商城系統第四部分內容，後續將繼續介紹其他模塊，敬請期待。
作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章
