Web_Api的初识

---

   结识WEB_API的初衷是因为公司产品需要进行调整...当然，悲催的就是我是一个十足的小菜鸟，然而这次项目本人又是主力，3人小团队，这个月要走一位大牛，担子自然而然落在本人这个半路出身的菜鸟身上....所以接下来从其他版主学来的东西记录在自己博客上希望能对自己有点帮助，当然有需要学习的朋友也可以借鉴下........

本文介绍主要是在MVC中使用Web_API,对于本人的命名大家就不要太在乎了…

首先从头开始…
下面是本人借鉴的一些资料，当然比我的肯定要好…大家可以去看看。
WebAPI用法
HttpClient + ASP.NET Web API, WCF之外的另一个选择

–> 首先我们从最简单的开始
在Visual Studio 2012中新建MVC4项目，选择Web_API创建，接下来我们节能看到一个Web_API的项目了，其实一看和MVC没有什么区别。



在App_Start目录下有一个WebApiConfig.cs文件，这个文件中就是相应的Web API的路由配置了。

好啦，接下来也谢了一个简单的例子。
首先在Models下面新建一个测试类Test.cs.

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

namespace MvcApplication1.Models
{
    public class Test
    {
        public string test_name { get; set; }
        public string test_model { get; set; }
    }
}

这时新建一个空Web_Api控制器TestController.cs。

在控制器中进行数据处理，代码如下：

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

namespace MvcApplication1.Controllers
{
    public class TestController : ApiController
    {
        public static List<Test> test = new List<Test>() { 
            new Test()
            {
                test_name="Admin",
                test_model="modeltwo"
            },
            new Test(){
                test_name="Users",
                test_model="UserModel"
            }
        };

        public IEnumerable<Test> GetAll()
        {
            return test;
        }

然后我们可以在Global.asax中看到路由注册。

接下来可以用地址栏访问地址：api/test/getall，可以看到我们后台返回的数据是XML的数据模型。

后台数据处理好了，接下来就是数据的展示了…新建Index.cshtml。采用Ajax的方式将数据格式指定为Json。

<div id="body">

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax(
                {
                    url: 'api/Test/GetAll',
                    type: 'GET',
                    dataType:'json',
                    success: function (data, textStatus) {
                        alert(data);
                        alert(data[0].test_name + " ~~~~ " + data[0].test_model);
                    }
                }).fail(function (xmlHttpRequest, textStatus, errorThrown) {
                    alert("Error:" + errorThrown);
                });
        });
    </script>

</div>

采用弹出窗体的方式显示的结果是：

从这里可以看出数据返回是正确。

好啦，时间也下班了…这把先整理到这里，需要详细了解Web_API入门Post方法的朋友可以进去WebAPI用法继续学习…