WebApi初探之基本操作(CRUD)

     public class ProductsController : ApiController
     {
         static List<Product> products = new List<Product>
         {
             new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price =  },
             new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
             new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M }
         };

         public IEnumerable<Product> GetAllProducts()
         {
             return products;
         }

         public IHttpActionResult GetProduct(int id)
         {
             var product = products.FirstOrDefault((p) => p.Id == id);
             if (product == null)
             {
                 return NotFound();
             }
             return Ok(product);
         }

         // POST api/values
         public IHttpActionResult Post([FromBody]Product value)
         {
             var product = products.FirstOrDefault((p) => p.Id == value.Id);
             if (product == null)
             {
                 products.Add(value);
             }
             return Ok(value);
         }

         // PUT api/values/5
         public IHttpActionResult Put([FromBody]Product value)
         {
             var product = products.FirstOrDefault((p) => p.Id == value.Id);
             if (product != null)
             {
                 product.Name = value.Name;
                 product.Category = value.Category;
                 product.Price = value.Price;
             }
             return Ok(value);
         }

         // DELETE api/values/5
         public IHttpActionResult Delete([FromBody]Product value)
         {
             var product = products.FirstOrDefault((p) => p.Id == value.Id);
             if (product != null)
             {
                 products.Remove(product);
             }
             return Ok("Success");
         }
     }

 @section scripts
 {
     <script type="text/javascript">
         var uri = '/api/products';

         $(document).ready(function () {
             // Send an AJAX request
             query();
         });

         function getRandom(n) {
             return Math.floor(Math.random() * n + 1)
         }

         function formatItem(item) {
             return item.Id + " | " + item.Name + ': $' + item.Price + " [<a onclick='del(" + item.Id + ")'>删除</a>]";
         }

         function query() {
             $('#products').children("li").remove();
             $.getJSON(uri)
                 .done(function (data) {
                     // On success, 'data' contains a list of products.
                     $.each(data, function (key, item) {
                         // Add a list item for the product.
                         $('<li>', { html: formatItem(item) }).appendTo($('#products'));
                     });
                 });
         }

         function find() {
             var id = $('#prodId').val();
             if (!id) return;
             $.getJSON(uri + '/' + id)
                 .done(function (data) {
                     $('#product').html(formatItem(data));
                 })
                 .fail(function (jqXHR, textStatus, err) {
                     $('#product').text('Error: ' + err);
                 });
         }

         function add() {
             $.ajax({
                 url: uri,
                 type: "POST",
                 data: { id: 4, name: 'test', category: 'c', price: 14 }
             }).done(function (data) {
                 query();
             }).fail(function (jqXHR, textStatus, err) {
                 alert('Error: ' + err);
             });
         }

         function update() {
             var id = getRandom(4);
             $.ajax({
                 url: uri,
                 type: "PUT",
                 data: { id: id, name: 'Hello World', category: 'ac', price: getRandom(20) }
             }).done(function (data) {
                 query();
             }).fail(function (jqXHR, textStatus, err) {
                 alert('Error: ' + err);
             });
         }

         function del(id) {
             $.ajax({
                 url: uri,
                 type: "DELETE",
                 data: { id: id }
             }).done(function (data) {
                 query();
             }).fail(function (jqXHR, textStatus, err) {
                 alert('Error: ' + err);
             });
         }
     </script>
 }
 <div>
     <h1 class="error">查询</h1>
     <div>
         <h2>All Products</h2>
         <ul id="products" />
     </div>
     <div>
         <h2>Search by ID</h2>
         <input type="text" id="prodId" size="5" />
         <input type="button" value="Search" onclick="find();" />
         <p id="product" />
     </div>
 </div>
 <hr />
 <div>
     <h1 class="error">添加</h1>
     <input type="button" value="Add" onclick="add();" />
 </div>
 <div>
     <h1 class="error">更新</h1>
     <input type="button" value="Update" onclick="update();" />
 </div>

效果展示：