添加一个启用Ajax的WCF服务
前面我们创建的jQuery程序太简单的，数据是从一个数组中提取，是静态的，下面我们修改一下代码，让它从一个WCF服务提取数据。
首先给WebRole1项目添加一个新的启用Ajax的WCF服务，在菜单中选择“项目”*“增加新项目”，选择“Ajax-enabled WCF Service”，将新项目命名为ProductService.svc。
图 13 新建启用Ajax的WCF服务项目
ProductService.svc的代码如下：
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;
namespace WebRole1 {
public class Product {
public string name { get; set; }
public decimal price { get; set; }
}
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ProductService {
[OperationContract]
public IList SelectProducts() {
var products = new List();
products.Add(new Product {name="Milk", price=4.55m} );
products.Add(new Product { name = "Yogurt", price = 2.99m });
products.Add(new Product { name = "Steak", price = 23.44m });
return products;
}
}
}
using System.ServiceModel;
using System.ServiceModel.Activation;
namespace WebRole1 {
public class Product {
public string name { get; set; }
public decimal price { get; set; }
}
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ProductService {
[OperationContract]
public IList SelectProducts() {
var products = new List();
products.Add(new Product {name="Milk", price=4.55m} );
products.Add(new Product { name = "Yogurt", price = 2.99m });
products.Add(new Product { name = "Steak", price = 23.44m });
return products;
}
}
}
现实中，我们都是从数据库中提取数据的，为了偷懒我这里使用了一个数组。
接下来就要修改Default.htm，让它使用ProductService.svc，更新Default.htm中的jQuery代码，让它调用WCF服务，数据从ProductService.svc检索。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$.post("ProductService.svc/SelectProducts", function (results) {
var products = results["d"];
$("#productTemplate").render(products).appendTo("#productContainer");
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$.post("ProductService.svc/SelectProducts", function (results) {
var products = results["d"];
$("#productTemplate").render(products).appendTo("#productContainer");
});
</script>
</body>
</html>
