connectseekers.com

Monday, 6 October 2014

Shopping Cart Example to Drag and Drop Item in Cart In Asp.Net MVC Using jQuery

10/06/2014 - By Pranav Singh 1

This article will show you how you can provide drag and drop facility for your eCommerce/Shopping  cart website for item using jquery in Asp.net MVC. In this I will show the no of item count in cart using jQuery. This example use in MVC3, MVC4, MVC5.


So for this article first we will create a new asp.net mvc application and in this create a new controller file and add the below code in it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication8.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
    }
}

Now generate the view and add the below code in it.

@{
    ViewBag.Title = "Shopping Cart Example  to Drag and Drop Item in Cart In Asp.Net MVC Using jQuery";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
    #droppable
    {
        width: 150px;
        height: 70px;
        padding: 0.5em;
        float: left;
        margin: 10px;
    }
</style>
<script>
    var totalItem = 0;
    $(function () {
        $(".ui-widget-content").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#cartdroppable").droppable({
            drop: function (event, ui) {
                totalItem = parseInt(totalItem) + 1
                $("#itemcount").html("Item Count: " + totalItem);
            }
        });
    });
</script>
@using (Html.BeginForm("Index", "Home"))
{
    <div id="divfood" style="width: 200px">
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/bananas-icon.png" />
        </div>
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/beer-icon (1).png" />
        </div>
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/Coffee-Cup-icon.png" />
        </div>
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/Piece-of-cake-icon.png" />
        </div>
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/Steak-icon.png" />
        </div>
        <div style="text-align: center; float: left; width: 90px; height: 90px;" class="ui-widget-content">
            <img src="../../Images/strawberry-icon.png" />
        </div>
    </div>
  

    <div id="cartdroppable">
          
        <img src="../../Images/Cart-icon.png" /><br />
          
        <span id="itemcount"></span>
    </div>
}

In above code I have created list of items and provided the common class style to all the item div. This we will provide the property to make the item movable.

Check the below mention jQuery function code.

<script>
    var totalItem = 0;
    $(function () {
        $(".ui-widget-content").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#cartdroppable").droppable({
            drop: function (event, ui) {
                totalItem = parseInt(totalItem) + 1
                $("#itemcount").html("Item Count: " + totalItem);
            }
        });
    });
</script>

In above code I have created the local variable and increased the value as any item in getting added to the cart.

Now we have done run the application and check the output.

DOWNLOAD

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

1 comment:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top