Asp.Net Web API 2(入门)第一课

 

前言

　　Http不仅仅服务于Web Pages。它也是一个创建展示服务和数据的API的强大平台。Http是简单的、灵活的、无处不在的。你能想象到几乎任何的平台都会有HTTP服务库。HTTP服务可以涉及到范围广泛的客户端，包括浏览器、各种移动设备和传统的桌面应用程序。

　　Asp.Net Web API是在.NET Framework框架上用于建立Web APIs的一个框架。在这个教程中，你将会使用Asp.Net Web API框架来创建一个能够返回产品列表的Web API。前端的Web 页面使用jQuery来展示这个结果。

　　在这个教程当中我将会使用VS2013来创建一个简单的示例。提供本文项目示例下载链接http://pan.baidu.com/share/link?shareid=928144769&uk=4244870074

创建一个Web API项目

第一步：启动Visual Studio，进行创建项目。下面是项目创建过程。

您还可以创建一个 Web API 项目，利用"Web API"模板。Web API 模板使用 ASP.NET MVC 提供 API 的帮助页。我使用的空模板在本教程中因为我想要显示无 MVC Web API。一般情况下，你不需要知道 ASP.NET MVC 中使用 Web API。

添加Model

　　一个模型就是在你的应用程序中展示数据的一个对象。ASP.NET Web API 可以自动序列化你的模型到 JSON、 XML 或一些其他的格式，然后把已序列话的数据写入到HTTP响应消息的正文。只要客户端可以读取序列化的数据，那么它同样可以反序列这个对象。大多数的客户端都可以解析JSON或者XML。此外，客户端可以声明它想要通过 HTTP 请求消息中设置的接受标头的那种格式。

　　让我们开始创建一个简单的用于展示产品的Model。

　　

直接在Model文件夹右键，如上图所示。然后命名为“Product”,再为其添加如下属性：

namespace WebApi.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请求的对象。我们将添加一个控制器，它既可以返回一个产品的列表数据，也可以通过产品ID返回单个产品信息。

请注意：如果你使用了 ASP.NET MVC 中，您已熟悉控制器。Web API 控制器类似于 MVC 控制器，但是继承ApiController类，而不是控制器类。

在控制器（Controller）文件夹右键，然后添加控制器，再选择一个空的API控制器模版如下图所示，命名为ProductsController。

你不需要将你添加的Api控制器必须放入到命名为“Controller”的文件夹。这只是方便的来组织你的源文件的文件夹名称。

然后打开该控制器文件 ProductsController，将代码替换为以下内容

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using WebApi.Models;

namespace WebApi.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>类型作为返回类型。

　　GetProductById方法通过产品ID进行查询一个单个产品。

就这么简单，现在你有一个工作的Web API了。控制器上的每个方法都对应了一个或多个URI。

对于GetProductById的方法，URI 中的id就是一个占位符。例如，若要获得id 为 5 的产品，URI 是api/products/5。

有关 Web API 如何将 HTTP 请求路由到控制器方法的详细信息，请参见请参见在 ASP.NET Web API 中的路由。(此文章暂为完成)

通过JavaScript和jQuery来调用Web API

在这个小节，我们将添加一个HTML页面来使用AJAX来调用Web  API。我们将使用jQuery的AJAX来调用并来更新页面的结果。

在Web API项目上右键选择Html页进行添加，并命名为Index。

在本文我们通过使用Microsoft Ajax CDN，直接http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js。

