ASP.NET MVC – 第一个Web API,Hello Web API

ASP.NET MVC - 第一个Web API,Hello Web API


支持版本

  • ASP.NET MVC 4 Beta

从二月中ASP.NET MVC 4 Beta 发布到现在,终于比较有时间可以开始一系列的Web API的教学部分了,这个系列的教学,主要还是从ASP.NET的官方网站加上小弟自己的破英文翻译与见解和而来,当然,内容绝对不会百分之百和官网一样,毕竟算是阅读后的笔记,所以喜欢原文的人,也可以去官网上面阅读。

什么是Web API

这个要从HTTP开始说起,大家对于HTTP这四个字,我想大概每天都会去打到他,但是HTTP到底是什么!?没错,HTTP其实中文就叫做"超本文传输协定",所以HTTP其实是一个协定;而这个协定我们通常拿来传递的数据,就是HTML"超本文标记语言",但是HTTP只能应用在网页上吗!?,当然不,就如前面说的,HTTP是一个协定,HTTP不是一个只能处理HTML而已。

HTTP是很强大的,而且现在HTTP这个协定已经是一个公订的标准,不管是怎样的设备,怎样的设备,都有对应的应用程序可以轻松的使用HTTP这个协定!当然,最常用的还是在网页上面了。

那HTTP还有什么应用!?没错,就是大家常听到的Web Service;Web Service简单的说,就是透过标准的Web协定( 这里使用的是HTTP ),来提供各式各样的服务;例如,我们可能打一段网址,他会回传数据、或是送出一个Post消息,他就可以发送简讯等等,这些都是Web Service的应用。

那ASP.NET MVC Web API又是啥东西,Web API其实只是一个名词,说穿了,只是利用ASP.NET MVC的架构去实践Web Service的服务,就是这样的简单;但是Web Service这块也是有很多学问的,如果有兴趣的话,大家可以再去Google查询关于Web Service的知识,毕竟这篇是要讲ASP.NET MVC Web API,我们就不要离题太远了XDD。

Hello Web API

话不多说,与其讲一堆东西让大家睡着,那还不如赶快先来实做看看吧。

首先,我们需要建立一个新的项目,这里我使用Visual Studio 11,但是如果使用Visual Studio 2010也是一样的。

image

接下来,我们就使用Web API的Template吧!,如果未来熟了,也可以使用空的样板来自己建立。

image

接下来,建立好的项目,我们就直接执行看看吧!

image

既然他默认是用IE10,那我们就用IE10来看;我们顺便打开IE10的侦错工具,按下F12,或是最右上角的齿轮图示,里面就可以看到侦错工具,

image

打开后,就可以看到如下图。

image

接下来,我们要开始监控一下网络,我们在侦错工具选择Network,然后选择Start capturing。

image

接下来,我们要在网址后面加上api/values,按下enter后,可能会跳出消息,问你要不要存档或是开启( 各浏览器的状况可能不同 ),但不用担心,这真的不是病毒XDD,你可选择Save到桌面然后晚一点再删掉,或是选择打开,如果选择打开,他可能会问你要用什么程序开启,你可以选择记事本,或是按ESC离开,但无论怎样选择,都不会有什么影响啦XDD;接下来,我们停止监听,并按下旁边的显示详细数据。

image

如果用记事本开启,为了证明真的不是病毒,会出现如下画面。

image

之后,我们就可以开始看看,这个输入了这个网址后,发生了什么事情;我们先看到Request headers这边,我们可以从这边看到,发出请求的是GET。

image

然后我们看看Response headers,这里代表的是响应,我们可以看到响应是200 OK,表示有正确的响应了,重点是Content-Type这边,我们可以看到的是application/json这串文字,有没有发现json和你刚刚存档的副文件名是一样的!?

image

然后我们看到Response body这边,这就代表着响应的内容,如果刚刚你有用记事本打开,会发现内容也是一样的;到这边有没有觉得很神奇!! ( 如果已经懂这些东西的前辈们,请多包涵用这个老梗QQ )。

image

或许有些人会觉得很神奇XDD,或许有些人会觉得很无聊 ( 因为看了那么长,完全没讲到重点 ),但是我觉得,这几个消息是很重要的,整个ASP.NET MVC Web API会和这几个地方息息相关。

JSON

刚刚看了那么多东西,我相信这个名词大家应该会特别耳熟,在谈论JSON之前,还记不记得前面所谈到的Web Service;没错,刚刚打的网址其实就是在透过HTTP来叫用一个Web Service,而这个Web Service的功能就是会返回一些数据。

通常Web Service多多少少都会回传一些数据,就算是调用传送简讯的Web Service,至少也会回传个是否成功的消息,( 当然,也可能碰到没有回传数据的Web Service ),而早期传递消息数据,最常用到的一种格式就是XML ( 或许有人会说,也有可能只回传一个字符串阿,好吧,这也是有可能啦,但这边既然谈论的是数据,就不是单单字符串这一点点的东西了 ),而XML最大的一个问题就是体积庞大。

