您的位置：首页 > 编程语言 > ASP

Asp.Net MVC 4.0【Web API】

2012-07-13 18:04 330 查看
随着技术的前沿，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}
};

/// <summary>
/// 返回所有商品
/// </summary>
/// <returns>返回一个枚举类型为Product</returns>
public IEnumerable<Product> GetAllProducts()
{
return this.products;
}

/// <summary>
/// 返回单一商品信息
/// </summary>
/// <param name="id">商品的ID</param>
/// <returns>商品</returns>
public Product GetProductById(int id)
{
var product = this.products.FirstOrDefault(p => p.Id == id);
if (product == null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
}
/// <summary>
/// 返回指定类别所有的商品
/// </summary>
public IEnumerable<Product> GetProductsByCategory(string category)
{
return this.products.Where(p => 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页面具体修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ASP.NET Web API</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js"
type="text/javascript"></script>
</head>
<body>
<div>
<h1>All Products</h1>
<ul id='products' />
</div>
<div>
<label for="prodId">ID:</label>
<input type="text" id="prodId" size="5"/>
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
</body>
</html>


为了获得一个产品列表，发送一个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;
//添加一个商品到列表
$('<li/>', { 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文件。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ASP.NET Web API</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(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>
</head>
<body>
<div>
<h1>All Products</h1>
<ul id='products' />
</div>
<div>
<label for="prodId">ID:</label>
<input type="text" id="prodId" size="5"/>
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
</body>
</html>


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


图6.

图7.

图8.

图9.

虽然十分丑陋，但是终究还是出来了。OK，今天就先了解这么些，后续继续学习。文章那里要是有描述错误还是不对的地方，还请前辈们多多批评指教，大家共同学习，进步！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航