I am a huge fan of Ajax. If you want to create a great experience for the users of your website – regardless of whether you are building an ASP.NET MVC or an ASP.NET Web Forms site — then you need to use Ajax. Otherwise, you are just being cruel to your customers.
Most of the new websites expose data from the server as JSON and use jQuery to retrieve and update that data from the browser.
One challenge, when building an ASP.NET website, is deciding on which technology to use to expose JSON data from the server. For example, how do you expose a list of products from the server as JSON so you can retrieve the list of products with jQuery? You have a number of options (too many options) including ASMX Web services, WCF Web Services, ASHX Generic Handlers, WCF Data Services, and MVC controller actions.
With the release of ASP.NET 4 Beta, Microsoft has introduced a new technology for exposing JSON from the server named the ASP.NET Web API. You can use the ASP.NET Web API with both ASP.NET MVC and ASP.NET Web Forms applications.
Create a Web API Controller
to create a new web API controller you just need to select template as API Controller
this would create a class with default empty methods to get you started.
1: public class Product
2: {3: public int Id { get; set; }
4: 5: public string Name { get; set; }
6: 7: }1: public class MyAPIController : ApiController
2: {3: // GET /api/myapi
4: public IEnumerable<Product> Get()
5: {6: return new List<Product>
7: {8: new Product { Id = 1, Name = "Product1" },
9: new Product { Id = 2, Name = "Product2" },
10: }; 11: } 12: 13: // GET /api/myapi/5
14: public Product Get(int id)
15: {16: return new Product { Id = 3, Name = "Product3" };
17: } 18: 19: // POST /api/myapi
20: public HttpResponseMessage<Product> Post(Product newProduct)
21: { 22: newProduct.Id = 23;23: var response = new HttpResponseMessage<Product>(newProduct, HttpStatusCode.Created);
24: var relativePath = "/api/movie/" + newProduct.Id;
25: response.Headers.Location = new Uri(Request.RequestUri, relativePath);
26: return response;
27: } 28: 29: // PUT /api/myapi/5
30: public void Put(int id, Product productToUpdate)
31: {32: if (productToUpdate.Id == 1)
33: {34: // Update the movie in the database
35: return;
36: }37: // If you can't find the movie to update
38: throw new HttpResponseException(HttpStatusCode.NotFound);
39: } 40: 41: // DELETE /api/myapi/5
42: public HttpResponseMessage Delete(int id)
43: {44: // Delete the movie from the database // Return status code
45: return new HttpResponseMessage(HttpStatusCode.NoContent);
46: } 47: } 1: routes.MapHttpRoute(2: name: "DefaultApi",
3: routeTemplate: "api/{controller}/{id}",
4: defaults: new { id = RouteParameter.Optional }
5: );
and let’s start using the Controller:
Get Single Product
To invoke the Get functions from JavaScript using JQuery you do the following:
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Get product</title>
5: </head>
6: <body>
7: <div>
8: Title: <span id="Id"></span>
9: </div>
10: <div>
11: Director: <span id="Name"></span>
12: </div>
13: <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
14: <script type="text/javascript">
15: getProduct(1, function (product) {
16: $("#Id").html(product.Id);
17: $("#Name").html(product.Name);
18: }); 19: 20: function getProduct(id, callback) {
21: $.ajax({ url: "/api/MyAPI", data: { Id: id }
22: , type: "GET",
23: contentType: "application/json;charset=utf-8",
24: statusCode: 25: {26: 200: function (product) { callback(product); },
27: 404: function () { alert("Not Found!"); }
28: } 29: }); 30: } 31: </script>
32: </body>
33: </html>
Get Multiple Products
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Get product</title>
5: </head>
6: <body>
7: <div>
8: <span id="Products"></span>
9: </div>
10: <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
11: <script type="text/javascript">
12: 13: getProducts(function (products) {
14: var strproducts = "";
15: $.each(products, function (index, product) {
16: strproducts += "<div>" + product.Name + "</div>";
17: });18: $("#Products").html(strproducts);
19: });20: function getProducts(callback) {
21: $.ajax( 22: {23: url: "/api/MyAPI/",
24: data: {},25: type: "GET",
26: contentType: "application/json;charset=utf-8",
27: }).then(function(products){
28: callback(products); 29: }); 30: }31: </script>
32: </body>
33: </html>
Insert a new Product
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Create product</title>
5: </head>
6: <body>
7: <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
8: <script type="text/javascript">
9: var productToCreate = {Id: "4", Name: "Product4" };
10: 11: createproduct(productToCreate, function (newproduct) {
12: alert("New product created with an Id of " + newproduct.Id);
13: }); 14: 15: function createproduct(productToCreate, callback) {
16: $.ajax({17: url: "/api/MyAPI",
18: data: JSON.stringify(productToCreate),19: type: "POST",
20: contentType: "application/json;charset=utf-8",
21: statusCode: {22: 201: function (newproduct) {
23: callback(newproduct); 24: } 25: } 26: }); 27: } 28: </script>
29: </body>
30: </html>
Update a Product
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Put product</title>
5: </head>
6: <body>
7: <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
8: <script type="text/javascript">
9: var productToUpdate = { id: 1, title: "Product5" };
10: updateproduct(productToUpdate, function () {
11: alert("product updated!");
12: });13: function updateproduct(productToUpdate, callback) {
14: $.ajax({15: url: "/api/MyAPI",
16: data: JSON.stringify(productToUpdate),17: type: "PUT",
18: contentType: "application/json;charset=utf-8",
19: statusCode: {20: 200: function () {
21: callback(); 22: },23: 404: function () {
24: alert("product not found!");
25: } 26: } 27: }); 28: } 29: </script>
30: </body>
31: </html>
Delete a Product
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Delete product</title>
5: </head>
6: <body>
7: <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
8: <script type="text/javascript">
9: deleteproduct(1, function () {
10: alert("product deleted!");
11: });12: function deleteproduct(id, callback) {
13: $.ajax({14: url: "/api/MyAPI",
15: data: JSON.stringify({ Id: id }),16: type: "DELETE",
17: contentType: "application/json;charset=utf-8",
18: statusCode: {19: 204: function () {
20: callback(); 21: } 22: } 23: }); 24: }25: </script>
26: </body>
27: </html>
having a quick look at the above sample, you’ll definitely agree that it’s quite simple to expose services through ASP.NET Web API. I am personally very excited about this 
