[转载]Asp.Net MVC 4.0 Web API-Mikel

[转载]Asp.Net MVC 4.0【Web API】 – 辉太 – 博客园.

随着技术的前沿，ASP.NET也很快就步入4.0的时代了，虽然现在还没正式应用，据说MVC4.0出来的新特性很是犀利，各种犀利。结果一下给没把持住，就涉足了一下。所以分享一下，大家愿意涉足的就了解一哈。

首先，我们需要给我们的VS装环境，目前MVC4.0还是(Beta)RC版，如果日后微软发布正式版，我们需要卸载掉今天装的RC版去装正式版用。(安装MVC4.0连接是:http://www.asp.net/vnext/overview/downloads).

MVC 4.0新出的特性可谓关注最强烈的就是Web API,那Web API 到底是什么东西呢？

ASP.NET的API也是一个框架，可以很容易地建立HTTP服务。既然了解到他也是一个框架，那么我们来搞一个简单的Asp.Net的Web API.

创建一个Web API项目

启动Visual Studio 2010，并选择新建项目从开始页。或从文件菜单中，选择“ 新建“，然后项目。在模板 “窗格中，选择已安装的模板和扩展的Visual C＃节点。在Visual C＃中，选择网络。在项目模板列表中，选择“ ASP.NET MVC Web应用程序。命名项目“HelloWebAPI”，然后单击“ 确定“。如下图1.

图1.在新的ASP.NET MVC 4项目 “对话框中，选择的Web API ，然后单击“ 确定“。如下图2.

图2.

添加模型

一个模型是一个对象，表示应用程序中的数据。ASP.NET的Web API可以自动序列化你的模型，JSON，XML或其他格式，然后写入到HTTP响应消息体序列化的数据。只要客户端可以读取序列化格式，它可以反序列化的对象。大多数客户可以解析XML或JSON。此外，客户端可以显示的格式，希望通过设置HTTP请求消息中的Accept头。

开始创建一个简单的模型，代表了产品。
如果解决方案资源管理器中不可见，单击“ 查看 “菜单，并选择“解决方案资源管理器”。在Solution Explorer中，右键单击Models文件夹。从上下文菜单中，选择添加，然后选择类。类命名为“Product”。接下来，添加以下属性的Product类别。具体代码如下：

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

namespace HelloWebAPI.Models
{
public class Product : Object
{
public int Id { get; set; }

public string Name { get; set; }

public string Category { get; set; }

public decimal Price { get; set; }
}
}

添加控制器

一个控制器是一个对象，处理HTTP请求。来看看VS自动创建的Controller(控制器)，具体如下：

HomeController中是一个传统的ASP.NET MVC控制器。这是负责服务网站的HTML页面，而不是直接相关的Web API。
ValuesController是一个例子WebAPI控制器。

删除ValuesController 解决方案资源管理器中右键单击文件，并选择“ 删除“。兵器添加一个新的控制器，如下图3.：(在解决方案资源管理器中，右键单击Controllers文件夹。选择“ 添加“ ，然后选择“ 控制器“。)

图3.在“ 添加控制器 “向导，将其命名控制器”的ProductsController“。在模板下拉列表，选择空API控制器。然后单击添加。如下图4.

图4.(这里一定要看清楚模版)，创建好ProductsController，具体修改代码如下：

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

namespace HelloWebAPI.Controllers
{
using HelloWebAPI.Models;
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product{Id = 1 ,Name="Huitai", Category="People",Price=1.25M},
new Product{Id = 2,Name="Hello",Category="Hello",Price=4.5M},
new Product{Id = 3,Name="ViewSonic",Category="Computer",Price=1500M}
};

///

&nbsp;

<summary> /// 返回所有商品
/// </summary>

&nbsp;

&nbsp;

/// 返回一个枚举类型为Product
public IEnumerable GetAllProducts()
{
return this.products;
}

///

&nbsp;

<summary> /// 返回单一商品信息
/// </summary>

&nbsp;

&nbsp;

///商品的ID /// 商品
public Product GetProductById(int id)
{
var product = this.products.FirstOrDefault(p =&gt; p.Id == id);
if (product == null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
}
///

&nbsp;

<summary> /// 返回指定类别所有的商品
/// </summary>

&nbsp;

&nbsp;

public IEnumerableGetProductsByCategory(string category)
{
return this.products.Where(p =&gt; string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase));
}
}
}

现在我们就有一个工作网络的API。每个控制器上的映射到一个URI的方法，具体如下：

控制器方法	URL
GetAllProducts	/API/products
GetProductById	/API/prdoucts/ID
GetProductsByCategory

客户端可以通过发送一个HTTP GET请求的URI调用的方法。我们来看看如何完成这种映射。结果如下图5.

图5.OK，我们需要看到的是我们想要的东西，而不是VS自动创建的Index.cshtml页面。

我们试着用JavaScript和JQuery调用的Web API，首先我们先修改一下Index.cshtml页面具体修改如下：




ASP.NET Web API
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js"></script>

<div>

<h1>All Products</h1>

&nbsp;
</div>
<div><label for="prodId">ID:</label> <input id="prodId" type="text" size="5" /> <input onclick="find();" type="button" value="Search" /> 

 
</div>

&nbsp;

为了获得一个产品列表，发送一个HTTP GET请求“/ API /Products”。你可以用JQuery做如下:

 $(document).ready(function () { //发送一个AJAX请求 $.getJSON("api/products/", function (data) { //OK,则展示所有商品列表 $.each(data, function (key, val) { //格式显示文本 var str = val.Name + ': $' + val.Price; //添加一个商品到列表 $('

<ul>
	<li></li>
</ul>

', { html: str }).appendTo($('#products')); }); }); });

getJSON函数发送Ajax请求。响应将是一个JSON对象的数组。getJSON的第二个参数是请求成功完成时调用的回调函数。我们可以发送一个HTTP GET请求“/ API /Products/ ID “，其中ID是Product ID。具体如下：

 function find() { var id = $('#prodId').val(); $.getJSON("api/products/" + id, function (data) { var str = data.Name + ': $' + data.Price; $('#product').html(str); }) .fail( function (jqXHR, textStatus, err) { $('#product').html('Error: ' + err); }); }

下面的代码显示完整Index.cshtml文件。具体代码如下：

 ASP.NET Web API
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js"></script>&nbsp;

<script type="text/javascript">// <![CDATA[
            $(document).ready(function () {
                //发送一个AJAX请求
                $.getJSON("api/products/", function (data) {
                    //OK,则展示所有商品列表
                    $.each(data, function (key, val) {
                        //格式显示文本
                        var str = val.Name + ': $' + val.Price;
                        //添加一个商品到列表
                        $('	<li/>', { html: str }).appendTo($('#products'));
                    });
                });
            });

             function find() {
                var id = $('#prodId').val();
                $.getJSON("api/products/" + id,
                function (data) {
                    var str = data.Name + ': $' + data.Price;
                    $('#product').html(str);
                })
            .fail(
                function (jqXHR, textStatus, err) {
                    $('#product').html('Error: ' + err);
                });
        }      

// ]]></script>
&nbsp;
<div>
<h1>All Products</h1>
</div>
<div><label for="prodId">ID:</label>
<input id="prodId" type="text" size="5" />
<input onclick="find();" type="button" value="Search" />
<p id="product"></p>

</div>

运行我们的程序，结果如下图6-9.

图6.图7.图8.图9.