谈到了数据传递,我们就来谈谈JSON吧,JSON(JavaScript Object Notation) 其实是一种轻量级的数据交换格式,和XML最大的不同点在于,XML是一个完整的标记语言,但JSON不是;基本上,他们的设计理念本来就是不同,JSON的目标就是小巧,可以让浏览器快速的解析与传递,而就如前面所说的,并非是要拿JSON来取代XML,两个的取向是不同的( 实际上,之前听一个了师说,XML在某些情况下,也可能比JSON还小! )

回头看范例

我们回头来看看上面三张图,我们现在应该可以很清楚的了解,其实这个范例的目的,就是透过HTTP的GET,来对api/values进行调用,目的是取得数据。

image

然后,会响应的是JSON格式的数据,并且是utf-8编码喔!,也因为浏览器发现是JSON格式,所以会问你要不要存档,或是开启检视此数据。

image

然后,这个JSON的格式内容如下图,这个表示法,是JSON的个表示法,代表着的意思是,这是一个数组( Array ),数组位置0的值是values1,1的位置是value2。

image

接下来,该看看Code了。

该看Code了吧

我们打开Controllers目录下的ValuesController,如果对于ASP.NET MVC架构还不熟的人,可以参考这篇。

image

其实这就是很典型的Controller,不过,现在继承的东西不一样了,Web API的Controller继承的是ApiController;其次,回传的东西也不再是ActionResult,以这边的例子来看,回传的就是一个IEnumerable类型。接下来,我们看一下这个程序的第一个Function就好,也就是Get();熟悉ASP.NET MVC的人,第一个疑问一定就是,这个Action是Get,但为什么刚刚Key的网址却没有Get!?( 刚刚的网址是api/values ),我们稍微看一下后面的Function,我们会发现,这四个分别为Get、Post、Put、Delete,没错,聪明的你,应该发现到了,其实在ASP.NET MVC Web API 的Controller,里面对应的不是Action了,而是HTTP里面的四种命令( 也就是Get、Post、Put、Delete );所以网址里面不会是以前的Controller/Action格式,而是只有Controller而已 ( 默认前面会加api,所以变成api/controller ),也就是说,实际上会调用哪个Controller的Function,不是利用网址来决定,而是利用HTTP的命令,这也是典型的REST风格;如前面的范例,我们就是使用HTTP的Get命令,所以对应到的是ValuesController的GET Function;举个例子,如果是一个ClientBasicController,并有一个post() Function,要怎么调用呢?,答案就是使用HTTP的post命令来调用网址api/ClientBasic;而这边的Get() Function其实很简单,就是回传一个String数组,里面内容是Value1和Value2,有没有发现,这刚好就是对应到返回来的JSON的数据。


using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web.Http;

namespace MvcHelloWebAPI.Controllers
{
    public class ValuesController : ApiController
    {
        // GET /api/values
        public IEnumerable Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET /api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST /api/values
        public void Post(string value)
        {
        }

        // PUT /api/values/5
        public void Put(int id, string value)
        {
        }

        // DELETE /api/values/5
        public void Delete(int id)
        {
        }
    }
}

写到这边,我相信大家应该有一定的了解了,后面几篇,会再针对细节详细的解说,到这边,只需要了解到一些基本的观念就可以了,最后,我们还没写Hello World耶!,

写Hello World吧!

我们这边改第二个Function,也就是有传入int的Get(),然后改成Hello Web API吧。


using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web.Http;

namespace MvcHelloWebAPI.Controllers
{
    public class ValuesController : ApiController
    {
        // GET /api/values
        public IEnumerable Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET /api/values/5
        //改一下这边!
        public string Get(int id)
        {
            return "Hello Web API";
        }

        // POST /api/values
        public void Post(string value)
        {
        }

        // PUT /api/values/5
        public void Put(int id, string value)
        {
        }

        // DELETE /api/values/5
        public void Delete(int id)
        {
        }
    }
}

然后Run起来,并且在网址边加上api/values/1,我们就可以得到刚刚所打的字符串。

image

到这边,超级简单的ASP.NET MVC Web API范例就完成了。

后记

其实ASP.NET MVC Web API并不难,对于初学者而言困难的反而是Web Service、JSON这些东西,对于已经熟悉Web Service的人而言,大概只要注意一下网址的格式,大致上就可以简单上手了;所以这篇的重心,我比较放在懂ASP.NET MVC架构,但对Web Service不熟悉的人身上,也希望这篇可以让这些人对于Web Service有个初步的了解,并且有方向可以去专研;下一篇,会开始介绍一下使用jQuery进行ASP.NET MVC Web API的调用,也请大家多多指教。

参考数据

  • http://www.asp.net/
  • http://zh.wikipedia.org/wiki/Web_Services
  • http://zh.wikipedia.org/wiki/JSON
  • http://www.json.org/json-zh.html
  • http://zh.wikipedia.org/zh-hant/REST