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