ASP.NET Web API 2 入门(一)

前言

HTTP 不是只是为了服务的 web 页。这也是建设公开服务和数据的 Api 的强大平台。HTTP 是简单的、灵活的和无处不在。你能想到的几乎任何平台有 HTTP 库，因此，HTTP 服务可以达到范围广泛的客户，包括浏览器、移动设备和传统的桌面应用程序。

ASP.NET Web API 是一个用于构建 web Api 在.NET 框架上框架。在本教程中，您将使用 ASP.NET Web API 来创建一个 web API 返回的产品列表。

创建一个 Web API 项目

在本教程中，您将使用 ASP.NET Web API 来创建一个 web API 返回的产品列表。前端的 web 页中使用 jQuery 来显示结果。

启动 Visual Studio 时，从起始页中选择新的项目。或者，从文件菜单中，选择新建和项目.

在模板窗格中，选择已安装的模板并展开节点Visual C# 。在Visual C#，选择Web。在项目模板的列表中，选择ASP.NET Web 应用程序。命名项目"ProductsApp"，并单击确定.

在新的 ASP.NET 项目对话框中，选择的空模板。根据"添加文件夹和核心的参考文件"，选中Web API。单击确定. 如下图

您还可以创建一个 Web API 项目，使用"Web API"模板。Web API 模板使用 ASP.NET MVC 提供了 API 的帮助页面。我在本教程中使用空模板，因为我想要让没有 MVC Web API。一般情况下，你不需要知道 ASP.NET MVC 中使用 Web API。

添加一个模型

模型是一个对象，表示您的应用程序中的数据。ASP.NET Web API 可以自动序列化到 JSON、 XML 或其他格式，您的模型，然后将序列化的数据写入到 HTTP 响应消息的正文。只要客户端可以读取序列化格式，它可以反序列化的对象。大多数客户端可以解析 XML 或 JSON。此外，客户端可以表明哪一种格式它希望通过在 HTTP 请求消息中设置 Accept 标头。

如果解决方案资源管理器中不可见，请单击视图菜单中，选择解决方案资源管理器。在解决方案资源管理器中，右键单击模型文件夹。从上下文菜单中，选择添加，然后选择类.

命名类"Product"。将以下属性添加到 Product类。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApiDemo.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

添加控制器

在 Web API 中，控制器是一个处理 HTTP 请求的对象。我们将添加一个控制器，可以返回由 ID 指定一个单一的产品的列表

注如果您已经使用 ASP.NET MVC，你控制器已经熟悉了。Web API 控制器类似于 MVC 控制器，但而不是控制器类ApiController类继承。

在解决方案资源管理器中，右键单击控制器文件夹。选择添加，然后选择控制器.

在添加脚手架对话框中，选择Web API 控制器-空。单击添加.

脚手架创建一个名为控制器文件夹中的 ProductsController.cs 文件。

你不需要把您的控制器放进一个文件夹命名为控制器。文件夹名称是捷径来组织您的源文件。

如果没有打开此文件，则请双击文件以打开它。此文件中的代码替换为以下内容：

using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApiDemo.Models;

namespace WebApiDemo.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[]{
          new Product{Id=1,Name="Toky1",Category="中国1",Price=1},
          new Product{Id=2,Name="Anglelaf",Category="中国2",Price=3.75M} ,
          new Product{Id=3,Name="Sendnal",Category="中国3",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);

        }
    }
}

View Code

为了保持示例简单，产品存储在一个固定的数组，在控制器类的内部。当然，在实际的应用中，你会查询数据库，或使用一些其他外部数据源。

控制器定义返回的产品的两种方法：

GetAllProducts方法返回整个清单上的产品作为一种IEnumerable < 产品 >类型。
GetProduct方法查找一个单一的产品，通过其 id。

就是它！你有一个工作网络 API。每个控制器上的方法对应于一个或多个 Uri：

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

GetProduct方法中的 URI 的id是一个占位符。例如，若要获取 ID 为 5 的产品，URI 是api/products/5.

有关 Web API 将 HTTP 请求路由到控制器方法的详细信息，请参阅路由选择在 ASP.NET Web API.

调用 Web API 与 Javascript 和 jQuery

在解决方案资源管理器中，右键单击该项目并选择添加，然后选择新的项目.

在添加新项对话框中，选择下Visual C#中的Web节点，然后选择HTML 页面项目。命名"index.html"页。

替换此文件中的所有内容为以下内容：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></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 src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        var uri = 'api/products';
        $(function () {
            $.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>

View Code

有几种方法来得到 jQuery。在此示例中，我使用Microsoft Ajax CDN。您也可以下载它从http://jquery.com/和 ASP.NET"Web API"项目模板包括 jQuery 一样好。

获取产品列表

若要获取产品的列表，以"api/产品"发送一个 HTTP GET 请求。

JQuery getJSON函数发送一个 AJAX 请求。为响应包含的 JSON 对象的数组。done功能指定如果请求成功，则调用的回调。在回调中，我们使用的产品信息更新 DOM。

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .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'));
            });
        });
});

获得由 ID 的产品

要得到一个由 ID 的产品，请发送 HTTP GET 请求"/id"，其中id是产品 id。

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

我们仍然叫getJSON发送 AJAX 请求，但这一次我们把 ID 请求 URI 中。来自此请求的响应是产品的一个单一一个 JSON 表示。

运行应用程序

按 F5 启动调试应用程序。Web 网页的外观应类似于以下内容：

若要获取产品按 ID，输入 ID 并单击搜索：

如果您输入了无效的 ID，服务器将返回一个 HTTP 错误：