Delving Deeper into Drag and Drop Programming in Microsoft ASP.NET AJAX - Obtaining the list of the pets to sell via Web Service
(Page 4 of 5 )
In this sample, after the client side has been initialized, we will invoke the server-side Web Service asynchronously to acquire the information about all the pets on the online store, as well as add a ShoppingCartBehavior action to the shopping cart, all of which should be performed within the pageLoad function (this function is a global built-in function defined by MS AJAX, which is automatically executed after the client-side framework has been initialized successfully, within which we can perform some initializations).
function pageLoad(sender, args) {
// call Web Service to get all the pets related info
ShoppingService.GetPets(onPetsGot);
// add behavior ShoppingCartBehavior to the shopping cart
$create(
ShoppingCartNamespace.ShoppingCartBehavior,
{"name": "myShoppingCartBehavior"},
null,
null,
$get("shoppingCart")
);
}
Here, inside the call back function onPetsGot(), we'll, according to the pet set returned from the web service, create each element corresponding to the pets within the container dynamically. And also, we should add the DraggableProductBehavior behavior to each element inside the container-petContainer.
function onPetsGot(result) {
// first get the container to display all the pets
var petContainer = $get("petContainer");
// iterate through the pet collection returned from the server
for (var index = 0; index < result.length; ++ index) {
// current pet
var thisPet = result[index];
//Create a new DOM element-div according to current pet info, and add it to the pet container
var petElem = document.createElement("div");
petElem.innerHTML = thisPet.Name + " "+thisPet.Category+ " " +thisPet.Color+ " "+" - $: "
+ thisPet.Price;
petContainer.appendChild(petElem);
//add behavior DraggableProductBehavior to this product (this pet info)
$create(
ShoppingCartNamespace.DraggableProductBehavior,
{"pet": thisPet}, // Set property 'pet'
null,
null,
petElem
);
}
}
Next: Dealing with the order via Web Service >>
More ASP.NET Articles
More By Xianzhong Zhu
