您现在的位置是：网站首页> 编程资料编程资料

ASP.NET MVC实现横向展示购物车_实用技巧_

2023-05-24 285人已围观

简介 ASP.NET MVC实现横向展示购物车_实用技巧_

通常，我们看到的购物车是这样的：

3

虽然这种购物车显示方式被广泛运用，但我个人觉得不够直观。如果换成这样呢？

本篇的源码放在了：https://github.com/darrenji/ShoppingCartInMVC

以上购物车页能实现的效果包括：
1、购物车明细：显示订购数量、总金额，清空购物车。
2、购物车内产品：数量可调整，对应的小计和总计动态变化。点击移除按钮移除该产品。
3、继续购物按钮：点击左下角的继续购物按钮，回到先前页。
4、使用了Bootstrap, 页面元素自适应，页面宽度调小时，页面布局动态变化。
5、每行放置4个产品，且允许高度不一致，第5个产品另起一行，且不会float到上一行的空白区域，如下图。

首先，有关产品的类。

 public class Product { public int Id { get; set; } public string Name { get; set; } public string ImageUrl { get; set; } public string Description { get; set; } public decimal Price { get; set; } }

产品选购页如图：

以上，产品选购页是一个有关Product集合的强类型视图页，其对应的Model为：

 public class ProductsListVm { public ProductsListVm() { this.Products = new List(); } public IEnumerable Products { get; set; } }

想像一下，我们在超市购物，在购物车内放着不同的商品对应不同的数量，在这里，可以把商品和数量抽象成一个类：

 public class CartLine { public Product Product { get; set; } public int Quantity { get; set; } }

而购物车类实际上就是维护着这个CartLine集合，需要提供添加、移除、计算购物车总价、清空购物车等方法，并提供一个获取到CartLine集合的属性，另外，针对点击购物车页上的增量和减量按钮，也要提供相应的方法。

 public class Cart { private List lineCollection = new List(); //添加 public void AddItem(Product product, int quantity) { CartLine line = lineCollection.Where(p => p.Product.Id == product.Id).FirstOrDefault(); if (line == null) { lineCollection.Add(new CartLine(){Product = product, Quantity = quantity}); } else { line.Quantity += quantity; } } //点击数量+号或点击数量-号或自己输入一个值 public void IncreaseOrDecreaseOne(Product product, int quantity) { CartLine line = lineCollection.Where(p => p.Product.Id == product.Id).FirstOrDefault(); if (line != null) { line.Quantity = quantity; } } //移除 public void RemoveLine(Product product) { lineCollection.RemoveAll(p => p.Product.Id == product.Id); } //计算总价 public decimal ComputeTotalPrice() { return lineCollection.Sum(p => p.Product.Price*p.Quantity); } //清空 public void Clear() { lineCollection.Clear(); } //获取 public IEnumerable Lines { get { return lineCollection; } } }

购物车页自然就是针对Cart类的一个强类型视图页，嗯，等等，购物车页还需要记录下上一个页面的url，于是，考虑到把Cart类和记录上一个页面url这2个因素，针对购物车页，给出这样的一个Model：

 public class CartIndexVm { public Cart Cart { get; set; } public string ReturnUrl { get; set; } }

在HomeController中，需要用到购物车的实例，可以这样写：

private Cart GetCart() { Cart cart = (Cart)Session["Cart"]; if (cart == null) { cart = new Cart(); Session["Cart"] = cart; } return cart; }

Cart实例保存到Session中，并从Session中获取。当然，也可以放到ASP.NET MVC绑定机制中，需要做的就是实现IModelBinder接口。

 public class CartModelBinder : IModelBinder { private const string sessionKey = "Cart"; public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) { Cart cart = (Cart)controllerContext.HttpContext.Session[sessionKey]; if (cart == null) { cart = new Cart(); controllerContext.HttpContext.Session[sessionKey] = cart; } return cart; } }

自定义的ModelBinder需要在全局中注册。

 public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); ...... ModelBinders.Binders.Add(typeof(Cart), new CartModelBinder()); } }

