Part-12: eCommerce Product Add to Shopping Cart in ASP.NET MVC

9/19/2019 12:00:00 AM

Step-1

In this tutorial we work with cart the product. When we buy the product then the product show in top in dropdown and show how many product we want to buy. Now Open the project where we are working. Here we are going to some changes in our existing _Layout.cshtml page to showing the added product list. In this view we add list. This list show the cart the product and product amount . Given Bellow the layout code:

@using OnlineShoppingStore.Models.Home;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @*@Styles.Render("~/Content/css")*@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/MyMainLayOut.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
 
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <div class="logo">
                  <h1><a href="#">Online <span>Shopping Store</span></a></h1>
                    <p>My Shop</p>
                </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-6">
                @*<div class="account">
                   <ul>
                       <li>
                           <div class="hidden-xs">
                               <h4><a>Call</a></h4>
                               <p>018##-######</p>
                           </div>

                           <div class="visible-xs">
                              
                               <p>018##-######</p>
                           </div>
                          
                       </li>
                   </ul>
                   
                </div>*@
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Cart(3) <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @if (Session["cart"] != null)
                            {
                                foreach (Item item in (List<Item>)Session["cart"])
                                {
                                    <li><a href="#">@item.Product.ProductName (@item.Quantity)</a></li>
                                }
                            }
                            <li class="divider"></li>
                            <li><a href="#">IT</a></li>
                        </ul>
                    </li>
                </ul>
            </div> 
            </div>
            <div class="row">

                <div class="col-md-12">
                    <div class="nav-menus">
                       
                        <ul class="nav nav-pills">
                            <li class="active"><a style="border-radius:initial;" href="#">Home</a></li>
                            <li ><a style="border-radius:initial;" href="#">Location</a></li>
                            <li ><a  style="border-radius:initial;" href="#">About</a></li>
                        </ul>
                    </div>
                </div>

            </div>
          
        
        @RenderBody()
        <hr />
        <footer>
            <div class="row">
                <div class="col-md-12 copyright">
                    
                    <div class="col-md-6 col-sm-6 copyright-left">
                        <p>&copy; @DateTime.Now.Year - OnlineShopingStore. All right reserved.</p>
                    </div> 

                    <div class="col-md-6 col-sm-6 copyright-right">
                       
                        <ul class="list-unstyled list-social">
                            <li><a href="#" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                           
                        </ul>
                    </div> 
                </div>
            </div>
            
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Step-2

This index view code is show the product name and price. when some one bye the product then this product informetion post the under controller AddToCart method then this method product informetion push the list and show the cart view in top. Given Bellow the Index View Code:


@model OnlineShoppingStore.Models.Home.HomeIndexViewModel
@using PagedList;
@using PagedList.Mvc;
@{
    ViewBag.Title = "Home Page";
}

<div id="themeSlider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#themeSlider" data-slide-to="0" class="active"></li>
        <li data-target="#themeSlider" data-slide-to="1"></li>
        <li data-target="#themeSlider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/4_03_21_2017_08_23_17.jpg" alt="First slide">
            <div class="carousel-caption">
                <h3>New</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/3_03_21_2017_08_19_28.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h3>My Phone</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/2_03_21_2017_08_15_59.jpg" alt="Third slide">
            <div class="carousel-caption">
                <h3>Latest</h3>
                
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#themeSlider" data-slide="prev">
        <span class="fa fa-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#themeSlider" data-slide="next">
        <span class="fa fa-chevron-right"></span>
    </a>
   
</div>
<div class="olContent f1"><h2 style="color:black">Search Product/Category</h2></div>
<form method="post">
    <div class="olSearch fr">
        <input type="text" name="search" placeholder="Enter Keyword" class="inputComn form-control" />
        <div class="searchIcon">
            <button type="submit" class="searchBtn">
                <img src="~/Images/searchIcon.png" />
            </button>
        </div>
    </div>
</form>


<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h2>Our Producrs <small>trends products</small></h2>
        </div> 
    </div>
</div>

<div class="row product-container">
    @foreach (var item in Model.ListOfProducts)
    {
        <div class="col-md-3 col-sm-3 col-xs-6" style="margin-bottom:8px">
            <div class="thumbnail product-item" style="height:300px">

                <img class="img-responsive" title="Click to View Product detail"
                     style="cursor:pointer;height:160px;width:100%"
                     src="~/ProductImg/@item.ProductImage" />

                <div class="caption">
                    <h5>@item.ProductName</h5>
                    <p>@item.Price ৳.</p>
                    <p>
                        @if (item.Quantity > 0)
                        {
                            using (Html.BeginForm("AddToCart", "Home", new { productId = item.ProductId }, FormMethod.Post))
                            {
                                <button type="submit" class="pull-right"><i class="fa fa-shopping-cart"></i></button>
                            }
                            <p>Available</p>
                        }
                        else
                        {
                            <p>Not Available</p>
                        }
                    </p>
                    <div class="product-item-badge">
                        @if (item.IsFeatured==true)
                        {
                            <p>New</p>

                        }
                        else
                        {
                            <p>Old</p>
                        }
                    </div>
                </div>
            </div>
        </div>
    }
  
    
</div>
<div class="container">
    @Html.PagedListPager(Model.ListOfProducts, page => Url.Action("Index", new { page, search = Request.QueryString["search"] }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayItemSliceAndTotal = true })
</div>

Step-3

Create a class in model folder. This model is given the product name and quantity. By this model using create list into AddToCart method for create product list. Given bellow source code:

using OnlineShoppingStore.DAL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace OnlineShoppingStore.Models.Home
{
    public class Item
    {
        public Tbl_Product Product { get; set; }
        public int Quantity { get; set; }
    }
}

Step-4

This controller have "AddToCart()" method. This method are done the work by first create "dbMyOnlineShoppingEntities ". class object name as ctx. In this AddToCart controller first create list then Assgin the product. Bye product Assgin into list then show and pass the list by using Session. Given Bellow the Controller code:

using Newtonsoft.Json;
using OnlineShoppingStore.DAL;
using OnlineShoppingStore.Models;
using OnlineShoppingStore.Models.Home;
using OnlineShoppingStore.Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace OnlineShoppingStore.Controllers
{
    public class HomeController : Controller
    {
        dbMyOnlineShoppingEntities ctx = new dbMyOnlineShoppingEntities();
        public ActionResult Index(string search,int? page)
        {
            HomeIndexViewModel model = new HomeIndexViewModel();
            return View(model.CreateModel(search,4, page));
        }

        public ActionResult AddToCart(int productId)
        {
            if (Session["cart"] == null)
            {
                List<Item> cart = new List<Item>();
                var product = ctx.Tbl_Product.Find(productId);
                cart.Add(new Item()
                {
                    Product = product,
                    Quantity = 1
                });
                Session["cart"] = cart;
            }
            else
            {
                List<Item> cart = (List<Item>)Session["cart"];
                var product = ctx.Tbl_Product.Find(productId);
                cart.Add(new Item()
                {
                    Product = product,
                    Quantity = 1
                });
                Session["cart"] = cart;
            }
            return Redirect("Index");
        }
       
    }
}

Step-5

Now run the project.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

0 Comments

AngularJS

27 Articles