WebApi初探之基本操作(CRUD)

    public class ProductsController : ApiController
    {
        static List<Product> products = new List<Product>
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, 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>

 效果展示：