引言

在公司中用到的都是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. 好玩的算法（JS版）

    1.字符串反转 'cba'.split('').reverse().join(''); 2.在数组最后一位添加一项 array[array.length]=(new value);

  2. mmap 的理解

    mmap 的理解 采用共享内存通信的一个显而易见的好处 是效率高,因为进程可以直接读写内存,而不需要任何数据的拷贝.对于像管道和消息队列等通信方式,则需要在内核和用户空间进行四次的数据拷贝,而共享内存 ...

  3. React属性和状态对比

    一.相似点 二.区别 三.如何区分 PS:所有的数据都可以变成属性

  4. iOS LLDB调试器和断点调试

    技巧一:运行时修改变量的值 你以前怎么验证是不是某个变量的值导致整段程序不能正常工作?修改代码中的变量的值,然后cmd+r重新启动app?现在你不需要这么做了,只需要设置一个断点,当程序在这进入调试模 ...

  5. 蓝牙接收苹果手机通知 ANCS协议分析

    蓝牙接收苹果手机通知 ANCS协议分析 转载,请注明出处:http://www.cnblogs.com/alexcai/p/4321514.html 综述 现在有许多蓝牙手表.手环都能接收苹果ipho ...

  6. 纯java从apk文件里获取包名、版本号、icon

    简洁:不超过5个java文件 依赖:仅依赖aapt.exe 支持:仅限windows 功能:用纯java获取apk文集里的包名,版本号,图标文件[可获取到流直接保存到文件系统] 原理:比较上一篇文章里 ...

  7. JSON格式化 JSON美化 输出到html

    {"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...

  8. AIX 内存使用情况

    cat > WHAT_EVER_YOU_WANT.sh#!/usr/bin/ksh#memory calculatorum=`svmon -G | head -2|tail -1| awk {' ...

  9. [POJ1050]To the Max（最大子矩阵，DP）

    题目链接:http://poj.org/problem?id=1050 发现这个题没有写过题解,现在补上吧,思路挺经典的. 思路就是枚举所有的连续的连续的行,比如1 2 3 4 12 23 34 45 ...

  10. apiCloud创建APP项目

    1.注册一个apiCloud账户 2.创建一个应用 3.安装sublime插件 4.用sublime创建应用 5.配置参数,保证一致 6.上传代码,两种方式 一种是压缩成zip 一种是配置svn,通过 ...