当我在 asp.net mvc 中使用 javascript 单击按钮时，我无法将产品添加到购物车
[英]I cannot add a product to cart when I click the button using javascript in asp.net mvc
问题描述
When I try clicking on the add to cart button, it won't add to my cart.
当我尝试单击添加到购物车按钮时，它不会添加到我的购物车中。 I don't know how to fix this.我不知道如何解决这个问题。 Is the code missing something important?代码是否缺少重要的东西？ I want it so that when I click on "add to cart" a product will be added so that it will appear in the shopping cart as an item added.我想要它，以便当我单击“添加到购物车”时，将添加一个产品，以便它作为添加的项目出现在购物车中。
View and Javascript codes for the cart查看购物车的 Javascript 代码
@model PagedList.IPagedList<E_Game.ViewModel.ShopVM>
@using PagedList
@using PagedList.Mvc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>User Page</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<link href="~/Content/navbar.css" rel="stylesheet" />
<link href="~/Content/user.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div style=" text-align:center; font-family:Arial; margin-left:177px; margin-top:-10px;font-size:20px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="float: right; background-color: #fff; float: left; width: 100%; color: #1a1a1a;" class="navbar-collapse collapse">
<p style="text-align:center; margin-bottom:-100px;font-size:50px; font-family:Verdana"> SAVAGE GAME</p>
</div>
</div>
</div>
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>
@if (Session["CartCounter"] == null)
{
@Html.ActionLink("Cart", "ShoppingCart", "User", new { id = "cartItem" }) }
else
{
@Html.ActionLink("Cart(" + Session["CartCounter"] + ")", "ShoppingCart", "User", new { id = "cartItem" });
}
</li>
</ul>
<div class="sidebar-container">
<div style="text-align:center;" class="sidebar-logo">
<img style="margin-left:-20px;height:70px; width:200px" src="~/Images/konsol.jpg" />
</div>
<ul class="sidebar-navigation">
<li class="header">Navigation</li>
<li>
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i> Homepage
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tachometer" aria-hidden="true"></i> About
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tachometer" aria-hidden="true"></i> Contact
</a>
</li>
<li class="header">Shopping</li>
<li>
<a href="#">
<i class="fa fa-users" aria-hidden="true"></i> Categories
</a>
</li>
<li>
<a href="#">
<i class="fa fa-cog" aria-hidden="true"></i> Products
</a>
</li>
<li class="header">Settings</li>
<li>
<a href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> User
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> Log Out
</a>
</li>
</ul>
</div>
<div class="content-container">
<div class="container-fluid">
</div>
<div class="olContent f1"><h2 style="color:black">Search Product/Category</h2></div>
<div class="olSearch fr">
<input type="text" placeholder="Enter Keyword" name="searchKey" class="inputComn houseText form-control" />
<div class="searchIcon">
<button type="button" class="searchBtn">
<img src="~/Images/searchIcon.png" />
</button>
</div>
<!-- Main component for a primary marketing message or call to action -->
<div style="background-color:white; " class="jumbotron">
@foreach (var item in Model)
{
<div class="col-md-2" style="border:1px solid black; margin:15px; width:200px;">
<div style="text-align:center; border-bottom: 1px dashed solid; ">
<h4> @item.ProductName</h4>
</div>
<div>
<div class="col-md-10" style=" margin-left:-10px">
<img src="@Url.Content(item.Image)" width="150" height="250" />
<div style="text-align:center; margin-top:15px;">
<a style=" margin-left:35px">@item.Price.ToString("#,## $")</a>
<br />
<a style="margin-left:35px;">@Html.ActionLink("Description", "Description", "Shop")</a>
<br />
<div style="float:left; font-size:7px; color:#65a0c9;">
//add to cart button
<button type="button" name="AddToCart" value="Add To Cart" class="btn btn-primary" itemid="@item.ProductId" id="btnAddToCart" onclick="AddToCart(this)">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>}
<br />
<br />
<br />
<div style="float:left; margin-top:450px; margin-left:-650px; ">
@Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page }))
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function AddtoCart(item) {
var ProductId = $(item).attr("itemid");
var formData = new FormData();
formData.append("ProductId", itemid);
$.ajax(
{
async: true,
type: 'POST',
contentType: false,
processData: false,
data: formData,
url: '/User/Index',
success: function (data) {
if (data.Success) {
$("#CartProduct").text("Cart(" + data.Counter + ")");
}
},
error: function () {
alert("We can not added your product.");
}
});
}
</script>
My controller for creating adding to the cart event and index我的 controller 用于创建添加到购物车事件和索引
using E_Game.Models;
using E_Game.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using PagedList.Mvc;
using PagedList;
using E_Game.Repository;
using System.Data.SqlClient;
using Newtonsoft.Json;
namespace E_Game.Controllers
{
public class UserController : Controller
{
// GET: User
// GET: Shop
GameSalesSystemEntities db = new GameSalesSystemEntities();
private GameSalesSystemEntities objgameSalesSystemEntities;
List<ShoppingCartModel> listofShoppingCartModels;
public UserController()
{
objgameSalesSystemEntities = new GameSalesSystemEntities();
listofShoppingCartModels = new List<ShoppingCartModel>();
}
public ActionResult Index(int page = 1)
{
IEnumerable<ShopVM> listOfShopVMs = (from objProduct in objgameSalesSystemEntities.Products
join objCategory in objgameSalesSystemEntities.Categories
on objProduct.CategoryId equals objCategory.CategoryId
select new ShopVM()
{
Image = objProduct.Image,
ProductName = objProduct.ProductName,
PDescription = objProduct.PDescription,
Price = objProduct.Price,
ProductId = objProduct.ProductId,
Category = objCategory.CategoryName,
ProductCode = objProduct.ProductCode
}).ToList().ToPagedList(page, 8);
return View(listOfShopVMs);
}
[HttpPost]
public JsonResult Index(string ProductId)
{
ShoppingCartModel objShoppingCartModel = new ShoppingCartModel();
Products objProduct = objgameSalesSystemEntities.Products.Single(model => model.ProductId.ToString() == ProductId);
if (Session["CartCounter"] != null)
{
listofShoppingCartModels = Session["CartProduct"] as List<ShoppingCartModel>;
}
if (listofShoppingCartModels.Any(model => model.ProductId == ProductId))
{
objShoppingCartModel = listofShoppingCartModels.Single(model => model.ProductId == ProductId);
objShoppingCartModel.Quantity = objShoppingCartModel.Quantity + 1;
objShoppingCartModel.Total = objShoppingCartModel.Quantity * objShoppingCartModel.UnitPrice;
}
else
{
objShoppingCartModel.ProductId = ProductId;
objShoppingCartModel.Image = objProduct.Image;
objShoppingCartModel.ProductName = objProduct.ProductName;
objShoppingCartModel.Quantity = 1;
objShoppingCartModel.UnitPrice = objProduct.Price;
objShoppingCartModel.Total = objProduct.Price;
listofShoppingCartModels.Add(objShoppingCartModel);
}
Session["CartCounter"] = listofShoppingCartModels.Count;
Session["CartProduct"] = listofShoppingCartModels;
return Json(new { Success = true, Counter = listofShoppingCartModels.Count }, JsonRequestBehavior.AllowGet);
}
public ActionResult ShoppingCart()
{
listofShoppingCartModels = Session["CartProduct"] as List<ShoppingCartModel>;
return View(listofShoppingCartModels);
}
}
}
1 个解决方案
解决方案1
0 2021-02-10 00:53:04
There are a number of errors in your JavaScript code.您的 JavaScript 代码中有许多错误。
Firstly, you are setting the button's onclick attribute to AddToCart(this) , but in your JavaScript code, the function is called AddtoCart (with a lowercase t).首先，您将按钮的 onclick 属性设置为AddToCart(this) ，但在您的 JavaScript 代码中， AddtoCart称为小写。
Secondly, you have created a variable called ProductId in the line:其次，您在该行中创建了一个名为ProductId的变量：
var ProductId = $(item).attr("itemid");
but are instead referencing a variable called itemid (which doesn't exist) later on:但是稍后会引用一个名为itemid的变量（它不存在）：
formData.append("ProductId", itemid);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击删除按钮时如何处理 ASP.NET MVC3 中的 JavaScript - How to handle JavaScript in ASP.NET MVC3 when I click the delete button
如何将JavaScript添加到ASP.NET MVC视图？ - How do I add JavaScript to an ASP.NET MVC View?
为什么在单击使用JavaScript的输入按钮时，我的asp.net页已刷新？ - Why on click of a input button using JavaScript i am getting my asp.net page refreshed?
Asp.net MVC 在按钮点击时运行 javascript - Asp.net MVC run javascript on button click
ASP.NET MVC Button.Click不适用于javascript - ASP.NET MVC Button.Click Not working with javascript
在 ASP.net MVC 5 应用程序中单击按钮时使用 JavaScript/jQuery 将用户重定向到页面 - Redirect user to a page using JavaScript/jQuery on button click in ASP.net MVC 5 application
当我使用JQuery（event.preventDefault方法）停止它时按钮点击刷新页面 - Asp.Net MVC - Page is refreshing on button click while I'm stoping it using JQuery (event.preventDefault method) - Asp.Net MVC
MVC ASP.Net Javascript-如果Url没有ID，如何使用JavaScript函数隐藏按钮 - MVC ASP.Net Javascript - How do I use a javascript function to hide a button if Url has no id
使用Javascript或Jquery在asp.net中的按钮单击上禁用Imagebutton - Disable Imagebutton on button click in asp.net using Javascript or Jquery
JavaScript单击Asp.net输入Enter呼叫按钮提交 - JavaScript click enter call button submit using Asp.net
相关标签