一个简单的ASP.NET MVC WebAPI 完整实例

Anonymity | | 访问(352)

  WCF的野心造成了它的庞大复杂,HTTP的单纯造就了它的简单优美。为了实现分布式Web应用,我们不得不将两者凑合在一起 —— WCF服务以HTTP绑定宿主于IIS。

  于是有了让人晕头转向的配置、让人郁闷不已的调试,还有那ServiceContract, DataContract, EnumMember...还有还有,不要在using语句中调用WCF服务...

  于是经常自问:拿着牛刀削苹果有必要吗?废话,当然没有必要,水果刀在哪里?微软看着这么多人拿着牛刀削苹果,自己也看不下去了,于是,一种水果刀横空出世 —— ASP.NET Web API。最近我们在实际开发中有个地方用WCF太麻烦,就小试了一下水果刀,感觉还不错。下面用一个简单的示例分享一下ASP.NET Web API水果刀的用法。

  1、在以创建的MVC项目中创建一个API控制器继承ApiController

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

namespace Clump.Demo.UI.Controllers
{
    public class ValuesController : ApiController
    {
        public ListGetArticle()
        {
            ListuserList = new List{ 
            new Users{ ID=1,Title="张三",Tag="海淀区"},
            new Users{ID=2,Title="李四",Tag="昌平区"},
            new Users{ID=3,Title="王五",Tag="朝阳区"}
            };
            return userList;
        }
    }

    public class Users
    {
        // 主键ID
        public int ID { get; set; }

        // 文章标题
        public string Title { get; set; }

        // 标签,多个标签用英文逗号分隔
        public string Tag { get; set; }
    }
}

  以上代码的运行效果如下图:

  这里http://localhost:8063/api/values/ 是默认的API控制器默认路由的访问方式

  2、网页端调用

using System.Web.Mvc;

namespace Clump.Demo.UI.Controllers
{
    public class ValuesJsonController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

  3、HTML页面请求

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web API Json</title>
    <script src="/themes/common/javascript/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                contentType: "application/json",
                url: "/api/values/getarticle",
                success: function (data) {
                    var n = data;
                    var content = "";
                    $.each(n, function (i) {
                        content += "<li>ID:" + n[i].ID + "--Title:" + n[i].Title + "--Tag:" + n[i].Tag + "</li>";
                    });
                    $("#klist").html(content);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <h3>Web API Json</h3>
        <ul id="klist"></ul>
    </form>
</body>
</html>

  输出结果如下图:

  POST请求方式: