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.
Some of my previous articles are as follows: jQuery
Ajax Cascaded DropdownList in Asp.net MVC Using C#.Net, Password
Strength Validation in Asp.net MVC Using jQuery, Bind
jQuery DatePicker Calendar In MVC WebGrid and Retrive Value Using Asp.net MVC,
C#.Net, Resizable
Gridview Using jQuery in Asp.Net, jQuery
Code to Select All Text in TextBox on Click in Asp.Net, jQuery
Dialog Box Open On Button Click In Asp.Net, jQuery
Datepicker Calendar Open On Image Button Click in Asp.net.
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
Niceblog
ReplyDelete