引言

在公司中用到的都是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. OpenStack学习系列-----第一篇 OpenStack介绍

    刚开始接触OpenStack,被它所承诺的前景,以及现在业界对它的期望吸引(OpenStack被誉为21世纪的Linux开源社区,可以预见其的发展前景是何其广阔.).怎么说呢,我现在也暂时相信,Ope ...

  2. NoSQL数据库有哪些

    NoSQL太火,冒出太多产品了,保守估计也成百上千了. 互联网公司常用的基本集中在以下几种,每种只举一个比较常见或者应用比较成功的例子吧. 1. In-Memory KV Store : Redis ...

  3. unbuntu下vnc和vnc2swf的使用

    安装:sudo apt-get install vnc4server,vncviewer 默认vnc2swf安装了的. pyvnc2swf的说明文档:http://www.unixuser.org/~ ...

  4. JavaWeb笔记——三大组件之过滤器

    过滤器JavaWeb三大组件之一,它与Servlet很相似!不它过滤器是用来拦截请求的,而不是处理请求的.  当用户请求某个Servlet时,会先执行部署在这个请求上的Filter,如果Filter“ ...

  5. Linux下Websphere无法关闭

    Websphere 启动关闭命令  linux 下首先查看进程 ./stopServcer.sh server1如果停不掉websphere服务.则强制杀掉其进程! 1.查看websphere进程号b ...

  6. jenkins集成自动化部署插件(一) deploy-plugin

    在实际情况中项目构建成功,特别是web项目构建成功是需要将war放到对应的服务上面,进行运行(测试的阶段可能就是发布到测试服务器上面)这样只需要指定构建的触发策略就可以自动构建以及部署,省去不少人工的 ...

  7. IOS 改变导航栏返回按钮的标题

    IOS 改变导航栏返回按钮的标题   下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一 ...

  8. Mybatis配置中遇到的问题和问题分析

    1.为什么这么配置,这个配置主要是作用是什么,主要的是针对什么 mybatis之xml映射配置 sql语句当中 Example_Where_Clause 这个仅仅是一段sql语句吗? <trim ...

  9. 解决 iReport 生成 pdf 时显示不出中文的问题

    有没有遇到这样的情况:在使用 iReport 做报表时,用pdf预览显示不出中文? 解决步骤是这样的: 1.加入jar包 下载两个jar包:itextasian.jar 和 itext-x.y.jar ...

  10. Linux天天见

    一.Linux基础篇 1. 发行版本 redhat/centos/suse/debian/ 2. 目录结构 /bin /boot -> grub /dev /etc ->init.d sy ...