以下是ASP.NET MVC实现横向展示购物车的完整攻略：
实现横向展示购物车的步骤
实现横向展示购物车步骤包括以下几个步骤：
- 创建购物车模型。
- 在控制器中添加购物车操作方法。
- 在视中展示购物车。
以下是一个示例演示如何实现横向展示购物车：
- 创建购物车模型。
在“Models”文件夹中，创建一个名为“Cart”的新类，并添加以下代码：
public class Cart
{
private List<CartItem> _items = new List<CartItem>();
public void AddItem(Product product, int quantity)
{
var item = _items.FirstOrDefault(i => i.Product.Id == product.Id);
if (item == null)
{
_items.Add(new CartItem { Product = product, Quantity = quantity });
}
else
{
item.Quantity += quantity;
}
}
public void RemoveItem(Product product)
{
_items.RemoveAll(i => i.Product.Id == product.Id);
}
public decimal ComputeTotalValue()
{
return _items.Sum(i => i.Product.Price * i.Quantity);
}
public void Clear()
{
_items.Clear();
}
public IEnumerable<CartItem> Items => _items;
}
public class CartItem
{
public Product Product { get; set; }
public int Quantity { get; set; }
}
在上面的代码中，我们定义了一个名为“Cart”的购物车类，它包含了添加、删除、计算总价和清空购物车等操作。我们还定义了一个名为“CartItem”的类，它包含了产品和数量属性。
- 在控器中添加购物车操作方法。
在“Controllers”文件夹中，创建一个名为“CartController”的控制器，并添加以下代码：
public class CartController : Controller
{
private readonly AppDbContext _dbContext;
private readonly Cart _cart;
public CartController()
{
_dbContext = new AppDbContext();
_cart = new Cart();
}
public ActionResult AddToCart(int productId, int quantity)
{
var product = _dbContext.Products.FirstOrDefault(p => p.Id == productId);
if (product != null)
{
_cart.AddItem(product, quantity);
}
return RedirectToAction("Index", "Home");
}
public ActionResult RemoveFromCart(int productId)
{
var product = _dbContext.Products.FirstOrDefault(p => p.Id == productId);
if (product != null)
{
_cart.RemoveItem(product);
}
return RedirectToAction("Index", "Home");
}
public PartialViewResult CartSummary()
{
return PartialView("_CartSummary", _cart);
}
}
在上面的代码中，我们创建了一个名为“CartController”的控制器，并在构造函数中实例化了一个名为“_cart”的Cart对象我们还创建了一个名为“AddToCart”的操作方法，该方法将产品添加到购物车中我们还创建了一个名为“RemoveFromCart”的操作方法，该方法从购物车中删除产品。最后，我们创建了一个名为“CartSummary”的操作方法，该方法返回一个部分视图，用于显示购物车概要。
- 在视图中展示购物车。
在“Views\Shared”文件夹中，创建一个名为“_CartSummary.cshtml”的新部分视图，并添加以下代码：
@model Cart
<div class="cart-summary">
<span class="cart-count">@Model.Items.Sum(i => i.Quantity)</span>
<span class="cart-total">@Model.ComputeTotalValue().ToString("c")</span>
</div>
在上面的代码中，我们使用Razor语法创建了一个HTML元素，用于显示购物车中产品数量和总价。
在“Views\Home”文件夹中，打开“Index.cshtml”视图，并添加以下代码：
@model IEnumerable<Product>
@foreach (var product in Model)
{
<div class="product">
<h2>@product.Name</h2>
<p>@product.Description</p>
<p>@product.Price.ToString("c")</p>
<form method="post" action="@Url.Action("AddToCart", "Cart")">
<input type="hidden" name="productId" value="@product.Id" />
<input type="number" name="quantity" value="1" />
<button type="submit">Add to cart</button>
</form>
</div>
}
@Html.Action("CartSummary", "Cart")
在上面的代码中，我们使用Razor语法创建了一个HTML元素，用于显示产品列表。我们还创建了一个为“Add to cart”的表单，该表单将产品ID和数量提交到“AddToCart”操作方法。最后，我们使用@Html.Action方法调用“CartSummary”操作方法，以显示购物车概要。
示例
以下是一个完整的示例，演示如何在ASP.NET MVC中实现横向展示购物车：
// Models/Cart.cs
public class Cart
{
private List<CartItem> _items = new List<CartItem>();
public void AddItem(Product product, int quantity)
{
var item = _items.FirstOrDefault(i => i.Product.Id == product.Id);
if (item == null)
{
_items.Add(new CartItem { Product = product, Quantity = quantity });
}
else
{
item.Quantity += quantity;
}
}
public void RemoveItem(Product product)
{
_items.RemoveAll(i => i.Product.Id == product.Id);
}
public decimal ComputeTotalValue()
{
return _items.Sum(i => i.Product.Price * i.Quantity);
}
public void Clear()
{
_items.Clear();
}
public IEnumerable<CartItem> Items => _items;
}
public class CartItem
{
public Product Product { get; set; }
public int Quantity { get; set; }
}
// Models/Product.cs
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
}
// Controllers/CartController.cs
public class CartController : Controller
{
private readonly AppDbContext _dbContext;
private readonly Cart _cart;
public CartController()
{
_dbContext = new AppDbContext();
_cart = new Cart();
}
public ActionResult AddToCart(int productId, int quantity)
{
var product = _dbContext.Products.FirstOrDefault(p => p.Id == productId);
if (product != null)
{
_cart.AddItem(product, quantity);
}
return RedirectToAction("Index", "Home");
}
public ActionResult RemoveFromCart(int productId)
{
var product = _dbContext.Products.FirstOrDefault(p => p.Id == productId);
if (product != null)
{
_cart.RemoveItem(product);
}
return RedirectToAction("Index", "Home");
}
public PartialViewResult CartSummary()
{
return PartialView("_CartSummary", _cart);
}
}
// Views/Shared/_CartSummary.cshtml
@model Cart
<div class="cart-summary">
<span class="cart-count">@Model.Items.Sum(i => i.Quantity)</span>
<span class="cart-total">@Model.ComputeTotalValue().ToString("c")</span>
</div>
// Views/Home/Index.cshtml
@model IEnumerable<Product>
@foreach (var product in Model)
{
<div class="product">
<h2>@product.Name</h2>
<p>@product.Description</p>
<p>@product.Price.ToString("c")</p>
<form method="post" action="@Url.Action("AddToCart", "Cart")">
<input type="hidden" name="productId" value="@product.Id" />
<input type="number" name="quantity" value="1" />
<button type="submit">Add to cart</button>
</form>
</div>
}
@Html.Action("CartSummary", "Cart")
在上面的示例中，我们创建了一个名为“Cart”的购物车类，并在控制器中添加了购物车操作方法。我们还创建了一个名为“_CartSummary”的部分视图，用于显示购物车要。最后，我们在视图中展示了购物车。