Thumb

Part-15: eCommerce Checkout manage in ASP.NET MVC | Razor | Jquery

Part-0 (introduction ): E-Commerce introduction using asp.net mvc Part-1: Ecommerce website design using Bootstrap | Building an Ecommerce website | ASP.NET MVC Part-2: Ecommerce website design using HTML, CSS, Bootstrap, JavaScript | ASP.NET MVC Part-3: Ecommerce DataBase design in SQL Server | ASP.NET MVC | JQUERY Ajax Json Part-4: Ecommerce website Entity Framework data model integration | ASP.NET MVC | JQUERY Ajax Json Part-5: Repository pattern in eCommerce project | ASP NET MVC | C# Part-6: Ecommerce Dashboard or admin using Bootstrap CSS | ASP.NET MVC Part-7: eCommerce Add and Edit Category into Admin Panel using ASP.NET MVC | Jquery Part-8: eCommerce Add and Edit Product into Admin Panel using ASP.NET MVC | Jquery Part-9: eCommerce Products Load and File upload ASP.NET MVC | Razor Dropdown Part-10: eCommerce Product Search using Store Procedure Entity Framework | ASP.NET MVC Part-11: eCommerce Paging Filtering with Entity Framework using ASP.NET MVC | Razor Paging Part-12: eCommerce Product Add to Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-13: eCommerce Product Remove from Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-14: eCommerce Manage Duplicate Entry Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart Part-15: eCommerce Checkout manage in ASP.NET MVC | Razor | Jquery Part-16: eCommerce PayPal payment gateway integration in ASP.NET MVC|Free payment gateway Part-18(Final): eCommerce PayPal Payment complete using ASP.NET MVC | Payment Gateway in asp.net Part-17: eCommerce PayPal Payment Logic implementation in ASP.NET MVC | using C#

9/21/2019 12:00:00 AM

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.

About Teacher

Image

Reza Karim

Software Engineer

More about him