經(jīng)過一段時(shí)間的準(zhǔn)備，新的一期【ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)】已經(jīng)開始，在之前的文章中，講解了商城系統(tǒng)的整體功能設(shè)計(jì)，頁面布局設(shè)計(jì)，環(huán)境搭建，系統(tǒng)配置，及首頁【商品類型，banner條，友情鏈接，降價(jià)促銷，新品爆款】等功能的開發(fā)，今天繼續(xù)講解商品列表頁面功能開發(fā)，僅供學(xué)習(xí)分享使用，如有不足之處，還請指正。
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2023/07/610080-1.png)
?
商品列表功能說明
?
一般首頁主要用于呈現(xiàn)給客戶最想看到的商品，如：銷量最高，降價(jià)促銷，季度新品等，如果客戶想要的商品在首頁并沒有展示，就需要用戶搜索商品的關(guān)鍵詞來查找，或者通過商品類型來縮小范圍，這時(shí)候就會需要用到商品列表功能。
商品列表主要用于搜索商品結(jié)果的展示，或者某一種商品類型商品的展示，呈現(xiàn)方式有兩種：網(wǎng)格形式或者列表形式，用戶可以在兩種形式之間自由切換。
?
商品列表設(shè)計(jì)
?
根據(jù)功能分析，商品列表主要展示商品信息，有網(wǎng)格形式和列表形式兩種。整體頁面如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2023/07/610080-2.png)
?
商品列表功能開發(fā)
?
商品列表主要展示商品信息，關(guān)于商品表EB_Product和對應(yīng)模型Product的創(chuàng)建，可參考前一篇文章。
?
1. 數(shù)據(jù)處理層DAL
?
首先商品列表主要有兩個(gè)來源，1.點(diǎn)擊商品類型跳轉(zhuǎn)商品列表 2. 關(guān)鍵字搜索進(jìn)入商品列表。所以在檢索時(shí)需要滿足兩個(gè)條件。DAL【Data Access Layer】層處理如下所示：
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class ProductDal:BaseDal
{
public List<Product> GetProductList(int categoryId,int subCategoryId,string productName)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
if(categoryId>0 && subCategoryId > 0)
{
return db.Queryable<Product>().Where(r=>r.CategoryId==categoryId && r.SubCategoryId==subCategoryId).ToList();
}
else
{
return db.Queryable<Product>().Where(r => r.Name.Contains(productName)).ToList();
}
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<Product>();
}
}
}
}?
2. 控制器獲取
?
在控制器ProductController的Index方法中，以接收到的參數(shù)為條件，獲取符合條件的商品列表，傳遞到視圖層，如下所示：
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來傳遞數(shù)據(jù)。個(gè)人建議：對于簡單類型，可采用ViewBag進(jìn)行傳遞；對于復(fù)雜類型，或視圖中需要明確類型的，可采用ViewData進(jìn)行傳遞。
?
3. 視圖層展示
?
在視圖Views\Product\Index.cshtml頁面中，對控制器方法傳遞的數(shù)據(jù)進(jìn)行解析組合展示。如下所示：
@{
ViewData["Title"] = "商品列表";
}
<div class="shop-page-area ptb-100">
<div class="container" style="width:100%;padding-left:0px;padding-right:0px;">
<div class="row">
<div class="col-md-9">
<div class="blog-wrapper shop-page-mrg">
<div class="tab-menu-product">
<div class="tab-menu-sort">
<div class="tab-menu">
<ul role="tablist">
<li class="active" id="gridTab">
<a href="#grid" data-toggle="tab" onclick="javascript:showGrid();return false;">
<i class="fa fa-th-large"></i>
網(wǎng)格
</a>
</li>
<li id="listTab">
<a href="#list" data-toggle="tab" onclick="javascript:showList();return false;">
<i class="fa fa-align-justify"></i>
列表
</a>
</li>
</ul>
</div>
<div class="tab-sort">
<label>排序 : </label>
<select>
<option value="">位置</option>
<option value="">流行度</option>
<option value="">價(jià)格</option>
<option value="">評分</option>
</select>
</div>
</div>
<div class="tab-product">
<div class="tab-content">
<div class="tab-pane active" id="grid">
<div class="row">
@{
var products = ViewData["ProductList"] as List<Product>;
if(products!=null && products.Count > 0)
{
foreach (var product in products)
{
<div class="col-md-6 col-lg-4 col-sm-6">
<div class="single-shop mb-40">
<div class="shop-img">
<a href="#"><img src="@product.ImageUrl" alt=""></a>
<div class="shop-quick-view">
<a href="/Product/Detail/@product.Id" data-toggle="modal" data-target="#quick-view" title="預(yù)覽">
<i class="pe-7s-look"></i>
</a>
</div>
<div class="button-group">
<a href="#" title="添加購物車" onclick="javascript:addCart(@(product.Id));return false;">
<i class="pe-7s-cart"></i>
添加購物車
</a>
<a class="wishlist" href="#" title="立即購買" onclick="javascript:buy(@(product.Id));return false;">
<i class="pe-7s-like"></i>
立即購買
</a>
</div>
</div>
<div class="shop-text-all">
<div class="title-color fix">
<div class="shop-title f-left">
<h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
</div>
<span class="price f-right">
<span class="new">$@product.PreferentialPrice</span>
</span>
</div>
<div class="fix">
<span class="f-left">@(product.BasicStyle) | @(product.ProductStyle)</span>
</div>
</div>
</div>
</div>
}
}
else
{
<div>沒有符合條件的商品</div>
}
}
</div>
</div>
<div class="tab-pane mb-10" id="list">
<div class="row">
<div class="col-md-12">
<div class="row">
@{
if (products != null && products.Count > 0)
{
foreach (var product in products)
{
<div class="single-shop mb-40">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="shop-list-left">
<div class="shop-img">
<a href="#"><img src="@product.ImageUrl" alt=""></a>
<div class="shop-quick-view">
<a href="#" data-toggle="modal" data-target="#quick-view" title="預(yù)覽">
<i class="pe-7s-look"></i>
</a>
</div>
<div class="price-up-down">
<span class="sale-new"> @(Math.Round(product.Preferential * 100, 0))% </span>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="shop-list-right">
<div class="shop-list-all">
<div class="shop-list-name">
<h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
</div>
<div class="shop-list-rating">
<span class="ratting">
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
</span>
</div>
<div class="shop-list-price">
<span class="list-price">
<span class="new">$@product.PreferentialPrice</span>
<span class="old">$@product.Price</span>
</span>
</div>
<div class="shop-list-cart">
<div class="shop-group">
<a href="#" title="加入購物車" onclick="javascript:addCart(@(product.Id));return false;">
<i class="pe-7s-cart"></i>
加入購物車
</a>
<a class="wishlist" href="#" title="立即購買" onclick="javascript:buy(@(product.Id));return false;">
<i class="pe-7s-like"></i>
立即購買
</a>
</div>
</div>
</div>
</div>
</div>
</div>
}
}
else
{
<div>沒有符合條件的商品</div>
}
}
</div>
</div>
</div>
</div>
<div class="page-pagination text-center" style="margin-top:10px;">
<ul>
@{
var totalNum =Math.Ceiling(products.Count / 40.0f);
var currentNum = 1;
for(int i = 1; i <= totalNum; i++)
{
<li><a class="@(i == currentNum?"active":string.Empty)" href="#">@i</a></li>
}
}
<li><a href="#"><i class="fa fa-angle-double-right">?</i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/js/plugins.js"></script>
<script src="~/js/shop.js"></script>?
運(yùn)行測試
?
運(yùn)行頁面，點(diǎn)擊商品類型，跳轉(zhuǎn)到商品列表，效果如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2023/07/610080-3.png)
?
UI設(shè)計(jì)說明
?
在本示例中，其實(shí)后端業(yè)務(wù)邏輯并不是很復(fù)雜，主要是前端UI相對比較麻煩，如布局，展示，定位等相關(guān)內(nèi)容。如果沒有對應(yīng)方面的知識儲備，建議先找相資料進(jìn)行學(xué)習(xí)。
關(guān)于CSS中display屬性以及說明如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2023/07/610080-4.png)
關(guān)于CSS中的Position屬性說明如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2023/07/610080-5.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-610080.html
以上就是ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)第三部分內(nèi)容。后續(xù)將繼續(xù)介紹其他模塊。文章來源地址http://www.zghlxwxcb.cn/news/detail-610080.html
到了這里，關(guān)于[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(三)](https://imgs.yssmx.com/Uploads/2024/02/610080-1.png)
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2024/02/600429-1.png)
![[回饋]ASP.NET Core MVC開發(fā)實(shí)戰(zhàn)之商城系統(tǒng)(完:內(nèi)附源碼)](https://imgs.yssmx.com/Uploads/2024/02/678078-1.png)
