创建Web API程序

引言

在公司中用到的都是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视图

代码如下：


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

posted @ 2019-12-06 10:12 零一の世界阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

零一の世界

一个小小的程序员~~

创建Web API程序

公告

Controller Methed	URI
GetListAll	/api/Contact
GetListBySex	"/api/Contact?sex=" + sex
GetContactByID	/api/Contact/"+id