PartsUnlimitedWebsite/Views/ShoppingCart/Index.cshtml

Index.cshtml

@using PartsUnlimited
@model PartsUnlimited.ViewModels.ShoppingCartViewModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@{
    ViewBag.Title = "Shopping Cart";
}

@functions
{
    public string GetAntiXsrfToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

@section Scripts {
    <script type="text/javascript">
        // Document.ready -> link up remove event handler
        $(".remove-link")
            .click(function () {
                // Get the id from the link
                var recordToDelete = $(this).attr("data-id");
                var postToUrl = $(this).attr("data-url");
                if (recordToDelete !== '') {

                    // Start telemetry timer for post
                    if (window.appInsights !== undefined)
                        window.appInsights.startTrackEvent('Remove.Item.' + recordToDelete);

                    // Perform the ajax post
                    var success = function (data) {

                        console.log(data);
                        // Successful requests get here
                        // Update the page elements
                        if (data.cartCount === 0) {
                            $('#cart-summary').hide();
                            $('#cart-count').hide();
                            $('#empty-cart').show();
                        } else {

                            if (data.ItemCount === 0) {
                                $('#row-' + data.deleteId).fadeOut('slow');
                            } else {
                                $('#item-count-' + data.deleteId).text(data.itemCount);
                            }
                        }
                        $('#cart-sub-total').text(data.cartSubTotal);
                        $('#cart-shipping').text(data.cartShipping);
                        $('#cart-tax').text(data.cartTax);
                        $('#cart-total').text(data.cartTotal);
                        $('#update-message').text(data.message);
                        $('#cart-status').text('Cart (' + data.cartCount + ')');
                        $('#cart-count').text(data.cartCount);

                        if (window.appInsights !== undefined)
                            window.appInsights.stopTrackEvent('Remove.Item.' + recordToDelete);
                    };

                    $.ajax({
                        type: 'POST',
                        url: postToUrl,
                        data: { Id: recordToDelete, CancelationToken: '@GetAntiXsrfToken()' },
                        success,
                        headers: {
                            'RequestVerificationToken': '@GetAntiXsrfToken()'
                        }
                    });
                }
            });

    </script>
}
<div id="shopping-cart-page">
    <section>
        <h2>Review your Cart</h2>
        <div id="update-message">
        </div>
        @if (Model.CartCount > 0)
        {
            <div id="cart-summary">
                <div class="hidden-xs cart-summary-header">
                    <div class="row">
                        <div class="col-sm-8 col-md-8 no-gutter-md-left no-gutter-sm-left">Product Description</div>
                        <div class="col-sm-2 col-md-2 text-center">Quantity</div>
                        <div class="col-sm-2 col-md-2 text-center">Price</div>
                    </div>
                </div>

                @foreach (var item in Model.CartItems)
                {
                    <div id="row-@item.CartItemId" class="cart-item">
                        <div class="row">
                            <div class="col-xs-1 no-gutter-xs-right text-center-xs col-sm-2 col-sm-push-8 text-center-sm">
                                <div class="item-label item-inventory">@item.Count</div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-sm-pull-2 col-md-2"><img src="/images/@item.Product.ProductArtUrl" /></div>
                            <div class="col-xs-6 col-sm-2 col-sm-push-5 text-center-sm col-md-push-6">
                                <div class="visible-xs item-label">@item.Product.Title</div>
                                <div class="item-price">@item.Product.Price.ToString("C")</div>
                            </div>
                            <div class="visible-xs col-xs-2 text-right no-gutter-xs-left">
                                <a href="#" class="remove-link" data-id="@item.CartItemId"
                                   data-url='@Url.Content("~/ShoppingCart/RemoveFromCart")'>
                                    <img src="/images/remove_icon.png"/> 
                                </a>
                            </div>
                            <div class="col-xs-12 col-sm-5 col-sm-pull-4 col-md-6 description">
                                <div class="hidden-xs">
                                    <strong>@Html.ActionLink(item.Product.Title, "Details", "Store", new { id = item.ProductId }, null)</strong>
                                </div>
                                <div class="visible-xs item-label">Description</div>
                                <p class="text-content">@item.Product.Description</p>
                            </div>
                            <div class="hidden-xs remove-cart-item">
                                <a href="#" class="remove-link btn" data-id="@item.CartItemId"
                                   data-url='@Url.Content("~/ShoppingCart/RemoveFromCart")'>
                                    Remove
                                </a>
                            </div>
                        </div>
                    </div>
                }

                <partial name="_OrderCostSummary", for="OrderCostSummary" />
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
                        <div>
                            @Html.ActionLink("Checkout", "AddressAndPayment", "Checkout", null, new { @class = "btn pull-right checkout" })
                        </div>
                    </div>
                </div>
            </div>
        }
        <h4 id="empty-cart" @if (Model.CartCount > 0) { <text> style="display: none;" </text>   }>
            Your cart is currently empty
        </h4>
    </section>
</div>