Part-13: eCommerce Product Remove from Shopping Cart in ASP.NET MVC

9/21/2019 12:00:00 AM

Step-1

In this tutorial we solve the quantity problem and remove the already add product from the cart. Now Open visual studio and open the project where we are working. Now first we solve the quantity problem. When we cart the same product again and again then product name will be same but product quantity is change. In this controller use the list to add product but whan product name is same then increment the quantity. Here we are going to add method “RemoveFromCart”. This RemoveFromCart method receive the productId peramitar then it remove a product from the list. Given bellow the source code:

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);
                foreach (var item in cart)
                {
                    if (item.Product.ProductId == productId)
                    {
                        int prevQty = item.Quantity;
                        cart.Remove(item);
                        cart.Add(new Item()
                        {
                            Product = product,
                            Quantity = prevQty+1
                        });
                        break;
                    }
                    else
                    {
                        cart.Add(new Item()
                        {
                            Product = product,
                            Quantity = 1
                        });
                    }
                }
                Session["cart"] = cart;
            }
            return Redirect("Index");
        }
        public ActionResult RemoveFromCart(int productId)
        {
            List<Item> cart = (List<Item>)Session["cart"];
            foreach (var item in cart)
            {
                if (item.Product.ProductId == productId)
                {
                    cart.Remove(item);
                    break;
                }
            }
            Session["cart"] = cart;
            return Redirect("Index");
        }
    }
}

Step-2

Here we are going to some changes in our existing _Layout.cshtml page to showing the added product list. when remove button are click then selected product are remove from the list and show the view. Layout source 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="@Url.Action("RemoveFromCart", "Home", new { productId=item.Product.ProductId})">@item.Product.ProductName (@item.Quantity) <i class="fa fa-times"></i></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-3

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