引言

在公司中用到的都是webAPI的应用程序，这个东西之前没有接触过。但是这个并不是什么新鲜的东西，因我们

之前有mvc的基础，所以说学习这个东西还是比较容易的，在开始的时候自己可能突然蒙圈了。因为在人家项目中用

到的东西自己之前都没有接触过，感觉非常的陌生甚至整个混乱了。但是当我们静下心来好好想想的话是非常容易

的，就是在某些写法上不太一样，其余的都差不多，下面就给大家创建第一个程序。

  创建一个Web API程序

 

启动VS2012创建一个新项目，在已经安装的模板中选择 ASP.NET MVC4 Web API程序

在ASP.NET MVC项目对话框中选择Web API项，点击确定

创建成功之后工程中会自动添加一个Web API服务控制器，上面并附带访问地址

项目解决方案，选择Models文件夹右键 添加一个Model类

代码如下：

 

namespace Git.Framework.WebAPI.Models
{
    public class Contact
    {
        public int ID { get; set; }

public string Name { get; set; }

public string Sex { get; set; }

public DateTime Birthday { get; set; }

public int Age { get; set; }
    } }

 

工程解决方案选择Controllers文件夹右键添加一个新的Web API controller

在添加控制器弹出对话框中选择模板： 空API控制器

控制器中添加如下代码：

 

namespace Git.Framework.WebAPI.Controllers
{
    public class ContactController : ApiController
    {
        Contact[] contacts = new Contact[] 
        { 
            new Contact(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1977-05-30"), Name="情缘", Sex="男"},
            new Contact(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐冲", Sex="男"},
            new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"},
            new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黄蓉", Sex="女"},
        };

/// <summary>
        /// /api/Contact
        /// </summary>
        /// <returns></returns>
        public IEnumerable<Contact> GetListAll()
        {
            return contacts;
        }

/// <summary>
        /// /api/Contact/id
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public Contact GetContactByID(int id)
        {
            Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id);
            if (contact == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return contact;
        }

/// <summary>
        /// 根据性别查询
        /// /api/Contact?sex=女
        /// </summary>
        /// <param name="sex"></param>
        /// <returns></returns>
        public IEnumerable<Contact> GetListBySex(string sex)
        {
            return contacts.Where(item => item.Sex == sex);
        }
    }}

 

 浏览器访问API路径

 

Controller Methed

URI

GetListAll

/api/Contact

GetListBySex

"/api/Contact?sex=" + sex

GetContactByID

/api/Contact/"+id

在IE浏览器中浏览出现如下效果

如果在Chrome 或者 FireFox 中浏览会先下如下效果

 Javascript访问Web API

 

在项目中添加一个About View视图

代码如下：

  1. <span style="font-family:SimSun;font-size:18px;">@{
  2. Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta name="viewport" content="width=device-width" />
  8. <title>About</title>
  9. <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
  10. <script type="text/ecmascript">
  11. $(document).ready(function () {
  12. $("#btnAll").click(function () {
  13. $.getJSON("/api/Contact", function (data) {
  14. var html = "<ul>";
  15. $(data).each(function (i, item) {
  16. html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";
  17. });
  18. html += "</ul>";
  19. $("#contactAll").html(html);
  20. });
  21. });
  22. $("#btnID").click(function () {
  23. var id = $("#txtID").val();
  24. $.getJSON("/api/Contact/"+id, function (data) {
  25. var html = "<ul>";
  26. $(data).each(function (i, item) {
  27. html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
  28. });
  29. html += "</ul>";
  30. $("#contactID").html(html);
  31. });
  32. });
  33. $("#btnSex").click(function () {
  34. var sex = $("#ddlSex").val();
  35. $.getJSON("/api/Contact?sex=" + sex, function (data) {
  36. var html = "<ul>";
  37. $(data).each(function (i, item) {
  38. html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
  39. });
  40. html += "</ul>";
  41. $("#contactSex").html(html);
  42. });
  43. });
  44. });
  45. </script>
  46. </head>
  47. <body>
  48. <p>
  49. <input type="button" id="btnAll" value="查询所有" />
  50. </p>
  51. <p>
  52. <input type="text"  id="txtID" name="txtID"/>
  53. <input type="button" id="btnID" value="根据ID查询" />
  54. </p>
  55. <p>
  56. <select id="ddlSex" name="ddlSex">
  57. <option value="男">男</option>
  58. <option value="女">女</option>
  59. </select>
  60. <input type="button" id="btnSex" value="根据性别查询" />
  61. </p>
  62. <div id="contactAll">
  63. </div>
  64. <div id="contactID">
  65. </div>
  66. <div id="contactSex">
  67. </div>
  68. </body>
  69. </html></span>
<span style="font-family:SimSun;font-size:18px;">@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>About</title>

    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/ecmascript">

        $(document).ready(function () {

            $("#btnAll").click(function () {

                $.getJSON("/api/Contact", function (data) {

                    var html = "<ul>";

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

                        html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";

                    });

                    html += "</ul>";

                    $("#contactAll").html(html);

                });

            });

            $("#btnID").click(function () {

                var id = $("#txtID").val();

                $.getJSON("/api/Contact/"+id, function (data) {

                    var html = "<ul>";

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

                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";

                    });

                    html += "</ul>";

                    $("#contactID").html(html);

                });

            });

