创建Web API

时间：2023-01-09 19:52:31

引言

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

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

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

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

  创建一个Web API程序

 

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

创建Web API

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

创建Web API

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

创建Web API

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

创建Web API

代码如下：

 

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

创建Web API

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

创建Web 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浏览器中浏览出现如下效果

创建Web API

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

创建Web API

 Javascript访问Web API

 

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

创建Web API

代码如下：

  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>
创建Web API
<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

  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 的图片信息。

相关文章