引言

在公司中用到的都是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. （.iso）光盘镜像文件的打开与安装

    直接解压就可以打开,然后就可以安装.exe文件

  2. wamp中的phpmyadmin打开出现:#1045 - Access denied for user 'root'@'localhost' (using password: NO)

    详细内容: MySQL said: #1045 - Access denied for user 'root'@'localhost' (using password: NO) phpMyAdmin ...

  3. WordPress主题制作教程9：文章形式

    wordpress的文章形式: aside -----------------日志:不显示标题的标准文章image --------------图像:单张图像.文章中的首个 <img /> ...

  4. MySql存储引擎特性对比

    下表显示了各种存储引擎的特性: 其中最常见的两种存储引擎是MyISAM和InnoDB 刚接触MySQL的时候可能会有些惊讶,竟然有不支持事务的存储引擎,学过关系型数据库理论的人都知道,事务是关系型数据 ...

  5. Android UI 之 Tab类型界面总结

    Android 程序中实现Tab类型界面很常见,本人在做项目的时候也经常用到,所以想在这里总结一下,实现tab类型界面的几种方式,供大家参考.如有不对之处,欢迎大家指正! 一.TabActivity ...

  6. Tomcat运行DOM4J的时候报ClassNotFoundException

    WEB应用中一个模块用到了DOM4J,加载到TOMCAT中运行,报错如下(给出部分StackTrace): java.lang.ClassNotFoundException: org.dom4j.Do ...

  7. Maven Project configuration is not up-to-date with pom.xml错误解决方法

    导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...

  8. USACO Section 2.1: Hamming Codes

    挺简单的一道题 /* ID: yingzho1 LANG: C++ TASK: hamming */ #include <iostream> #include <fstream> ...

  9. javascript把IP地址转为数值几种方案，来挑战一下效率吧

    先看看什么是IP地址: IP地址是一个32位的二进制数,通常被分割为4个“8位二进制数”(也就是4个字节).IP地址通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~25 ...

  10. python lambda函数详细解析（面试经常遇到）

    1 作用:通常是用来在python中创建匿名函数的 2 格式: lambda 参数[,参数] : 表达式 3 注意: (1)lambda定义的是单行函数, 如果需要复杂的函数,应该定义普通函数 (2) ...