Dealing with Local Files Using the File API - HTML5 Programming for ASP.NET Developers - page 236

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
duplication.
OnDragEnd
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');
this.style.opacity = '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 + "'";
});
$.ajax({
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
[WebMethod]
public static string PlaceOrder(string[] products)
{
Guid orderId = Guid.NewGuid();