ASP.NET Web API與Rest web api(一)

HTTP is not just for serving up web pages. It is also a powerful platform for building APIs that expose services and data. HTTP is simple, flexible, and ubiquitous. Almost any platform that you can think of has an HTTP library, so HTTP services can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications.

（HTTP不只服務於網頁。同時也是構建服務和數據API強大的平臺。HTTP是簡單的，靈活的，無處不在。幾乎你所能想到的任何平臺都有一個HTTP庫，因此HTTP服務能夠構建面向各類客戶端的服務，包括瀏覽器，移動設備，與傳統的桌面應用程序。）

 

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

But，Looks like the tide of the web API protocol war (if there ever was one) has shifted firmly in REST's favor while SOAP has been forced back. Web developers have cast their votes, they want RESTful APIs.

（如今看起來在Web API協議之爭，潮流正穩步的轉向REST，SOAP已經被減小，而不少Web開發者也都開始使用RESTful APIs，至少在目前看來，REST已經佔據了API模式的統治地位。）

In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of users. The front-end web page uses jQuery to display the results.

Requirements：

This tutorial uses Visual Studio 2013

Create a Web API Project

Like this：

Start Visual Studio and select New Project from the Start page. Or, from the File menu, select New and then Project.

1. In the Templates pane, select Installed Templates and expand the Visual C# node. Under Visual C#, select Web. In the list of project templates, select ASP.NET Web Application. Name the project "UsersApp" and click OK.

 

2.  In the New ASP.NET Project dialog, select the Empty template. Under "Add folders and core references for", check Web API. Click OK.

3. Adding a Model

A model is an object that represents the data in your application. ASP.NET Web API can automatically serialize your model to JSON, XML, or some other format, and then write the serialized data into the body of the HTTP response message. As long as a client can read the serialization format, it can deserialize the object. Most clients can parse either XML or JSON. Moreover, the client can indicate which format it wants by setting the Accept header in the HTTP request message.

一個模型表示了一個對象，是應用程序數據的載體。ASP.NET Web API能夠自動序列化你的模型成爲XML，JSON，或一些其餘的格式，而後輸出數據到HTTP響應流。若是一個客戶端能夠讀取序列化格式，那它也能夠反序列化的對象。大多數客戶端都可以解析XML或JSON。此外，客戶端也但願經過設置接受HTTP請求報頭格式。

Let's start by creating a simple model that represents a user.

If Solution Explorer is not already visible, click the View menu and select Solution Explorer. In Solution Explorer, right-click the Models folder. From the context menu, select Add then select Class.

 

Name the class "User". Add the following properties to the User class.

 

namespace HelloWebApi.Models 
{ 
public class User 
 { 
public int ID { get; set; } 
public string user_key { get; set; } 
public string lower_user_name { get; set; } 
 } 
}

 

4. Adding a Controller

In Web API, a controller is an object that handles HTTP requests. We'll add a controller that can return either a list of users or a single user specified by ID.

In Solution Explorer, right-click the the Controllers folder. Select Add and then select Controller.

 

      In the Add Scaffold dialog, select Web API Controller - Empty. Click Add.

 

 

In the Add Controller dialog, name the controller "UserController". Click Add.

If this file is not open already, double-click the file to open it. Replace the code in this file with the following:

namespace HelloWebApi.Controllers 
{ 
public class UserController : ApiController 
 { 
User[] users = new User[] 
 { 
new User { ID = 1, lower_user_name = "石曼迪", user_key = "mady" }, 
new User { ID = 2, lower_user_name = "狗王", user_key = "taisanDog" }, 
new User { ID = 3, lower_user_name = "道長", user_key = "kongque" } 
 }; 
public IEnumerable<User> GetAllUsers() 
 { 
return users; 
 } 
public User GetUserById(int id) 
 { 
var user = users.FirstOrDefault((p) => p.ID == id); 
if (user == null) 
 { 
throw new HttpResponseException(HttpStatusCode.NotFound); 
 } 
return user; 
 } 
 } 

 

To keep the example simple, users are stored in a fixed array inside the controller class. Of course, in a real application, you would query a database or use some other external data source.

The controller defines two methods that return users:

• The GetAllUsers method returns the entire list of users as an IEnumerable<User> type.
• The  GetUserById method looks up a single user by its ID.

That's it! You have a working web API.  Each method on the controller corresponds to one or more URIs:

Controller Method	URI
GetAllUsers	api/User/GetAllUsers
GetUserById	api/User/GetUserById/2

And then,change the Web API routes:

 

config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional }); 

 