在Home控制器中，首先提供了一个返回Product集合的方法。

 private List GetAllProducts() { return new List() { new Product(){Id = 1, Description = "产品描述产品描述产品描述产品描述产品描述产品描述产品描述",ImageUrl = "/images/1.jpg",Name = "产品1",Price = 85M}, new Product(){Id = 2, Description = "产品描述产品描述产品描述产品描述产品描述产品描述产品描述",ImageUrl = "/images/2.jpg",Name = "产品2",Price = 95M}, new Product(){Id = 3, Description = "产品描述产品描述产品描述",ImageUrl = "/images/2.jpg",Name = "产品3",Price = 55M}, new Product(){Id = 4, Description = "产品描述产品描述产品描述产品描述产品描述产品描述产品描述",ImageUrl = "/images/1.jpg",Name = "产品4",Price = 65M}, new Product(){Id = 5, Description = "产品描述产品描述产品描述产品描述产品描述产品描述产品描述",ImageUrl = "/images/2.jpg",Name = "产品5",Price = 75M} }; }

在HomeController中，有关产品选购页的如下：

 //产品选购页 public ActionResult Index() { ProductsListVm productsListVm = new ProductsListVm(); productsListVm.Products = GetAllProducts(); return View(productsListVm); }

Homme/Index.cshtml是一个ProductsListVm的强类型视图页。

@model MvcApplication1.Models.ProductsListVm @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } 
 @foreach (var item in Model.Products) { Html.RenderPartial("ProductSummary", item); }

其中，遍历Product集合的时候，又去加载Views/Shared/ProductSummary.cshtml这个强类型部分视图。

@model MvcApplication1.Models.Product 
@Model.Name
@Model.Description
@Model.Price.ToString("c")
 @using (Html.BeginForm("AddToCart", "Home")) { @Html.HiddenFor(p => p.Id) @Html.Hidden("returnUrl", Request.Url.PathAndQuery)  }

点击"+放入购物车"按钮，调用HomeController中的AddToCart方法，并且需要把选购产品页的url以query string的形式传递给控制器方法。

 //购物车页 public ActionResult CartIndex(Cart cart, string returnUrl) { return View(new CartIndexVm { Cart = cart, ReturnUrl = returnUrl }); } //添加到购物车 public ActionResult AddToCart(Cart cart, int id, string returnUrl) { Product product = GetAllProducts().Where(p => p.Id == id).FirstOrDefault(); if (product != null) { cart.AddItem(product, 1); } return RedirectToAction("CartIndex", new {returnUrl}); }

购物车页Home/CartIndex.cshtml是一个CartIndexVm的强类型视图页。

@model MvcApplication1.Models.CartIndexVm @{ ViewBag.Title = "CartIndex"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section styles {  } 
 @for (int i = 0; i < Model.Cart.Lines.Count(); i++) { var item = (Model.Cart.Lines.ToList())[i]; if (i != 0 && i%4 == 0) //每行有4个div { 
 } 
@item.Product.Name
@item.Product.Description
单价：@item.Product.Price
数量：
小计：@((item.Quantity * item.Product.Price).ToString("c"))
 @using (Html.BeginForm("RemoveFromCart", "Home")) { @Html.Hidden("Id", item.Product.Id) @Html.HiddenFor(x => x.ReturnUrl) 查看 } 
 } 
总计： @Model.Cart.ComputeTotalPrice().ToString("c") 
继续购物
 @section scripts {  }

在购物车页，用了Bootstrap TouchSpin这款插件，点击其中的数量的增量和减量按钮，就向Home控制器中的IncreaseOrDecreaseOne方法发送一个异步post请求，得到返回数据刷新购物车页。

 //点击数量+号或点击数量-号或自己输入一个值 [HttpPost] public ActionResult IncreaseOrDecreaseOne(Cart cart, int id, int quantity) { Product product = GetAllProducts().Where(p => p.Id == id).FirstOrDefault(); if (product != null) { cart.IncreaseOrDecreaseOne(product, quantity); } return Json(new { msg = true }); }

在购车页，点击"移除"按钮，就向Home控制器的RemoveFromCart方法提交表单。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：ASP.NET MVC获取多级类别组合下的产品_实用技巧_

下一篇：使用EF Code First搭建简易ASP.NET MVC网站并允许数据库迁移_实用技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网