Я написал код для добавления товаров в корзину. Я могу добавлять элементы, только если перезагрузить страницу. Но я хочу добавить элементы без перезагрузки страницы.
Вот мой сценарий:
<script>
$(document).ready(function () {
$("#addToCart").click(function () {
var productId = $('#productId').val();
var productName = $('#productName').val();
var unitPrice = $('#unitPrice').val();
var quantity = $('#quantity').val();
var image = $('#Image').val();
addItemToCart(productId, productName, quantity, unitPrice, image);
});
});
function addItemToCart(productId, productName, quantity, unitPrice, image) {
var getProduct = {};
getProduct.Name = productName;
getProduct.Image = image;
getProduct.unitPrice = unitPrice;
var product = {};
product.Product = getProduct;
product.ProductId = productId;
product.Quantity = parseInt(quantity);
product.Price = parseFloat(unitPrice) * parseInt(quantity);
product.Product.unitPrice = unitPrice;
$.ajax({
type: "POST",
url: "/Product/GetCartData",
data: JSON.stringify(product),
contentType: "application/json;charset=UTF-8",
dataType: "json",
crossDomain: true,
success:function()
{
var url = '/Product/Details?ProductId=' + productId;
window.location.href = url;
}
});
}
</script>
Вот мое действие addtocart
public JsonResult GetCartData(OrderDetail details)
{
if (Session["OrderDetails"] != null)
{
orderDetails = (List<OrderDetail>)Session["OrderDetails"];
int flag = 0;
foreach (var order in orderDetails)
{
if (order.ProductId == details.ProductId)
{
order.Quantity += details.Quantity;
order.Price += details.Price;
flag = 1;
}
}
if (flag == 0)
{
orderDetails.Add(details);
}
Session["OrderDetails"] = orderDetails;
}
else
{
orderDetails = new List<OrderDetail>();
orderDetails.Add(details);
Session["OrderDetails"] = orderDetails;
}
return Json(orderDetails);
}
вот макет страницы
@using EFreshStore.Models.Context
@using EFreshStore.Models.Context
@{
List<OrderDetail> orderDetails =new List<OrderDetail>();
int countItem = 0;
string totalAmount = "0";
if (Session["OrderDetails"] != null)
{
orderDetails = (List<OrderDetail>)Session["OrderDetails"];
countItem = orderDetails.Count;
totalAmount=orderDetails.Sum(c => c.Price).ToString();
}
List<ProductUnit> productUnits = (List<ProductUnit>)Session["ProductUnit"];
}
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
</head>
<body class="home-one">
<div class="header-chart">
<ul class="list-inline">
<li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
<li class="chart-li">
<a href="#">My cart</a>
<ul>
<li>
<div class="header-chart-dropdown">
@if (orderDetails!= null)
{
foreach (var item in orderDetails)
{
<div class="header-chart-dropdown-list">
<div class="dropdown-chart-left floatleft">
@foreach (var units in productUnits)
{
if (units.ProductId == @item.ProductId)
{
<a href="#"><img src="~/@units.ProductImages.FirstOrDefault().ImageLocation" width="60px" height="60px"alt="cart"></a>
}
}
</div>
<div class="dropdown-chart-right">
<h2 class="shopItemTitle">
<a href="#">@item.Product.Name</a>
</h2>
<h3>Qty: @item.Quantity</h3>
<h4>৳ @item.Price</h4>
</div>
</div>
}
}
<div class="chart-checkout">
<p>subtotal<span>৳ @totalAmount</span></p>
<button type="button" onclick="window.location.href ='/Order/Cart'" class="btn btn-default">Chckout</button>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">@countItem items</a></li>
</ul>
</div>
</body>
</html>
Корзина находится на странице макета.
Я создал функцию события нажатия кнопки, чтобы получить данные.
Затем сделайте еще одну функцию, чтобы добавить товары в корзину
Это возможно на этой функции AJAX?