Web API--入门--（一）ASP.NET Web API 2（C＃）入门

喵叔

发布于 2020-09-08 15:49:44

4.2K0

发布于 2020-09-08 15:49:44

示例代码下载地址：http://download.csdn.net/detail/gangzhucoll/9844909 HTTP不仅仅是为了提供网页。它也是构建公开服务和数据的API的强大平台。HTTP简单，灵活，无所不在。几乎任何您可以想到的平台都有一个HTTP库，所以HTTP服务可以覆盖广泛的客户端，包括浏览器，移动设备和传统的桌面应用程序。 ASP.NET Web API是在.NET Framework之上构建Web API的框架。在本教程中，您将使用ASP.NET Web API创建返回产品列表的Web API。本教程中使用的软件版本

Visual Studio 2013
Web API 2

创建一个Web API项目

在本教程中，您将使用ASP.NET Web API创建返回产品列表的Web API。前端网页使用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头来指示所需的格式。

我们先来创建一个代表产品的简单模型。

如果解决方案资源管理器尚未显示，请单击查看菜单，然后选择解决方案资源管理器。在解决方案资源管理器中，右键单击Models文件夹。从上下文菜单中，选择添加，然后选择类。

将类命名为“产品”。将以下属性添加到Product类中。

namespace ProductsApp.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类而不是Controller类。

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

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

在“ 添加控制器 ”对话框中，命名控制器“ProductsController”。单击添加。

脚手架在Controllers文件夹中创建一个名为ProductsController.cs的文件。

注意

您不需要将控制器放入名为Controllers的文件夹中。文件夹名称只是组织源文件的一种方便的方法。

如果此文件尚未打开，请双击该文件将其打开。用以下代码替换此文件中的代码：

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    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);
        }
    }
}

为了保持这个例子的简单，产品被存储在控制器类的固定数组中。当然，在实际应用中，您可以查询数据库或使用其他外部数据源。

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

该GetAllProducts方法将整个产品列表作为IEnumerable <Product>类型返回。
该GetProduct方法通过其ID来查找单个产品。

而已！你有一个工作的Web API。控制器上的每个方法对应于一个或多个URI：

控制器方法	URI
GetAllProducts	/ API /产品
GetProduct	/ api / products / id

对于该GetProduct方法，URI中的id是占位符。例如，要获得ID为5的产品，URI为api/products/5。

有关Web API如何将HTTP请求路由到控制器方法的更多信息，请参阅ASP.NET Web API中的路由。

使用Javascript和jQuery调用Web API

在本节中，我们将添加一个使用AJAX调用Web API的HTML页面。我们将使用jQuery来进行AJAX调用，并且还可以使用结果更新页面。

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

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

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

<!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" οnclick="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>

有几种方法来获取jQuery。在这个例子中，我使用了Microsoft Ajax CDN。您还可以从http://jquery.com/下载它，ASP.NET“Web API”项目模板也包括jQuery。

获取产品列表

要获取产品列表，请发送HTTP GET请求到“/ api / products”。

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请求发送到“/ api / products / 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开始调试应用程序。网页应如下所示：

要通过ID获取产品，请输入ID并单击搜索：

如果您输入的ID无效，则服务器返回HTTP错误：

使用F12查看HTTP请求和响应

当您使用HTTP服务时，查看HTTP请求和请求消息非常有用。您可以使用Internet Explorer 9中的F12开发人员工具来执行此操作。从Internet Explorer 9中，按F12打开工具。单击网络选项卡，然后按开始捕获。现在回到网页，按F5重新加载网页。Internet Explorer将捕获浏览器和Web服务器之间的HTTP流量。摘要视图显示页面的所有网络流量：