Dynamically reflect total and quantity amount

I’m having trouble getting the products quantity to reflect the total amount in the razor page. I want the client have the ability to add/remove products when they’re in the cart to dynamically change the quantity of it instead of repeatedly removing said product one by one. The closest I got it to work is to have the on click for the input to detect but obviously as it is written I don’t have the ability to decrease the product by one or how many they want to change. I have tried onchange but nothing seems to work on that onchange event. Also the total does not reflect the current amount as it should. To my understanding the way it is written should reflect the new total with this ajax query call (See photos below). Here is the code that follows:

Cart.cshtml

@using Project.ViewModel
@model CartsViewModel

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Product Name</th>
                <th scope="col">Quantity</th>
                <th scope="col">Price</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            @foreach(Cart items in @Model.CartItems)
            {
                <tr>
                    <td>@items.Product.ProductName</td>
                    <td><input type="number" data-id="@items.ProductId" class="product-amount" value="@items.Count" /></td>
                    @* <td><input type="number" data-id="@items.ProductId" class="product-amount" value="@items.Count" onchange="amountChange(this)"/></td> *@
                    <td>$@items.Product.Price ea.</td>
                    <td>
                        <a class="btn btn-primary" asp-controller="ShoppingCart" asp-action="RemoveFromCart" asp-route-id="@items.ProductId">Remove</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col">
        <h6 class="text-end">Total: $@Model.Total</h6>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script>

    var productAmount = document.getElementsByClassName('product-amount')

    for(var prod in productAmount){
        productAmount[prod].onclick = function(data){
            var productId = $(this).attr("data-id");
            if(productId != ''){
                $.post("/ShoppingCart/AddToCart", {"id": productId},
                function(data){
                    console.log("Add to Cart Successful")
                })

                $.get("/ShoppingCart/Cart", function(data, status){
                    console.log(data)
                    console.log(status)
                })
            }
        }
    }
</script>

As reference for the of the controller

ShoppingCartController.cs

public async Task<IActionResult> Cart()
{
    CartsViewModel cart = new CartsViewModel();
    ShoppingCartId = GetCartID();
    decimal total = GetCartTotal();

    cart.CartItems = await _dbContext.Carts.Where(c => c.CartId == ShoppingCartId).Include(p => p.Product).ToListAsync();
    cart.Total = Convert.ToDouble(String.Format("{0:0.00}", total)).ToString();

    return View(cart);
}

This is the amount before the change.

This is the amount changed by one but total remains the same.

You need to sign in to view this answers