01Getting Started---Getting Started with ASP.NET Web API 2入门WebApi2

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

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

在本教程中使用的软件版本

视觉工作室 2013 年
Web API 2

创建一个 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类。

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类而不是控制器类。

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

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

在添加控制器对话框中，名称"ProductsController"控制器。单击添加.

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

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

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

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 < 产品 >类型。
GetProduct方法查找一个单一的产品，由其 id。

就是这个!你有工作 web API。每个控制器上的方法对应于一个或多个 Uri:

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

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

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

调用 Web API 与 Javascript 和 jQuery

在本节中，我们将添加一个 HTML 页面，使用 AJAX 调用 web API。我们将使用 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" 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>

有几种方法来得到 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 错误:

使用 f12 键以查看 HTTP 请求和响应

当你正在使用 HTTP 服务时，它可以看到 HTTP 请求和请求消息非常有用。你可以通过在互联网资源管理器中 9 中使用 F12 开发人员工具。从互联网资源管理器中 9，按f12 键以打开工具。单击网络选项卡，然后按开始捕获。现在回到 web 页，请按F5重新加载该 web 页。Internet Explorer 将捕获浏览器和 web 服务器之间的 HTTP 通信。摘要视图显示页的所有网络通信:

找到对应的条目相对 uri"api 的产品 /"。选择此项，然后单击转到详细的视图。在详细信息视图中，有选项卡以查看请求和响应邮件标题和正文。例如，如果您单击请求标题选项卡，您可以看到客户端请求"应用程序/json"Accept 标头中。

如果您单击响应正文选项卡，您可以看到如何产品列表被序列化为 JSON。其他浏览器都有类似的功能。提琴手，web 调试代理是另一个有用的工具。你可以使用提琴手以查看您的 HTTP 流量，构成 HTTP 请求，在请求给您的 HTTP 标头的完全控制。

在 Azure 上看到此应用程序运行

你想看到作为一个活的 web 应用程序运行完成的网站吗?只需单击下面的按钮，可以将一个完整的版本的应用程序部署到您 Azure 的帐户。

你需要将此解决方案部署到 Azure 蔚蓝帐户。如果您还没有帐户，您有下列选项:

免费开放的 Azure 帐户-你得到学分你可以使用来尝试有偿的 Azure 服务，和甚至他们习惯后您最多可以保持帐户和使用免费的 Azure 服务。
激活 MSDN 订户权益-你的 MSDN 订阅，您可以使用为有偿 Azure 服务每个月给你学分。

接下来的步骤

支持后，付诸表决和删除操作，并向数据库写入 HTTP 服务更完整的示例，请参阅使用 Web API 2 与实体框架 6.
创建一个 HTTP 服务流体和响应的 web 应用程序的更多信息，请参见ASP.NET 单页面应用程序.
有关如何将 Visual Studio web 项目部署到 Azure 应用程序服务的信息，请参阅创建 ASP.NET web 应用程序在 Azure 应用程序服务.

这篇文章的初衷是在 2014 年 1 月 20 日

作者信息

posted @ 2016-02-04 12:04 风筝遇上风阅读(486) 评论(0) 编辑收藏举报

刷新页面返回顶部

彭昌燊

尽可能做尽可能！