我尝试创建一个电子商务网站。我有一个带有“添加到购物车”按钮的产品页面。在此页面(
SingleProduct.cshtml
)上,我还从客户处获取了产品数量。此页面使用产品型号 (@model Product
)。我想调用一个带有数量和 @model.ProductId
的操作。
这是我的观点:
@model Product
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<title>Dene @Model.ProductName</title>
</head>
<body>
<!-- ***** Main Banner Area Start ***** -->
<div class="page-heading" id="top">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="inner-content">
<h2>@Model.ProductName</h2>
<span>Here is placed for effective words</span>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Main Banner Area End ***** -->
<!-- ***** Product Area Starts ***** -->
<section class="section" id="product">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="left-images">
<img src="~/templatemo_571_hexashop/assets/images/single-product-01.jpg" alt="">
<img src="~/templatemo_571_hexashop/assets/images/single-product-02.jpg" alt="">
</div>
</div>
<div class="col-lg-4">
<div class="right-content">
<h4>@Model.ProductName</h4>
<span class="price">[email protected]</span>
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span>@Model.Description</span>
<div class="quote">
<i class="fa fa-quote-left"></i><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiuski smod.</p>
</div>
<form asp-controller="product" asp-action="feedback" method="post">
<div class="quantity-content">
<div class="left-content">
<h6>No. of Orders</h6>
</div>
<div class="right-content">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus"><input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="" inputmode=""><input type="button" value="+" class="plus">
</div>
</div>
</div>
<div class="total">
<h4>Total: $210.00</h4>
<div class="main-border-button"><a asp-controller="Product" asp-action="feedback" asp-route-id="@Model.ProductId" asp-route-quantity=quantity>Add To Cart</a></div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Product Area Ends ***** -->
<!-- ... (previous code) ... -->
<!-- ***** Product Area Ends ***** -->
<!-- jQuery -->
<script src="~/templatemo_571_hexashop/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="~/templatemo_571_hexashop/assets/js/popper.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script src="~/templatemo_571_hexashop/assets/js/owl-carousel.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/accordions.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/datepicker.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/scrollreveal.min.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/waypoints.min.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/jquery.counterup.min.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/imgfix.min.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/slick.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/lightbox.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/isotope.js"></script>
<script src="~/templatemo_571_hexashop/assets/js/quantity.js"></script>
<!-- Global Init -->
<script src="~/templatemo_571_hexashop/assets/js/custom.js"></script>
<script>
$(function () {
var selectedClass = "";
$("p").click(function () {
selectedClass = $(this).attr("data-rel");
$("#portfolio").fadeTo(50, 0.1);
$("#portfolio div").not("." + selectedClass).fadeOut();
setTimeout(function () {
$("." + selectedClass).fadeIn();
$("#portfolio").fadeTo(50, 1);
}, 500);
});
});
</script>
</body>
</html>
这是我的控制器:
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Store02.Model;
using System.Collections.Generic;
namespace Store02.Controllers
{
public class ProductController : Controller
{
private readonly ProductContext _context;
public ProductController(ProductContext context)
{
_context = context;
}
public IActionResult Index()
{
Product Deneme = new Product();
var model = _context.Products.ToList();
return View(model);
}
public IActionResult Get(int id)
{
Product product = _context.Products.First(p => p.ProductId.Equals(id));
return View(product);
}
/* public IActionResult Products(int id=0)
{
Product Deneme = new Product();
List<Product> model;
if (id != 0)
{
model = _context.Products
.Where(p => p.CategoryId == id)
.ToList();
}
else
{
model = _context.Products.ToList();
}
return View(model);
}*/
public IActionResult SingleProduct(int id)
{
Product product = _context.Products.FirstOrDefault(p => p.ProductId == id);
if (product == null)
{
// Handle the case when the product is not found, for example, redirect to an error page.
return NotFound();
}
return View(product);
}
[HttpPost]
public IActionResult feedback(int id, int quantity)
{
Product product = _context.Products.FirstOrDefault(p => p.ProductId == id);
if (product == null)
{
return NotFound();
}
RepositoryOrderDetail.Add(product,quantity);
return View("feedback", RepositoryOrderDetail.orders);
}
}
}
我尝试使用 asp-route- 进行调用,但没有成功。
<div class="main-border-button">
<a asp-controller="Product" asp-action="feedback"
asp-route-id="@Model.ProductId"
asp-route-quantity=quantity>Add To Cart</a>
</div>
看一下
我认为“添加到购物车”不应该去反馈,但尽管如此,这就是它的样子。根据需要进行更改。
确保您有一个明确表示使用
[HttpPost]
标签进行 POST 的方法,否则 .net 将采用 GET 方法。
参见:理解MVC中的[HttpPost]、[HttpGet]和复杂Actionmethod参数
示例:
[HttpPost]
public IActionResult Feedback(Product model)
{
}
您想要发布整个模型。它会让你的生活更轻松。这样您就可以使用模型返回发布的值以及对数据所做的任何更改,并将其直接返回到视图。
不要使用
<form asp-controller="product" asp-action="feedback" method="post">
让他们为您渲染表单。
让 razor 视图代替表单标签来完成这项工作。这也可以保证您的 html 不会过时,以防未来版本发生任何变化。
// Inside Index.cshtml
@using (Html.BeginForm("Feedback", "Product", FormMethod.Post))
{
// your html here
}
参见问题的答案:带有按钮单击的 Html Beginform 在 .net core mvc 中不起作用
这将使 razor 为您渲染表单 html 并消除猜测。