Значение выпадающего списка MVC 5 не передается в контроллер

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

Ваш текущий код отображает тег привязки и нажимает на него, чтобы выполнить запрос 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, давайте вернем JSON-ответ со статусом и свойством cartItemCount. Наш js-код проверяет это, чтобы увидеть, было ли действие успешным в событии ajax call 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");
}