码迷,mamicode.com
首页 > Windows程序 > 详细

[翻译]ASP.NET Web API 2入门

时间:2015-06-11 16:27:43      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

  原文:Getting Started with ASP.NET Web API 2

 

  Step 1:新建一个Empty的Web API Project。

  Step 2:添加一个Model:

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }

  Step 3:添加一个Empty的Web API Controller:

    public class ProductsController : ApiController
    {
        Product[] products = new 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);
        }
    }

  至此我们已经完成一个Web API。新建一个HTML Page调用此Web API:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Product App</title>
</head>
<body>

    <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>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var uri = api/products;

        $(document).ready(function () {
            // Send an AJAX request
            $.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>, { text: formatItem(item) }).appendTo($(#products));
                    });
                });
        });

        function formatItem(item) {
            return item.Name + : $ + item.Price;
        }

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

  查看效果:

技术分享

 

[翻译]ASP.NET Web API 2入门

标签:

原文地址:http://www.cnblogs.com/walden1024/p/4569138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!