Thumb

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

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 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