Post
Ask Question

Shopping Cart in MVC With jQuery

Introduction

As we know, this is the era of Computer Science. Computer Science makes our life much easier. All of us are very familiar with online shopping. I think a person familiar with Computer Science usually uses online shopping because it is very beneficial for us. Online shopping sites are places where many items are available for us and we can purchase those items from there. So online shopping is time-saving and also money-saving compared to going to a market and purchasing a product. So in this article I will simply explain online shopping cart methods and how they work.

Online shopping carts

The simplest and one-line definition of a cart in simple language is a bucket. Yes, a cart is just like a bucket. We choose the items available on online shopping sites and drag and drop those items to our cart. Here a cart tells us how many items you intend to purchase now. I think everyone is very familiar with this concept. It works simply by drag and drop operations. Some websites provide the option to go to the item and there is a button for adding this item to your cart. When you click on this button your item will be added into your cart. So here we will see how to make a cart in MVC for online shopping.

Procedure for making a drag-and-drop-able shopping cart

Step 1

Open your Visual Studio, go to the file menu then go to the new project and the new project and add the new ASP.NET web application.



Step 2

Select the MVC application and click on the OK button.



Step 3

Now you have a Solution Explorer and in the Solution Explorer you have multiple folders like Controllers, Views and many more.



Step 4

Go to the controller folder and add a new controller, here I add an empty controller and named it as the shopping controller.



When we do this then there is an option to please add an empty Controller.



Step 5

When we add the controller to our web project the code of the controller will be similar to the following code.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace shoppingchart.Controllers  
  8. {  
  9.     public class shoppingController : Controller  
  10.     {  
  11.         //  
  12.          // GET: shopping  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.     }  
  19. }  
Step 6

After adding the controller we go to its ActionResult Index method and right-click on it and click on add view.



Step 7

After adding the view to your project add this code to your view.

  1. @{  
  2.     ViewBag.Title = "hi this is shopping cart example";  
  3. }  
  4. <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">  
  5. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  6. <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  
  7. <style>  
  8.     #droppable  
  9.     {  
  10.         width: 400px;  
  11.         height: 150px;  
  12.         padding: 2.0em;  
  13.         float: right;  
  14.         margin: 20px;  
  15.     }  
  16. </style>  
  17. <script>  
  18.     var totalItem = 0;  
  19.     $(function () {  
  20.         $(".ui-widget-content").draggable({  
  21.             appendTo: "body",  
  22.             helper: "clone"  
  23.         });  
  24.         $("#shoppingcart").droppable({  
  25.             drop: function (event, ui) {  
  26.                 totalItem = parseInt(totalItem) + 1  
  27.                 $("#totalitem").html("total item add by you in cart=: " + totalItem);  
  28.                  
  29.             }  
  30.         });  
  31.     });  
  32. </script>  
  33.   
  34.     <div id="items" style="width: 1000px">  
  35.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  36.             <img src="../../Images/tshirt.png" />  
  37.             <br />  
  38.             <b><span>T shirt</span></b>  
  39.         </div>  
  40.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  41.             <img src="../../Images/books.png" />  
  42.           <br />   
  43.             <b><span>Books</span></b>  
  44.         </div>  
  45.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  46.             <img src="../../Images/coldrinks.png" />  
  47.             <br />  
  48.             <b><span>coldrinks</span></b>  
  49.         </div>  
  50.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  51.             <img src="../../Images/crockery.png" />  
  52.             <br />  
  53.             <b><span>Crockery</span></b>  
  54.         </div>  
  55.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  56.             <img src="../../Images/mobile.png" />  
  57.             <br />  
  58.             <b><span>Mobile</span></b>  
  59.         </div>  
  60.         <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  61.             <img src="../../Images/sandels.png" />   
  62.             <br />  
  63.             <b><span>Sandels</span></b>        
  64.     </div>  
  65.   
  66.         <div id="items" style="width: 1000px">  
  67.             <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  68.                 <img src="../../Images/sports.png" />  
  69.                 <br />  
  70.                 <b><span>Sports goods</span></b>  
  71.             </div>  
  72.             <div style="text-align: center; float: left; width: 150px; height: 120px;" class="ui-widget-content">  
  73.                 <img src="../../Images/tv.png" />  
  74.                 <br />  
  75.                 <b><span>Telivisions</span></b>  
  76.             </div>  
  77.        </div>  
  78.   
  79.             <div id="shoppingcart">  
  80.                     
  81.                 <img src="../../Images/cart.png" /><br />  
  82.                     
  83.                 <b><span id="totalitem" style="color:red"></span></b>  
  84.             </div>  
Step 8

When you add the preceding code to the Index view, in the code you have seen also some images with the path. So please add a new folder to your application and name it Images and paste those images into that folder that you have used in your application just like in the following picture.



Step 8

Since here we can see in the view code that we used a script file. This script file is used to count the items that were dropped by you into the cart, here we also used the jQuery for the drag and drop items in our cart. So here we use the two jQuery and one stylesheet file.

  1. <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">  
  2. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  3. <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  
Step 9

Finally when we run our project or web application we see the output like this. Here we can drag and drop two items to the cart so it shows the message that the total number of items added by you to the cart is two, so the output is totally dependant on the items that you dragged and dropped to the cart depending on your needs or requirements.



Output


Summary

In this article we learned how online shopping carts work. As usual whenever we do online shopping there is always a cart available and we choose items from the available items and add those items to our cart. Our cart tells us how many items were chosen by us from the items list. So finally I can say that when online shopping, a shopping cart plays a very vital role from the end users view because it provides the total number of items that have chosen. Some websites also show the price of the items chosen. I think this article will be helpful for you to understand how online shopping carts work and you can easily create a draggable online shopping cart in a MVC application.


Similar Articles