WebApi初探之基本操作(CRUD)

 1     public class ProductsController : ApiController
 2     {
 3         static List<Product> products = new List<Product>
 4         { 
 5             new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
 6             new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
 7             new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
 8         };
 9 
10         public IEnumerable<Product> GetAllProducts()
11         {
12             return products;
13         }
14 
15         public IHttpActionResult GetProduct(int id)
16         {
17             var product = products.FirstOrDefault((p) => p.Id == id);
18             if (product == null)
19             {
20                 return NotFound();
21             }
22             return Ok(product);
23         }
24 
25         // POST api/values
26         public IHttpActionResult Post([FromBody]Product value)
27         {
28             var product = products.FirstOrDefault((p) => p.Id == value.Id);
29             if (product == null)
30             {
31                 products.Add(value);
32             }
33             return Ok(value);
34         }
35 
36         // PUT api/values/5
37         public IHttpActionResult Put([FromBody]Product value)
38         {
39             var product = products.FirstOrDefault((p) => p.Id == value.Id);
40             if (product != null)
41             {
42                 product.Name = value.Name;
43                 product.Category = value.Category;
44                 product.Price = value.Price;
45             }
46             return Ok(value);
47         }
48 
49         // DELETE api/values/5
50         public IHttpActionResult Delete([FromBody]Product value)
51         {
52             var product = products.FirstOrDefault((p) => p.Id == value.Id);
53             if (product != null)
54             {
55                 products.Remove(product);
56             }
57             return Ok("Success");
58         }
59     }

  1 @section scripts
  2 {
  3     <script type="text/javascript">
  4         var uri = '/api/products';
  5 
  6         $(document).ready(function () {
  7             // Send an AJAX request
  8             query();
  9         });
 10 
 11         function getRandom(n) {
 12             return Math.floor(Math.random() * n + 1)
 13         }
 14 
 15         function formatItem(item) {
 16             return item.Id + " | " + item.Name + ': $' + item.Price + " [<a onclick='del(" + item.Id + ")'>删除</a>]";
 17         }
 18 
 19         function query() {
 20             $('#products').children("li").remove();
 21             $.getJSON(uri)
 22                 .done(function (data) {
 23                     // On success, 'data' contains a list of products.
 24                     $.each(data, function (key, item) {
 25                         // Add a list item for the product.
 26                         $('<li>', { html: formatItem(item) }).appendTo($('#products'));
 27                     });
 28                 });
 29         }
 30 
 31         function find() {
 32             var id = $('#prodId').val();
 33             if (!id) return;
 34             $.getJSON(uri + '/' + id)
 35                 .done(function (data) {
 36                     $('#product').html(formatItem(data));
 37                 })
 38                 .fail(function (jqXHR, textStatus, err) {
 39                     $('#product').text('Error: ' + err);
 40                 });
 41         }
 42 
 43         function add() {
 44             $.ajax({
 45                 url: uri,
 46                 type: "POST",
 47                 data: { id: 4, name: 'test', category: 'c', price: 14 }
 48             }).done(function (data) {
 49                 query();
 50             }).fail(function (jqXHR, textStatus, err) {
 51                 alert('Error: ' + err);
 52             });
 53         }
 54 
 55         function update() {
 56             var id = getRandom(4);
 57             $.ajax({
 58                 url: uri,
 59                 type: "PUT",
 60                 data: { id: id, name: 'Hello World', category: 'ac', price: getRandom(20) }
 61             }).done(function (data) {
 62                 query();
 63             }).fail(function (jqXHR, textStatus, err) {
 64                 alert('Error: ' + err);
 65             });
 66         }
 67 
 68         function del(id) {
 69             $.ajax({
 70                 url: uri,
 71                 type: "DELETE",
 72                 data: { id: id }
 73             }).done(function (data) {
 74                 query();
 75             }).fail(function (jqXHR, textStatus, err) {
 76                 alert('Error: ' + err);
 77             });
 78         }
 79     </script>
 80 }
 81 <div>
 82     <h1 class="error">查询</h1>
 83     <div>
 84         <h2>All Products</h2>
 85         <ul id="products" />
 86     </div>
 87     <div>
 88         <h2>Search by ID</h2>
 89         <input type="text" id="prodId" size="5" />
 90         <input type="button" value="Search" onclick="find();" />
 91         <p id="product" />
 92     </div>
 93 </div>
 94 <hr />
 95 <div>
 96     <h1 class="error">添加</h1>
 97     <input type="button" value="Add" onclick="add();" />
 98 </div>
 99 <div>
100     <h1 class="error">更新</h1>
101     <input type="button" value="Update" onclick="update();" />
102 </div>