            $("#btnSex").click(function () {

                var sex = $("#ddlSex").val();

                $.getJSON("/api/Contact?sex=" + sex, function (data) {

                    var html = "<ul>";

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

                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";

                    });

                    html += "</ul>";

                    $("#contactSex").html(html);

                });

            });

        });

    </script>

</head>

<body>

    <p>

        <input type="button" id="btnAll" value="查询所有" /> 

    </p>

    <p>

        <input type="text"  id="txtID" name="txtID"/>

        <input type="button" id="btnID" value="根据ID查询" /> 

    </p>

    <p>

        <select id="ddlSex" name="ddlSex">

            <option value="男">男</option>

            <option value="女">女</option>

        </select>

        <input type="button" id="btnSex" value="根据性别查询" /> 

    </p>

    <div id="contactAll">

    </div>

    <div id="contactID">

    </div>

    <div id="contactSex">

    </div>

</body>

</html></span>

运行结果效果图

  Web API总结

 

1.Web API 控制器(Controller) 继承ApiController

2. Api 的 Url Map： api/{controller}/{id} 每个"Action"是通过 Http谓词(GET/POST/PUT/DELETE)映射的

3.客户端可以通过 Http Header 的 Accept 指定返回数据的格式。默认是支持：appliction/xml 和

application/json，当想返回比如 image/jpeg 这样的图片格式时，需要添加 MediaTypeFormatter 。比如：当

指定某个 Task 时，通过指定 Accept : image/jpeg 获取该 Task 的图片信息。

创建Web API的更多相关文章

  1. ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API

    ASP.NET 5.0 的主要目标之一是统一MVC 和 Web API 框架应用. 接下来几篇文章中您会了解以下内容: ASP.NET MVC 6 中创建简单的web API. 如何从空的项目模板中启 ...

  2. 如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管

    微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我就演示一下一下几个内容 1,怎么在Asp.net mvc 6 中创建简单 ...

  3. 【ASP.NET Web API教程】2.4 创建Web API的帮助页面

    原文:[ASP.NET Web API教程]2.4 创建Web API的帮助页面 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 2.4 ...

  4. 在 MVC6 中创建 Web API

    ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API   ASP.NET 5.0 的主要目标之一是统一MVC 和 Web API 框架应用. 接下来几篇文章中您会了解以下内容: ...

  5. Mvc 6 中创建 Web Api

    如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管 微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我 ...

  6. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  7. 使用 ASP.NET Core MVC 创建 Web API（一）

    从今天开始来学习如何在 ASP.NET Core 中构建 Web API 以及每项功能的最佳适用场景.关于此次示例的数据库创建请参考<学习ASP.NET Core Razor 编程系列一> ...

  8. 使用 ASP.NET Core MVC 创建 Web API（二）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 六.添加数据库上下文 数据库上下文是使用Entity Framewor ...

  9. 使用 ASP.NET Core MVC 创建 Web API（三）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 十 ...

  10. 使用 ASP.NET Core MVC 创建 Web API（四）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

随机推荐

  1. lintcode:最长上升子序列

    题目 最长上升子序列 给定一个整数序列,找到最长上升子序列(LIS),返回LIS的长度. 样例 给出[5,4,1,2,3],这个LIS是[1,2,3],返回 3 给出[4,2,4,5,3,7],这个L ...

  2. LoadRunner8 安装步骤

    一.介绍 LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够对整个企业架构进行测试.企业使用L ...

  3. Java Map各遍历方式的性能比较

    1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keySet拿到的 ...

  4. Data Flow ->> Merge

    Merge组件的作用和Union All很相似,就是把两个输入源的结果集合并成一个.但是不同之处在于: 1)Merge输入的结果集需要先经过排序(这点表示怀疑) 2)Merge对于输入的两个结果集的数 ...

  5. [c/c++]指针数组 pk 数组指针

    首先强调 指针数组归根结底是个数组:数组指针归根结底是个指针. 数组指针 以int (*int)[10]为例 ()的优先级大于[],因此首先它是一个指针,它指向一个数组,数组的维数是10.因此数组指针 ...

  6. c# 计算1-100之间的所有质数（素数）的和

    求1-100之间的所有质数(素数)的和: 所以先必须知道什么是质数? 一个数是不是素数   “素数”是指除了能被1和自身整除外,不能被任何其它整数整除的自然数. 然后知道有哪些是质数: 记忆的方法: ...

  7. leetcode：Invert Binary Tree

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1即反转二叉树,代码如下: /** * Defin ...

  8. STL笔记（5）条款49：学习破解有关STL的编译器诊断信息

    STL笔记(5)条款49:学习破解有关STL的编译器诊断信息 条款49:学习破解有关STL的编译器诊断信息 用一个特定的大小定义一个vector是完全合法的, vector<int> v( ...

  9. 我的Linux书架

    原文地址www.cnblogs.com/wwang/archive/2011/01/27/1944406.html 工作几年来,一直从事Linux内核驱动方面的开发.从接触Linux到现在,读过不少L ...

  10. 什么是HotSpot VM & 深入理解Java虚拟机

    参考 http://book.2cto.com/201306/25434.html 另外,这篇文章也是从一个系列中得出的: <深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)> ...