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>
效果展示: