MVC 之 WebAPI 系列一

1. Web API简单说明

近来很多大型的平台都公开了Web API。比如百度地图 Web API，做过地图相关的人都熟悉。公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能，以及通过在浏览器中使用 JavaScript来创建更丰富的HTML体验。所以我相信Web API会越来越有它的用武之地。

说道Web API很多人都会想到Web服务，但是他们仍然有一定的区别：Web API服务是通过一般的 HTTP公开了，而不是通过更正式的服务合同 （如SOAP）

 2. ASP.NET Web API简介

    ASP. NET Web API支持让你能够轻松地创建功能强大的 Web API，可以从范围广泛的客户端 （包括使用 JavaScript从浏览器中，到任何移动/客户端平台上的本机应用程序）访问。它提供以下支持：

 

(1)现代 HTTP 的编程模型：在你的 Web 应用程序中直接访问和处理 HTTP 请求并响应，使用清洁、 强类型的 HTTP 对象模型。除了在服务器上支持这个 HTTP 的编程模型之外，通过使用新的 HttpClient API来从任何.NET 应用程序中调用 Web ApI，我们也支持客户端中相同的编程模型。

(2)内容协商： Web API 有对内容协商的内置支持 — — 这使客户端和服务器一起工作以决定从一个 API 返回的正确的数据格式。我们为JSON、 XML 和Form URL 编码的格式提供默认支持，并可以通过添加你自己的格式化程序来扩展这种支持，或者甚至用你自己的来替换默认的内容协商策略。

(3)查询组成： Web API 通过 OData URL 公约使你能够轻松地支持查询。当你从你的 Web API 返回一种类型的 IQueryable <T> 时，框架将自动为它提供 OData 查询支持— —使其易于分页和排序。

(4)模型绑定和验证：模型绑定器提供了一种简单的方法来从HTTP 请求中的不同部分提取数据，并将这些信息部分转换为Web API行为可使用的.NET对象。Web API 支持相同的模型绑定和ASP. NET MVC 现今支持的验证基础结构。

(5)路由： Web ApI 支持完整的路由功能集。现今ASP. NET MVC 和 ASP.NET也支持这一点，包括路线参数和约束。默认情况下，Web API 还提供了智能公约，使你能够轻松地创建实现 Web ApI的类，而无需不得不将属性应用到你的类或方法中。Web API 的配置纯粹是通过代码来实现的 — — 保持你的配置文件干净。

(6)筛选器： Web ApI 使你能够轻松地使用和创建筛选器 （例如： [授权]），那样你能够封装和应用交叉行为。

(7)改进的可测试性： 与其在静态文本对象中设置 HTTP 的详细信息，不如将 Web API 行为与 HttpRequestMessage 和 HttpResponseMessage 一起使用— — 两个新 的HTTP对象 （在其他内） 使测试更容易。例如，你可以单元测试你的 Web ApI，而无需不得不使用 Mocking 框架。

(8)IoC支持： Web API 支持由 ASP. NET MVC 实现的服务定位器模式，使你能够解决不同设备的依赖。你可以轻松地使用IoC容器或依赖注射架构来集成，以保持干净的依赖解决方案。

   (9)灵活的托管： Web ApI可以托管在任何类型的 ASP.NET应用程序内 （包括这两个基于应用程序的ASP. NET MVC和ASP.NET Web Forms）。我们还设计了 Web API 支持，这样，你还可以选择在你自己的进程内托管/公开它们，如果你不想使用 ASP.NET/IIS 来这样做。至于你如何以及在哪儿使用它，这给了你最大的灵活性。

 

3. 首先来创建一个 WebAPI 程序

 

 

选择 Web API

 

创建后，默认目录如下，默认你可以浏览 ValuesController：

 

4. 在Model文件夹，创建一个对象类 Student

 

类中写上一些必要字段：

 

5. 新建一个 StudentController.cs

 

Controller中，写上一些取数逻辑方法

public class StudentController : ApiController
    {
        /// <summary>
        /// 生成基础数据
        /// </summary>
        Student[] students = new Student[] 
        { 
            new Student(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1877-05-30"), Name="刘备", Sex="男"},
            new Student(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1880-05-30"), Name="关羽", Sex="男"},
            new Student(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1885-05-30"), Name="张飞", Sex="男"},
            new Student(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1900-05-30"), Name="赵云", Sex="男"},
            new Student(){ ID=5, Age=18, Birthday=Convert.ToDateTime("1920-05-30"), Name="诸葛亮", Sex="男"},
            new Student(){ ID=6, Age=16, Birthday=Convert.ToDateTime("1920-05-30"), Name="孙尚香", Sex="女"},
        };

        //获取所有学生
        public IEnumerable<Student> GetStudentAll()
        {
            return students;
        }

        /// <summary>
        /// 根据ID获取学生
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public Student GetStudentByID(int id)
        {
            Student student = students.FirstOrDefault<Student>(t => t.ID == id);
            if (student == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return student;
        }

        /// <summary>
        /// 根据性别获取学生
        /// </summary>
        /// <param name="sex"></param>
        /// <returns></returns>
        public IEnumerable<Student> GetStudentBySex(string sex)
        {
            return students.Where(t => t.Sex == sex);
        }
    }

 

6. 写完后，运行，我们就可以在浏览器查看到所写的方法获取到的数据

WebAPI，是根据方法首个单词来匹配映射的。以Get开头的，则使用 getJson 调用时触发；同理，使用Post开头的，则使用 postJson 调用时触发(后续会详讲)

 

（1）我们浏览一下界面，获取所有的信息：

 

（2）以ID进行筛选：

（3）以性别进行筛选：

7. 证明我们写的方法生效了。当然这么粗糙的XML语句，客户会直接跳起来的。那么，我们现在使用 Javascript 来进行对数据的读取，展示到页面上

我们在Home文件夹，新增一个 Student 的视图

 

添加后，记得在 HomeController.cs 中添加 Student 的 Action，不然会报错

然后，我写了一个简单的页面，比较粗糙，能理解思路便好：

 

第一个按钮：查询所有的学生数据

第二个按钮：输入ID号，然后根据ID号进行查询

第三个按钮：选择性别，然后根据性别进行查询

界面代码如下：

<h2>Student Web API 测试</h2>
<div class="ALL">
    <input id="btnALL" type="button"  value="查询所有" /><br />
</div>
<div class="ID">
    输入ID:<input type="text" id="num" style="width:50px;" />
    <input id="btnNum" type="button"  value="ID查询" />
</div>

<div class="Sex">
    选择性别:
    <select id="ddl" name="ddl">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input id="btnSex" type="button" value="Sex查询" />
</div>

 

8. 当基本的页面有了，那我们就写脚本，来把前台界面，与后台逻辑方法串连起来

（1）查询所有

//获取所有
    $("#btnALL").click(function () {
        $.getJSON("/api/Student", function (data) {
            var html = "<ul>";
            $(data).each(function (i, item) {
                html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
            });
            html += "</ul>";
            $(".ALL").html(html);
        });
    });

界面结果：

 

（2）根据ID号进行查询，输入3

//根据ID值获取
    $("#btnNum").click(function () {
        var id = $("#num").val();//输入的ID号
        $.getJSON("/api/Student/"+id, function (data) {
            var html = "<ul>";
            $(data).each(function (i, item) {
                html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
            });
            html += "</ul>";
            $(".ID").html(html);
        });
    });

界面结果：

 

（3）根据性别进行查询，默认男

//根据性别获取
    $("#btnSex").click(function () {
        var sex = $("select option").val();//输入的ID号
        alert(sex);
        $.getJSON("/api/Student/?sex=" + sex, function (data) {
            var html = "<ul>";
            $(data).each(function (i, item) {
                html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
            });
            html += "</ul>";
            $(".Sex").html(html);
        });
    });

界面结果略：

 

综上，就是使用前端脚本，与Api连接在一起了。