A lot of server jobs can be moved to the client side in an Ajax application, but the server still has its own responsibility; in this demo
application it is manipulating data, which means sending products information
to the client side and processing customer's order.
Web Service is the ideal way to expose data to client side
and ASP.NET AJAX asynchronies communication layer and it also has perfect built-in
support for invoking Web Service from client side JavaScript.
Let us create a Web Service file called ShoppingService.asmx.
Remember the [ScriptService] attribute which is
required if you want ASP.NET AJAX asynchronies communication layer to generate
client side JavaScript proxy for this Web Service. Then you could easily invoke
methods defined in the Web Service using JavaScript from client side.
Listing 2 - ShoppingService Skelton
[System.Web.Script.Services.ScriptService]
public class ShoppingService : System.Web.Services.WebService
{
}
Add a private property Data to this
Web Service class, which is used to represent the products in our online store.
Here we just hard coded 5 ASP.NET 2.0 books as the products, but in the real
world application, we usually get these items from Database.
Listing 3 - Adding Data to ShoppingService
private List < Product > _products;
private List < Product > Products
{
get
{
if (_products == null)
{
_products = new List < Product > ();
_products.Add(new Product(1, "Professional ASP.NET 2.0", 49.99));
_products.Add(new Product(2, "Programming ASP.NET, 3rd Edition", 49.95));
_products.Add(new Product(3, "ASP.NET 2.0 Unleashed", 55.99));
_products.Add(new Product(4, "Beginning ASP.NET 2.0", 39.99));
_products.Add(new Product(5, "Professional ASP.NET 2.0 Special Edition",
59.99));
}
return _products;
}
}
The Product class mentioned in
Listing 3 encapsulated the information of a single product.
Listing 4 - The Product Class
public class Product
{
private int _id;
public int Id
{
get
{
return _id;
}
set
{
_id = value;
}
}
private string _name;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
}
}
private double _price;
public double Price
{
get
{
return _price;
}
set
{
_price = value;
}
}
public Product(){}
public Product(int id, string name, double price)
{
this._id = id;
this._name = name;
this._price = price;
}
}
Back to the ShoppingService Web Service class and add a
method named GetProducts() to return all the available
products to the client side.
Listing 5 - GetProducts() Method
[WebMethod]
public Product[] GetProducts()
{
return Products.ToArray();
}
Still in the ShoppingService Web Service class, we need
another method to process the order. This Order()
method accepts a Dictionary<string, int> parameter.
The key is the ID of a product and the value is the quantity of this product.
In this method we calculate the total quantity and total price of the products in
the customer's shopping cart and make the order.
Listing 6 - Order() Method
[WebMethod]
public string Order(Dictionary < string, int > productsToBeOrdered)
{
// total quantity of the products
int totalQuantity = 0;
// total price
double totalPrice = 0;
// calculate total quantity and total price
foreach (KeyValuePair < string, int > productQuantity in productsToBeOrdered)
{
foreach (Product product in Products)
{
if (product.Id.ToString() == productQuantity.Key)
{
totalQuantity += productQuantity.Value;
totalPrice += (product.Price * productQuantity.Value);
break;
}
}
}
// save to database or other work can be done here
// ......
// return a formated string
return string.Format(
"You've ordered {0} product(s) and the total price is ${1}. Thank you!",
totalQuantity, totalPrice);
}