Download Project  (Full Project)

Step-1

In this tutorial we create two .csHtml for view one is Checkout and another  is “CheckoutDetails”. ChackOut page hold the product details with quantity total quantity also total price. This calculation are work on the fly by using  rezor view engine. Checkout page are related by the payment method. This is the final section to integrate payment get way. Given Bellow the Checkout View code:

@using OnlineShoppingStore.Models.Home;
@{
    ViewBag.Title = "Checkout";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Checkout</h2>
@if (Session["cart"] == null)
{
    <div class="alert alert-danger">
        <strong>No product added to cart!</strong>
    </div>

}
else
{
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Product</th>
                <th>Quantity</th>
                <th>Add</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Item item in (List<Item>)Session["cart"])
            {
                <tr>
                    <td>@item.Product.ProductName</td>
                    <td>@item.Quantity</td>
                    <td>
                        <a href="@Url.Action("AddToCart", "Home", new { productId = item.Product.ProductId, url="Checkout" })">
                            <i class="fa fa-plus"></i>
                        </a>
                        <a href="@Url.Action("DecreaseQty", "Home", new { productId = item.Product.ProductId })">
                            <i class="fa fa-minus"></i>
                        </a>
                    </td>
                </tr>
            }

        </tbody>
    </table>
    <a class="btn btn-success" href="@Url.Action("CheckoutDetails","Home")">Checkout >></a>

}

Step-3

This Checkout details view show the Product, Price, Quantity also show Line Total. This line total calculate on view by using rezor syntax and display on the view. Given Bellow the CheckoutDetails View code:

@using OnlineShoppingStore.Models.Home;
@{
    ViewBag.Title = "CheckoutDetails";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (Session["cart"] == null)
{
    <div class="alert alert-danger">
        <strong>No product added to cart!</strong>
    </div>

}
else
{
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Line Total</th>

            </tr>
        </thead>
        <tbody>
            @{
    int Total = 0;
            }
            @foreach (Item item in (List<Item>)Session["cart"])
            {
                int lineTotal = Convert.ToInt32(item.Quantity * item.Product.Price);
                Total=Convert.ToInt32(@Total+lineTotal);
                <tr>
                    <td>@item.Product.ProductName</td>
                    <td>@item.Product.Price</td>
                    <td>@item.Quantity</td>
                    <td>@lineTotal</td>
                </tr>
            }

            <tr>
                <td colspan="4" class="text-right"><b>Total: @Total</b></td>
            </tr>
        </tbody>
    </table>
    <button class="btn btn-success">Payment >></button>

}

Step-4

Now run the project.