ASP.NET Web API 2 入门教学

最新推荐文章于 2022-02-21 17:53:32 发布

Fanstorm丶

最新推荐文章于 2022-02-21 17:53:32 发布

阅读量3.1k

点赞数 1

分类专栏： C# Web API 翻译

C# 同时被 3 个专栏收录

74 篇文章 21 订阅

订阅专栏

Web API

9 篇文章 0 订阅

订阅专栏

翻译

8 篇文章 0 订阅

订阅专栏

ASP.NET Web API 2 入门教学

原文更新日期：2017.11.28

导航页面

http://blog.csdn.net/wf824284257/article/details/79475115

前言

HTTP不仅用于web前后端的交互，同时也是一个可以被用来构筑API来向外提供服务和数据的这样一个强大的平台。HTTP是简单的、灵活的、无处不在的，几乎所有你可以想到的平台都有一个HTTP库，所以HTTP服务可以连接到非常多种客户端，包括浏览器、移动设备以及传统的桌面应用。

ASP.NET Web API 是一个可以在.NET平台来构建 Web API 的一个框架。在这篇教学文章里，你将会使用ASP.NET Web API 来创建一个可以返回一个产品列表( 一组Product )的 WEB API 应用。

本教程使用的软件版本

Visual Studio 2017

Web API 2

如果你需要在.NET Core上实现Web API应用，那么你可以看这篇教程：
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

创建一个 Web API 项目

在这篇教程里，你将会使用 ASP.NET Web API 来创建一个可以返回一个产品列表( List )的 WEB API 应用，前端页面使用JQuery来展示这个结果。

#####pic 1

打开VS，点击文件 -> 新建 -> 项目，在项目模板选择界面时，选择已安装模板并展开Visual C# 节点。在该节点下，选择 Web,并在项目模板列表里选择ASP.NET Web Application，将项目命名为“ProductsApp”并点击OK。

#########pic 2

在New ASP.NET Project窗口中，选择Empty模板，在“Add folders and core references for”下面的复选框中，选中 Web API，点击OK。

###########pic 3

注意：你也可以使用 “Web API” 项目模板来创建Web API应用，该项目模板使用了 ASP.NET MVC 来提供API 帮助页面。本教程使用空模板是因为我想展示的是不用MVC的Web API。一般来说，在学习和使用Web API时，并不需要事先了解ASP.NET MVC。

创建一个Model

Model就是实体类，它在你的应用中扮演着“数据”的角色。ASP.NET Web API 可以自动的将你的model序列化为JSON、XML或其他的适合传输的格式，然后将序列化后的数据写到HTTP response里。只要客户端可以识别这种序列化格式（JSON、XML），就可以将读取到的数据反序列化为实体对象。绝大多数客户端都可以识别JSON和XML。此外，客户端可以通过设置HTTP请求头来表明它需要哪种格式。

那就让我们从创建一个“Product”实体类开始。

如果“解决方案资源管理器”（Solution Explorer）没有打开的话，可以从菜单栏的”视图”（View）里面打开。在Solution Explorer里面，右键点击Models文件夹，添加一个类。

##########pic4

为这个class取名为“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; }
    }
}

添加一个Controller

在 Web API 模板中，控制器（Controller）是一个用来处理HTTP请求的对象。我们将创建一个controller，并实现两个功能：

返回List ；
根据Product.Id来返回指定的Product。

注意：如果你用过 ASP.NET MVC，你肯定已经熟悉了controller的用法了。Web API controllers与 MVC controllers非常相似，但 Web API controllers是继承自“ApiController”类的，而 MVC controllers 是继承自“Controller”类。

在 Solution Explorer 里，右键 Controllers文件夹，并选中Controller。

############## 5

在选择Controller类型的窗口里，选中Web API Controller - Empty，并点击添加

############# 6

在 Add Controller 对话框中，将该controller 命名为“ProductsController”，点击“Add”添加。

############# 7

之后，你将会在Controllers 文件夹内看到由上面操作生成的文件ProductsController.cs。

############# 8

注意：你并不需要将controller放到名为“Controllers”的文件夹里面。本简称这样做只是因为这是可以让源文件更有条理、更有组织性。

