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

2022-02-14 12:07:29

?

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 API--入门--（一）ASP.NET Web API 2（C＃）入门

添加模型

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

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

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

如果您使用ASP.NET MVC，您已经熟悉了控制器。Web API控制器类似于MVC控制器，但继承解决方案资源管理器中，右键单击Controllers文件夹。选择添加脚手架?”对话框中，选择“?添加控制器?”对话框中，命名控制器“ProductsController”。单击

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

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

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

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方法将整个产品列表作为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);
        });
}