一、ASP.NET Web API 2 (C#) 入门【译】

ASP.NET WebAPI 实战

最新推荐文章于 2023-06-28 14:43:27 发布

weixin_30475039

最新推荐文章于 2023-06-28 14:43:27 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： json 测试 javascript ViewUI

原文链接：http://www.cnblogs.com/wuzifei/p/WebApi1.html

本文详细介绍如何使用ASP.NET WebAPI创建返回产品列表的Web API，并利用jQuery进行数据展示及查询。涵盖项目搭建、模型创建、控制器编写及前端页面开发等步骤。

HTTP不仅仅是用来提供网页服务，它还是一个用来创建展示数据和服务API的强大的平台，几乎你所想的到的任何一个平台都有一个HTTP库，HTTP 服务在很多客户端上都有使用，手持设备，浏览器，和传统的桌面应用都有使用。可以说，HTTP简单、灵活、无处不在。

ASP.NET Web API 就是这样一个基于.NET Framework 用来创建web APIs的一个框架。

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

预计效果如下：

开发环境

本次教程使用Visual Studio 2013

创建Web API 项目

打开Visual Studio ，在开始页面，选择 新建项目 ，或者在文件菜单，选择新建项目来创建项目

在模板窗体中选择已安装模板选项，展开Viusal C#节点，在Visul C#节点下，选择Web选项，在模板列表里就可以看到ASP.NET Web Application，选中它，给项目区一个名字。

在这里项目名字就叫“ProductsApp” 了，选择确定。

确定后，会出现新建ASP.NET项目对话框，在这里我们选择空项目，然后在下面的“为以下对象添加文件夹和核心引用” 中选中 Web API , 最后确认。这样一个ASP.NET Web API 应用程序就创建好了。

注意：你也可以直接在新建项目中选择Web API模板创建web api程序，需要注意的是Web API模板用的是ASP.NET MVC 技术。

　　　　我们刚才创建的那个空项目是没有使用MVC的，通常，也不需要这样做。

开始编写代码了

一、首先为项目中添加一个Model

简单介绍model：

model是在应用程序中存储数据，可以说model是数据的载体，且一般与数据库中的数据表相对应。

ASP.NET Web API 可以自动地将model序列化成JSON、XML 或其他格式的数据，然后将序列后的数据写入HTTP响应报文中。

客户端可以读取这些序列化后的数据，并将序列化后的数据反序列化成一个对象。

不仅如此，客户端甚至还可以在请求消息的时候设置接收报文头告诉服务器它想接收什么格式的数据。

其他的不多说，先创建一个商品model

找到解决方案窗口（如果没找到，选择视图菜单，选择解决方案管理器），在Models文件夹上右击，选择 添加-> 类 ，将类命名为 Product

Product.cs代码如下：

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

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

二、为项目添加一个Controller

在Web API中，控制器是用与处理HTTP请求的对象。

在这里，我们将创建一个controller用来返回一个product列表和只返回根据ID查询到的product数据。

说明：如果你以前使用过ASP.NET MVC ,你对Controller将不会陌生。

Web API中的Controller和MVC中的controllers很相似，但是是从ApiController类继承，而不是继承自Controller类。

同样，在解决方案资源管理器中，在Controllers文件夹上右击，选择 添加->控制器

接着会出现 “添加支架” 对话框，选中Web API 2 控制器-空 ，单击添加。

接着在“添加控制器”对话框中，给Controller取名为ProductsController 就可以了。

现在整个解决方案项目中的架构就是这样的了：

注意：你并不需要讲Controllers放到Controllers文件夹中，Controllers文件只是为了方便辨认而已。

双击打开ProductsController.cs文件，添加如下代码

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);
        }
}

为了让这个例子简单，products是存储在Conroller类中一个固定的数组中的。

当然，在一个真正的程序中，这些数据都是从数据库或其他外部数据源中查询到的。

解释下ProductsController中定义的方法：

　　GetAllProducts方法以IEnumerable<Product>类型返回整个产品列表

　　GetProductById方法根据ID查询产品，并在查询到时返回，反之则返回未找到

整个例子就是这样了，现在我们已经有了一个可以工作的web API ，上面Controller的每个方法都对应着一个URI或多个URI

Controller Method 　　　　　　URI

GetAllProducts　　　　　　　　/api/products

GetProductById　　　　　　　/api/products/id

说明：对于GetProductById方法，URI中的id是一个占位符。例如:要查询ID为5的商品，URI为：api/products/5

三、通过Javascript 和jQuery调用刚才定义好的Web API

在这小节中，我们将会增加一个使用AJAX的HTML页面来调用Web API，我们使用jQuery来实现Ajax的异步调用和异步更新页面在数据到来的时候。

同样，在解决方案管理器中，项目标题上右击，选择 添加->新建项

在添加新建项对话框中，选中Web节点，然后在模板中选择HTML页面，并命名为index.html

打开index.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>

四、获取整个Product数据说明

获取整个Product列表数据，只需要发送一个HTTP get请求到 “/api/products”

注意：这里没有说明使用什么来获取数据，在实际应用中是可以通过很多方式获取数据的：像前面所说的手持设备，浏览器，桌面应用都可以。

index.html 中的 Javascript代码说明：

我们使用了jQuery的getJSON函数发送AJAX请求，使用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获取单个Product

同样的，获取单个product只需要发送一个HTTP GET请求到 “/api/products/id”上，这里的id即为product 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格式的 product 。

五、运行程序，享受自己结果

按F5以调试模式启动程序，在浏览器中我们将看到如下结果：