For the GetUserById method, the id in the URI is a placeholder. For example, to get the user with ID of 2, the URI is api/User/GetUserById/2

Press F5 to start debugging the application with URL:
http://localhost:1786/api/User/ GetAllUsers   

The browser may return an errorlike this:

 

Use CMD to enter the directory:C:\Program Files\IIS Express

Execute a command:

 

appcmd set config /section:system.webServer/directoryBrowse /enabled:true

 

 

If everything goes well you will see the results:

 

 

5. Adding a WebProject

In the Solution "HelloWebApi" right-click the project and select Add, then select Add New Item dialog, select the Web Project node under Visual C#, and then named WebApp.  

 

Again, right-click the project "WebApp", In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Name the page " Test.html".

Replace everything in this file with the following:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>My Web API App</title> 
</head> 
<body> 
<div> 
<h2>All Users</h2> 
<ul id="Users" /> 
</div> 
<div> 
<h2>Search by ID</h2> 
<input type="text" id="UID" size="5" /> 
<input type="button" value="Search" onclick="find();" /> 
<p id="User" /> 
</div> 
<script src="http://common.cnblogs.com/script/jquery.js"></script> 
<script> 
var uri = 'http://localhost:1786/api/User'; 
 $(document).ready(function () { 

// 發送一個 AJAX 請求給指定網址 

$.getJSON(uri + '/GetAllUsers') 
 .done(function (data) { 
// 當城管時結果應該是包含數據的JSON. 
 $.each(data, function (key, item) { 
// 爲Users標籤添加列表 

$('<li>', { text: formatItem(item) }).appendTo($('#Users')); 
 }); 
 }); 
 }); 
function formatItem(item) { 
return item.user_key + ': ' + item.lower_user_name; 
 } 
function find() { 
var id = $('#UID').val(); 
 $.getJSON(uri + '/GetUserById/' + id) 
 .done(function (data) { 
 $('#User').text(formatItem(data)); 
 }) 
 .fail(function (jqXHR, textStatus, err) { 
 $('#User').text('Error: ' + err); 

 }); 
 } 
</script> 
</body> 
</html>

 

Getting a List of Users

To get a list of users, send an HTTP GET request to "/api/user/GetAllUsers".

The jQuery getJSON function sends an AJAX request. For response contains array of JSON objects. The done function specifies a callback that is called if the request succeeds. In the callback, we update the DOM with the user information.

 

[{"ID":1,"user_key":"mady","lower_user_name":"石曼迪"},{"ID":2,"user_key":"taisanDog","lower_user_name":"狗王"},{"ID":3,"user_key":"kongque","lower_user_name":"道長"}]

 

Getting a User By ID

To get a user by ID, send an HTTP GET  request to "/api/user/ GetUserById/id", where id is the user ID.

We still call getJSON to send the AJAX request, but this time we put the ID in the request URI. The response from this request is a JSON representation of a single user.

 

{"ID":2,"user_key":"taisanDog","lower_user_name":"狗王"}

 

6. Running the Application     

Press F5 to start debugging the application. The web page should look like the following:

 

To get a user by ID, enter the ID and click Search:

 

If you enter an invalid ID, the server returns an HTTP error:

 

Using F12 to View the HTTP Request and Response

When you are working with an HTTP service, it can be very useful to see the HTTP request and request messages. You can do this by using the F12 developer tools in Internet Explorer 9. From Internet Explorer 9, press F12 to open the tools. Click the Network tab and press Start Capturing. Now go back to the web page and press F5 to reload the web page. Internet Explorer will capture the HTTP traffic between the browser and the web server. The summary view shows all the network traffic for a page:

 

If you click the Response body tab, you can see how the user list was serialized to JSON. Other browsers have similar functionality. Another useful tool is Fiddler, a web debugging proxy. You can use Fiddler to view your HTTP traffic, and also to compose HTTP requests, which gives you full control over the HTTP headers in the request.

  The source code download Please Click Here