First I used model in a view and created a table with it by using Foreach.

In that table I keep quantity of products with Input.

My question is , I want to change all the input values added into the table then submit it. After that update all the quantities in that cart.

Image you are in a shopping website and added a product into cart. Then opened the cart page and wanted to change the quantities.

How can I do that ?

YOU CAN SEE PAGE HERE

NORMALLY I USE THIS ACTION TO ADD A PRODUCT INTO CART

    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Product</th>
                                <th>Price</th>
                                <th class="qtycolumn">Quantity</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            @{int value = 1;}
                            @foreach (var item in Model.Products)
                            {
                                { value  ; }
                                <tr>
                                    <td><img alt="" class="img-responsive product-thumb" src="images/products/tn/@item.Product.Image"></td>
                                    <td><a href="#">@item.Product.ProductName</a></td>
                                    <td>@item.Product.Price.ToString("c")</td>
                                    <td>
                                        <div class="form-group">
                                                <input type="hidden" value="@item.Product.ProductID" />
                                                <input type="number" class="form-control" value="@item.Quantity" min="1" step="1">
                                        </div>
                                    </td>
                                    <td>@((item.Quantity*item.Product.Price).ToString("c"))</td>
                                    <td>
                                        <form asp-action="RemoveFromCart" asp-controller="Cart" method="post">
                                            <input type="hidden" name="ProductId" value="@item.Product.ProductID" />
                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="fa fa-times fa-fw"></i>
                                                Remove
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Hook your Update cart button to a JS event handler, collect the quantity values and send them via AJAX:

This is just a sample of your code (notice I added the data-productId attribute to the input's parent div and the class quantity-input to the quantity input elements).

<table class="table table-hover">
<thead>
    <tr>
        <th></th>
        <th>Product</th>
        <th>Price</th>
        <th class="qtycolumn">Quantity</th>
        <th>Total</th>
        <th></th>
    </tr>
</thead>

<tbody>
    @{int value = 1;}
    @foreach (var item in Model.Products)
    {
        { value  ; }
        <tr>
            <td><img alt="" class="img-responsive product-thumb" src="images/products/tn/@item.Product.Image"></td>
            <td><a href="#">@item.Product.ProductName</a></td>
            <td>@item.Product.Price.ToString("c")</td>
            <td>
                <div class="form-group" data-productId="@item.Product.ProductID">
                        <input type="number" class="form-control quantity-input" value="@item.Quantity" min="1" step="1">
                </div>
            </td>
            <td>@((item.Quantity*item.Product.Price).ToString("c"))</td>
            <td>
                <form asp-action="RemoveFromCart" asp-controller="Cart" method="post">
                    <input type="hidden" name="ProductId" value="@item.Product.ProductID" />
                    <button type="submit" class="btn btn-danger btn-sm">
                        <i class="fa fa-times fa-fw"></i>
                        Remove
                    </button>
                </form>
            </td>
        </tr>
    }
</tbody>
</table>

Then in your JS do something like this:

$("#your-cart-btn-id").click(function(){
  var data = {};
  $(".quantity-input").each(function(index, element){
    var quantity = parseInt($(element).val());
    var id = parseInt($(element).parent().attr("data-productId"));
    if (Number.isInteger(quantity) && Number.isInteger(id)) {
        data[id] = quantity ;
    }
  })

  //Send the data with ajax and parse them on the server-side.
});

The data object can be parsed via a Dictionary<int, int> values on the server-side

I am using jQuery here but if you're not, the conversion won't be difficult.