C#•2y ago

❔ Help needed to fix ASP.NET syntax errors

Hi all, I'm currently doing a project for ecommerce site, and have encountered multiple bugs while debugging and have been stuck on it as i'm not sure how to fix them.
The issue is with the check out page, the quantity toggle buttons work ok but the trash can to delete each row and 'remove all' button which deletes everything in the cart at the top doesnt work. when i tried debugging, these are the errors shown (Apologies if context is not set very clear as i am super new to ASP.NET):

cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31  Uncaught ReferenceError: carts is not defined
    at removeAll (cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31:14)
    at HTMLUnknownElement.onclick (CartList:69:70)
removeAll @ cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31
onclick @ CartList:69
cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:26  Uncaught ReferenceError: carts is not defined
    at removeRow (cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:26:14)
    at HTMLImageElement.onclick (CartList:103:215)

cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31  Uncaught ReferenceError: carts is not defined
    at removeAll (cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31:14)
    at HTMLUnknownElement.onclick (CartList:69:70)
removeAll @ cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:31
onclick @ CartList:69
cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:26  Uncaught ReferenceError: carts is not defined
    at removeRow (cart.js?v=Ms174dTiHCVhvUXchgzzipQGl6qy_xRKYaz8GGYX9u4:26:14)
    at HTMLImageElement.onclick (CartList:103:215)

3 Replies

moshimoshiOP•2y ago

Here's my code in the js file:

function removeRow(index) {
    $('input[name="quantity[' + index + ']"]').val(0);
    updatePrice(carts, index); //removerow of each item in cart
}

function removeAll() {
    $('input[name^="quantity"]').val(0);
    updatePrice(carts, -1);
} //removeall items in cart

function updatePrice(carts, index) {
    var quantity = parseInt($('input[name="quantity[' + index + ']"]').val());
    var price = carts;
    var total = quantity * price;
    $('#totalPrice_' + index).text(total.toFixed(2));
    var hiddenInputProductItemId = document.getElementById(index).value; 
    var hiddenIputCustomerId = document.getElementById("hidden-customer-id").value;
    onLoadData(index, quantity, total, hiddenInputProductItemId, hiddenIputCustomerId);
}

function removeRow(index) {
    $('input[name="quantity[' + index + ']"]').val(0);
    updatePrice(carts, index); //removerow of each item in cart
}

function removeAll() {
    $('input[name^="quantity"]').val(0);
    updatePrice(carts, -1);
} //removeall items in cart

function updatePrice(carts, index) {
    var quantity = parseInt($('input[name="quantity[' + index + ']"]').val());
    var price = carts;
    var total = quantity * price;
    $('#totalPrice_' + index).text(total.toFixed(2));
    var hiddenInputProductItemId = document.getElementById(index).value; 
    var hiddenIputCustomerId = document.getElementById("hidden-customer-id").value;
    onLoadData(index, quantity, total, hiddenInputProductItemId, hiddenIputCustomerId);
}

Some snippets of the cshtml file:

@{
    List<Cart> carts = ViewBag.Carts;
    decimal price;
    decimal? tprice = 0;
}

<div><h8 class="removeall" onclick="removeAll()">Remove all</h8></div>

@for (int i = 0; i < carts.Count; i++)
                        {
                            var totalprice = carts[i].price * carts[i].quantity;
                            carts[i].totalprice = totalprice;
                            tprice += totalprice;

<img class="trash_icon" onclick="removeRow(@carts[i].price,@i)" src="https://www.freeiconspng.com/uploads/trash-can-icon-24.png" width="30" height="30" alt="Icon Drawing Trash Can" />
                                    </div>
                                    <p class="subtotal">Subtotal: $<span id="totalPrice_@i">@carts[i].totalprice</span></p>

@{
    List<Cart> carts = ViewBag.Carts;
    decimal price;
    decimal? tprice = 0;
}

<div><h8 class="removeall" onclick="removeAll()">Remove all</h8></div>

@for (int i = 0; i < carts.Count; i++)
                        {
                            var totalprice = carts[i].price * carts[i].quantity;
                            carts[i].totalprice = totalprice;
                            tprice += totalprice;

<img class="trash_icon" onclick="removeRow(@carts[i].price,@i)" src="https://www.freeiconspng.com/uploads/trash-can-icon-24.png" width="30" height="30" alt="Icon Drawing Trash Can" />
                                    </div>
                                    <p class="subtotal">Subtotal: $<span id="totalPrice_@i">@carts[i].totalprice</span></p>

Any help would be really appreciated. Thanks!

Angius•2y ago

Been ages since I used jQuery, but isn't the error message obvious? carts does not exist

@{
    List<Cart> carts = ViewBag.Carts;
    decimal price;
    decimal? tprice = 0;
}

@{
    List<Cart> carts = ViewBag.Carts;
    decimal price;
    decimal? tprice = 0;
}

this is C# code JS has no access to it whatsoever It runs only ever on the server side and then disappears A quick and dirty solution would be

<script>
    const carts = '@ViewBag.Carts'
</script>

<script>
    const carts = '@ViewBag.Carts'
</script>

before you include the script that uses the carts variable Now, that is of course assuming ViewBag.Carts can be turned into a sane string It might as well return a System.Collections.Generic.Dictionary<System.String, System.Object> So you might want to look into serializing it to JSON (also might want to look into not using ViewBag)

Accord•2y ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Help needed to fix ASP.NET syntax errors