Question

我在“我的产品详细信息”视图中创建了一个下拉列表，其中包含5个硬编码值（1,2,3,4,5），当我选择我想要的值时，然后将其传递到AddToCartWithQuantity方法中。当我点击添加到购物车按钮时，ShoppingCart控制器然后进入购物车模型的同名方法但是当我将商品添加到购物车时，数量显示为0。

我的产品详情查看：

@model BigVisionGames.Models.Products

@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3>Product:  @Model.ProductName</h3>

<div id="product-details">
<p>
    <em>Price: </em>
    £@($"{Model.Price:F}")
</p>

<div style="color:black">
    @Html.DropDownListFor(model => model.ChosenQuantity, new 
List<SelectListItem>
 {
            new SelectListItem{ Text="1", Value = "1" },
            new SelectListItem{ Text="2", Value = "2" },
            new SelectListItem{ Text="3", Value = "3" },
            new SelectListItem{ Text="4", Value = "4" },
            new SelectListItem{ Text="5", Value = "5" }
        })

    @Html.ValidationMessageFor(model => model.ChosenQuantity, "", new { @class = "text-danger" })
</div>

@if (Model.StockLevel == 0)
{
    <p style="color:red">This item is currently out of stock!</p>
}
else
{
    <p class="btn">
        @Html.ActionLink("Add to cart", "AddToCartWithQuantity", "ShoppingCart", new { id = Model.Id}, "")
    </p>
}

ShoppingCartController方法

        public ActionResult AddToCartWithQuantity(int id, Products productModel)

    {

        // Retrieve the product from the database
        var addedproduct = storeDB.Products
            .Single(product => product.Id == id);

        // Add it to the shopping cart
        var cart = ShoppingCart.GetCart(this.HttpContext);

        cart.AddToCartWithQuantity(addedproduct, productModel.ChosenQuantity);

        // Go back to the main store page for more shopping
        return RedirectToAction("Index");
    }

ShoppingCart用于设置所选数量的模型方法

public void AddToCartWithQuantity(Products product, int chosenQuantity)
    {
        // Get the matching cart and product instances
        var cartItem = storeDB.Carts.SingleOrDefault(
            c => c.CartId == ShoppingCartId
                 && c.ProductId == product.Id);

        if (cartItem == null)
        {
            // Create a new cart item if no cart item exists
            cartItem = new Cart
            {
                ProductId = product.Id,
                CartId = ShoppingCartId,
                Quantity = chosenQuantity,
                DateCreated = DateTime.Now
            };
            storeDB.Carts.Add(cartItem);
        }
        else
        {
            // If the item does exist in the cart, 
            // then add one to the quantity
            cartItem.Quantity++;
        }

        // Save changes
        storeDB.SaveChanges();
    }

Answer 1

您当前的代码正在呈现一个锚标记，然后单击该标记将执行具有查询字符串中的ID的GET请求。如果要从数量下拉列表中发送所选值，则需要阅读并发送它。

首先更新您呈现链接的代码，以便为Id标记创建a属性，我们稍后可以在javascript中使用该属性来覆盖默认的点击行为。

@Html.ActionLink("Add to cart", "AddToCartWithQuantity", "ShoppingCart",
                                  new { id = Model.Id },new { id = "addToCart" } )

这将呈现标识为addToCart

的锚标记

现在你可以使用一些javascript来监听这个锚标记上的click事件，防止默认行为（导航到目标url）并发送我们想要的数据。这是一个做ajax帖子的例子

$(function (){

    $("#addToCart").click(function (e){
        e.preventDefault();
        var url = $(this).attr("href");
        url = url + '?chosenQuantity=' + $("#ChosenQuantity").val();
        $.post(url).done(function (res){
            if (res.status === "success")
            {
                //update cart UI
                alert(res.cartItemCount);
            }
        });

    });

});

现在我们正在进行ajax提交，让我们返回一个状态为cartItemCount的JSON响应。我们的js代码正在检查它以查看ajax调用done事件中的操作是否成功。此外，由于我们只需要Id和数量，因此您无需使用Product实体作为参数。对int

使用简单的Id类型

[HttpPost]
public ActionResult AddToCartWithQuantity(int id, int chosenQuantity)
{
    // Your existing code to save. Use id to get the product
    // to do  :replace the hard coded 1 with actual value from db
    return Json(new { status = "success", cartItemCount = 1 });
}

另一种选择是进行表单提交。在这种情况下，将表单元素中的SELECT和链接换行（将其操作设置为/ShoppingCart/AddToCartWithQuantity）并在单击链接时执行表单提交。

<form action='@Url.Action("AddToCartWithQuantity","ShoppingCart")' method='post'>
  <!-- SELECT and Link goes here-->
</form>

，脚本将是

$(function (){

    $("#addToCart").click(function (e){
        e.preventDefault();
        $(this).closest("form").submit();    
    });

});

由于我们的代码正在进行完整的表单提交，请确保您的操作方法返回重定向结果。

[HttpPost]
public ActionResult AddToCartWithQuantity(NewProjectModel product, int chosenQuantity)
{
    // Your existing code to save
    return RedirectToAction("Index","ShoppingCart");
}

MVC 5下拉列表值未传入控制器

1 个答案: