门户网站优化,手机版房屋3d效果图设计软件,外发加工网订货会,企业网站资料大全经过一段时间的准备#xff0c;新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始#xff0c;在之前的文章中#xff0c;讲解了商城系统的整体功能设计#xff0c;页面布局设计#xff0c;环境搭建#xff0c;系统配置#xff0c;及首页【商品类型#xff0c;ba…经过一段时间的准备新的一期【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.QueryableProduct().First(rr.IdId);}}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 nameproductId/param/// returns/returnspublic ListProductConfig GetProductConfigListById(long productId){try{using (var db this.GetDb(BaseDal.ConnStr)){return db.QueryableProductConfig().Where(r r.ProductId productId).ToList();}}catch (Exception ex){LogHelper.Fatal(ex.Message);return new ListProductConfig();}}}
} 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 ListProductConfig;
}
div classform methodpost iddetailForminput typehidden nameproductId value(product.Id) /input typehidden namecolor idcolor value /input typehidden namesize idsize value /!-- quick view start --div classcontainerdiv classrowdiv idview-gallerydiv classcol-xs-12div classd-table stylewidth:100%div classd-tablecelldiv classmain-view modal-contentdiv classrowdiv classcol-xs-12 col-sm-5div classquick-imagediv classsingle-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 classtab-pane fade in (i0?active:) idsin-pro-(i)img src(productConfigImage.ConfigValue) alt/div}}/divdiv classquick-thumbdiv classnav nav-tabsul stylepadding-left:0px;{for (int i 0; i productConfigImages.Count; i){var productConfigImage productConfigImages[i];lia data-toggletab href## onclickjavascript:tabProductImage(sin-pro-(i),this); img src(productConfigImage.ConfigName) altquick view stylewidth:90px;height:90px; /a/li}}/ul/div/div/div/divdiv classcol-xs-12 col-sm-7div classquick-rightdiv classquick-right-texth3strongproduct.Name/strong/h3div classratingi classfa fa-star/ii classfa fa-star/ii classfa fa-star/ii classfa fa-star-half-o/ii classfa fa-star-o/i/divdiv classamounth4$product.PreferentialPrice/h4/divpproduct.Description/pdiv classrow m-p-bdiv classcol-sm-12div classpor-dse responsive-strok clearfixullispan是否现货/spanstrong:/strong 现货/lilispan是否新品/spanstrong:/strong 新品/lilispan商品类型/spanstrong:/stronga hrefproduct.BasicStyle/aa hrefproduct.ProductStyle/a/li/ul/div/div/divdiv classrow m-p-bdiv classcol-sm-12div classpor-dse colorullispan颜色分类/spanstrong:/strongdiv classpor-dsc-div{var productColors productConfigList.Where(r r.ConfigType Color).ToList();for (int i 0; i productColors.Count; i){span classpor-dsc-span onclickjavascript:checkActive(this,color);(productColors[i].ConfigValue)/span}}/div/lilispan大小/spanstrong:/strongdiv classpor-dsc-div{var productSizes productConfigList.Where(r r.ConfigType Size).ToList();for (int i 0; i productSizes.Count; i){span classpor-dsc-span onclickjavascript:checkActive(this,size);(productSizes[i].ConfigValue)/span}}/div/lilispan标签/spanstrong:/stronga hrefproduct.BasicStyle/aa hrefproduct.ProductStyle/a/li/ul/div/div/divdiv classdse-btndiv classrowdiv classcol-sm-12 col-md-12div classpor-dse clearfixulli classshare-btn clearfixspan数量/spaninput classinput-text qty namequantity maxlength12 value1 title数量 typetext/li/ul/div/divdiv classcol-sm-12 col-md-12div classpor-dse add-to styledisplay:inline-blocka href## onclickjavascript:addCartByForm();加入购物车/a/divdiv classpor-dse add-to styledisplay:inline-blocka href## onclickjavascript: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开发实战之商城系统第四部分内容后续将继续介绍其他模块敬请期待。
