HTML and CSS Reference
In-Depth Information
As you can see, Mouse has already been added to the shopping cart. Attempting to drag-and-drop
Mouse to the shopping cart again results in an alert box with a message informing the user about the
The OnDragEnd event-handler function simply removes the highlight CSS class from the drop target and is
shown in Listing 9-13.
Listing 9-13. OnDragEnd Function
function OnDragEnd(e) {
$("div .bag").removeClass('highlight'); = '1';
Passing Data from Client to Server
To transfer shopping-cart items to the server-side code, you need to use the jQuery $.ajax() method. The
click event handler of the Place Order button has the relevant code and is shown in Listing 9-14.
Listing 9-14. Saving Order Data on the Server
$("#Button1").click(function () {
var data = new Array();
$("div .bag div").each(function (index) {
data[index] = "'" + this.innerHTML + "'";
type: 'POST',
url: 'shoppingcart.aspx/PlaceOrder',
contentType: "application/json; charset=utf-8",
data: '{ products:[' + data.join() + ']}',
dataType: 'json',
success: function (results) { alert(results.d); },
error: function () { alert('error'); }
As you can see, first the products in the shopping bag are stored into a JavaScript array. This way, it's
easy to pass them to the server by joining the array elements. An Array is created by using the each()
method and extracting the innerHTML of individual <div> elements. Then the $.ajax() method invokes a
web method, PlaceOrder() , that resides in the ShoppingCart.aspx web form. The PlaceOrder() web
method is shown in Listing 9-15.
Listing 9-15. PlaceOrder Web Method
public static string PlaceOrder(string[] products)
Guid orderId = Guid.NewGuid();
Search WWH ::

Custom Search