用以下内容来替换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 () {

            $.getJSON(uri)

                .done(function (data) {

                    $.each(data, function (key, item) {

                        $('<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>

　　GetAllProducts

为了获取一个产品的列表，需要发送一个“api/products”的HTTP Get请求。

jQuery的GetJSON函数发送一个AJAX请求。为了响应包含JSON对象的数组。指定的done函数如果请求成功，则会调用回调函数。在这个回调函数中，我们将更新产品信息到DOM元素。

        var uri = 'api/products';

        $(document).ready(function () {

            $.getJSON(uri)

                .done(function (data) {

                    $.each(data, function (key, item) {

                        $('<li>', { text: formatItem(item) }).appendTo($('#products'));

                    });

                });

        });

        function formatItem(item) {

            return item.Name + ': $' + item.Price;

        }

　　GetProduct

通过一个ID获取一个产品的信息，我们需要发送一个“api/products/id”的HTTP请求，id就是产品ID。

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

                });

        }

我们仍然使用 getJSON来发送 AJAX 请求，但这次我们将 ID 放在请求 URI 中。来自此请求的响应是一个单一产品的 JSON 表示。

调试、运行

通过上面的截图演示可以看到列表是实现了，然后通过下面的搜索框进行搜索，也就是通过单个ID来获取单个产品信息的也实现了。

我现在使用的是IE10,那么你可以直接通过F12来查看请求的信息

总结

本文初步简单的使用了Asp.Net Web API，作为一个简单入门示例。通过简单的理解和翻译微软官网的文章，来进一步的学习英语，提高自己阅读英文文章的能力，也来学习一下微软的新技术，虽然Web API出来也很久了，可是对于我来说，这也是初次接触。如果您正在查看本文，那么希望本文能对您有所帮助。如果文中有什么不当之处，敬请了解，也希望您能帮助我修正一下。

下一节将来学习创建一个支持CRUD操作的Web  API。

本文的参考链接为http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

 
 

Asp.Net Web API 2(入门)第一课的更多相关文章

  1. Asp.Net Web API 2第六课——Web API路由和动作选择

    Asp.Net Web API 导航 Asp.Net Web API第一课——入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web AP ...

  2. Asp.Net Web API 2第五课——Web API路由

    Asp.Net Web API 导航   Asp.Net Web API第一课——入门 http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web ...

  3. Asp.Net Web API 2第四课——HttpClient消息处理器

    Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...

  4. 水果项目第3集-asp.net web api开发入门

    app后台开发,可以用asp.net webservice技术. 也有一种重量级一点的叫WCF,也可以用来做app后台开发. 现在可以用asp.net web api来开发app后台. Asp.net ...

  5. Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2（OData终结点）

    前言 很久没更新博客了,加上刚过年,现在准备重新开战,继续自己的学习之路.本文已同步到Web API2系列文章中http://www.cnblogs.com/aehyok/p/3446289.html ...

  6. Asp.Net Web API 2第十三课——ASP.NET Web API中的JSON和XML序列化

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文描述ASP.NET W ...

  7. Asp.Net Web API 2第十一课——在Web API中使用Dependency Resolver

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文主要来介绍在Asp.N ...

  8. Asp.Net Web API 2第八课——Web API 2中的属性路由

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 路由就是Web API如何 ...

  9. [转]Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2（OData终结点）

    本文转自:http://www.cnblogs.com/aehyok/p/3545824.html 前言 很久没更新博客了,加上刚过年,现在准备重新开战,继续自己的学习之路.本文已同步到Web API ...

随机推荐

  1. 【通过做专题研习Android】知识点：SharedPreferences

    Ⅰ. 一个简短的引论 很多时候我们需要开发软件,为用户提供软件参数设置功能,比如,我们经常使用 QQ.用户可以设置自己是否同意加入一个陌生人为好友.对于软件的配置参数的存储,假设window採用ini ...

  2. Tips & Tricks：Apache log4j简明教程（二）

    在上一讲Apache log4j简明教程(一)中介绍了log4j的基本概念,配置文件,以及将日志写入文件的方法,并给出了一个详细的示例.这一讲,我在继续谈一谈如何使用log4j将日志写入MySQL数据 ...

  3. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  4. Cocos2d-x 3.2 大富翁游戏项目开发-第五部分 单机游戏-级别选择ScrollView

    于MenuScene.cpp 点击单机游戏后会调用 Director::getInstance()->pushScene(MapChooseScene::createScene()); 进入到关 ...

  5. iOS根据获取的月和日星座名称

    /** * 依据月和日的下标获取星座名 * * @param monthIndex 月的下标 * @param dayIndex 日的下标 * * @return 星座名 */ - (NSString ...

  6. 关于”机器学习方法“，&quot;深度学习方法&quot;系列

    "机器学习/深度学习方法"系列,我本着开放与共享(open and share)的精神撰写,目的是让很多其它的人了解机器学习的概念,理解其原理,学会应用.如今网上各种技术类文章非常 ...

  7. Java数据结构与算法(1) - ch02有序表(OrderedArray)

    有序表需要掌握的插入方法,删除方法和二分法查找方法. 插入方法: 从前往后找到比要插入的值大的数组项,将该数组项及之后的项均后移一位(从最后一项起依次后移),最后将要插入的值插入当前数组项. 删除方法 ...

  8. jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  9. checkbox属性checked="checked"但状态不是勾选状态的解决办法

    原因: jQuery API明确说明,1.6+的jQuery要用prop,不能用attr否则无效,尤其是checkBox的checked的属性的判断.

  10. 小结css2与css3的区别

    CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg:  div{animation: myfirst 5s linear 2s infinite a ...