After a period of preparation, the new issue [ASP.NET Core MVC Development Practical Mall System] has begun. In the previous article, the overall functional design, page layout design, environment construction, and system configuration of the mall system were explained. And the development of functions such as [product type, banner, friendly links, price reduction promotions, new products] on the homepage. Today we will continue to explain the function development of the product list page . It is only for learning and sharing. If there are any shortcomings, please correct me.
Product list function description
Generally, the homepage is mainly used to present the products that customers want to see most, such as: highest sales, price reduction promotions, quarterly new products, etc. If the product that the customer wants is not displayed on the homepage, the user needs to search for the keywords of the product to find it. Or you can narrow the scope by product type. At this time, you will need to use the product list function.
The product list is mainly used to display search product results, or to display products of a certain product type. There are two presentation methods: grid form or list form. Users can freely switch between the two forms.
Product list design
According to functional analysis, the product list mainly displays product information, in two forms: grid form and list form. The overall page looks like this:
Product list function development
The product list mainly displays product information. For the creation of the product table EB_Product and the corresponding model Product, please refer to the previous article.
1. Data processing layer DAL
First of all, there are two main sources of product lists. 1. Click on the product type to jump to the product list. 2. Keyword search to enter the product list. Therefore, two conditions need to be met during retrieval. DAL [Data Access Layer] layer processing is as follows:
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. Controller acquisition
In the Index method of the controller ProductController, based on the received parameters, obtain a list of products that meet the conditions and pass it to the view layer, as shown below:
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();
}
Also in this example, the data is passed as ViewData. Personal suggestion: For simple types, you can use ViewBag to pass; for complex types, or if the type needs to be clear in the view, you can use ViewData to pass.
3. View layer display
In the view Views\Product\Index.cshtml page, parse, combine and display the data passed by the controller method. As follows:
@{
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>
网格
</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="">价格</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="预览">
<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">[email protected]</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="预览">
<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">[email protected]</span>
<span class="old">[email protected]</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>
Run tests
Run the page, click on the product type, jump to the product list, the effect is as follows:
UI design instructions
In this example, the back-end business logic is actually not very complicated. The main reason is that the front-end UI is relatively troublesome, such as layout, display, positioning and other related content. If you do not have corresponding knowledge reserves, it is recommended to first look for photography materials to study.
The display attribute and description in CSS are as follows:
The description of the Position attribute in CSS is as follows:
The above is the third part of the practical mall system development of ASP.NET Core MVC. Other modules will be introduced later.