如果生成的Controller文件没有打开的话，从 Solution Explorer里双击该文件打开它。使用下面这段代码来代替原有内容。

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使用定长数组来存储固定内容。在实际应用中，你可能需要读取数据库或从其他的数据源中获取这样的数据。

这个控制器定义了两个返回Product的方法

GetAllProducts 方法。以IEnumerable的形式返回所有的Product
GetProduct方法。通过ID来返回指定的Product

终于点题了。。。到这里，你终于有了一个可以用的 Web API 了。controller里的每个方法都对应一个或多个uri

########## 9

对于 GetProduct 方法，uri 里的id是一个占位符。举个例子，要想取得ID为5的Product，uri是api/products/5 。

如果想学习更多的关于Web API 路由 HTTP请求到controller的方法，可以看这篇教学：https://docs.microsoft.com/en-us/aspnet/web-api/overview/web-api-routing-and-actions/routing-in-aspnet-web-api

通过Javascript和JQuery来访问 Web API

在这一段内容里，我们将会添加一个HTML页面，并用Jquery的AJAX访问 Web API 取得数据，将其显示在HTML页面上。

在 Solution Explorer 里，右键点击项目名并选择添加->新项

########## 10

在 Add New Item 窗口中，左边选中C#下的Web节点，找到HTML Page,选中，命名为index.html，并点击添加。

########### 11

将刚添加的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有很多种方法，在这个教程中，我使用的是微软的AJAX CDN. 你也可以从http://jquery.com/下载它， ASP.NET “Web API” 项目中也默认包含了JQuery。

获取一组Product

要想获取所有的Product，只需要发送一个 HTTP GET 请求到 “/api/products” 即可。

这里我们用JQuery的getJSON函数来发送AJAX请求。这个请求的返回结果是一组JSON对象。“done”函数指定了一个回调，这个回调将会在AJAX成功后执行。在这个回调函数中，我们使用返回的“Product”的信息来更新HTML页面(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

要想通过ID获取指定的Product，只需要发送HTTP GET请求到 “/api/products/id”，将uri里的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后面。这个请求的返回结果是具有指定ID的单个Product的信息（JSON格式）。

运行应用

按F5来运行我们的应用。页面应该看起来像下面这样：

############# 12

要想通过ID取得一个Product，只要输入ID，并点击Search按钮

############## 13

如果你输入一个不存在的ID值，服务器将会返回一个HTTP错误：

############### 14

使用 F12来查看HTTP的请求及响应

当你使用HTTP服务时，查看HTTP请求及响应的内容是非常有帮助的。你可以在浏览器界面按F12来进入开发者界面，找到NetWork或Net栏，按F5刷新页面，即可查看HTTP的请求及响应的内容。
IE浏览器的界面就像这样：

############ 15

google像这样：

########## 16

其他浏览器的这个功能也类似。另外一个非常实用的工具是Fiddler，使用它可以对HTTP请求及响应进行查看、追踪，方便调试。

将应用部署到Azure云平台

该段省略。

下一步

Web API 2 中 Action的返回值：
http://blog.csdn.net/wf824284257/article/details/79437495

结束

本文为微软官方文档的个人译文。本译文的非商用转载请注明地址及作者，感谢。禁止商用转载。若经发现，将依法追究责任。
英文原文地址：https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api#software-versions-used-in-the-tutorial

原文作者： MikeWasson and Other 5 Contributors

主作者链接：https://github.com/MikeWasson

作者尊重微软公司的知识产权，若贵公司认为该博客有损贵公司利益，请联系作者删除

译者：大吴凡 http://www.dawufan.cn

Fanstorm丶

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
ASP.NET Web API 2 入门教学

ASP.NET Web API 2 入门教学原文更新日期：2017.11.28导航页面http://blog.csdn.net/wf824284257/article/details/79475115前言HTTP不仅用于web前后端的交互，同时也是一个可以被用来构筑API来向外提供服务和数据的这样一个强大的平台。HTTP是简单的、灵活的、无处不在的，几乎所有你可以想到的平台...
复制链接

扫一扫