5.2 發送HTML表單數據：URL編碼的表單數據

本文是【ASP.NET Web API系列教程】的一部分，若是您是第一次看本系列教程，請先看前面的內容。

5.2 Sending HTML Form Data
5.2 發送HTML表單數據

本文引自：http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1

By Mike Wasson|June 15, 2012
做者：Mike Wasson | 日期：2012-6-15

Part 1: Form-urlencoded Data
第1部分：URL編碼的表單數據

This article shows how to post form-urlencoded data to a Web API controller.
本文顯示如何向Web API控制器遞交URL編碼的表單數據。

• Overview of HTML Forms
  HTML表單概述
• Sending Complex Types
  發送複合類型
• Sending Form Data via AJAX 
  經過AJAX發送表單數據
• Sending Simple Types
  發送簡單類型

Download the completed project.
下載完整的項目。

Overview of HTML Forms
HTML表單概述

HTML forms use either GET or POST to send data to the server. The method attribute of the form element gives the HTTP method:
HTML表單使用GET或POST將數據發送給服務器。form元素的method標籤屬性給出HTTP方法：

<form action="api/values"  method="post">

The default method is GET. If the form uses GET, the form data is encoded in the URI as a query string. If the form uses POST, the form data is placed in the request body. For POSTed data, the enctype attribute specifies the format of the request body:
默認方法是GET。若是form使用GET，表單數據做爲查詢字符串被編碼到URI中。若是form使用POST，表單數據被放在請求體中。對於POST的數據，enctype標籤屬性會指明請求體的格式：

enctype	Description 描述
application/x-www-form-urlencoded	Form data is encoded as name/value pairs, similar to a URI query string. This is the default format for POST. 表單數據被編碼成「名字/值」對，相似於URI查詢字符串。這是POST的默認格式。
multipart/form-data	Form data is encoded as a multipart MIME message. Use this format if you are uploading a file to the server. 表單數據被編碼成多部分MIME消息。若是把文件上傳到服務器，使用的是這種格式。

MIME指Multipurpose Internet Mail Extensions — 多用途互聯網郵件擴展，它是經過網絡傳遞郵件消息的一個互聯網標準。MIME規定了用於表示各類數據類型的符號化方法。在HTTP協議中，對HTTP消息的內容類型也採用了MIME的這種表示數據類型的方法。上述enctype標籤屬性意爲「編碼類型」，就是用來指定HTTP消息的Content-Type（內容類型）報頭屬性。給這個標籤屬性所指定的值必須是MIME對Content-Type所規定的值之一。上表中即是MIME中關於內容類型的其中兩個值。更多內容請參閱MIME的有關資料 — 譯者注

Part 1 of this article looks at x-www-form-urlencoded format. Part 2 describes multipart MIME.
本文的第1部分考察x-www-form-urlencoded格式。第2部分描述多部分MIME。

Sending Complex Types
發送複合類型

Typically, you will send a complex type, composed of values taken from several form controls. Consider the following model that represents a status update:
典型地，你要發送的是一個複合類型，它由幾個表單控件的值所組成。考慮如下表示狀態更新的一個模型：

namespace FormEncode.Models 
{ 
using System; 
using System.ComponentModel.DataAnnotations;

public class Update 
{ 
[Required] 
[MaxLength(140)] 
public string Status { get; set; } 

public DateTime Date { get; set; } 
} 
}

Here is a Web API controller that accepts an Update object via POST.
如下是經過POST接收Update對象的一個Web API控制器。

namespace FormEncode.Controllers 
{ 
using FormEncode.Models; 
using System; 
using System.Collections.Generic; 
using System.Net; 
using System.Net.Http; 
using System.Web; 
using System.Web.Http; 

public class UpdatesController : ApiController 
{ 
static readonly Dictionary<Guid, Update> updates = new Dictionary<Guid, Update>(); 

[HttpPost] 
[ActionName("Complex")] 
public HttpResponseMessage PostComplex(Update update) 
{ 
if (ModelState.IsValid && update != null) 
{ 
// Convert any HTML markup in the status text.
// 轉換status文本中的HTML標記。
update.Status = HttpUtility.HtmlEncode(update.Status); 

// Assign a new ID.
// 賦一個新的ID。
var id = Guid.NewGuid(); 
updates[id] = update; 

// Create a 201 response. 
// 建立一個201響應。
var response = new HttpResponseMessage(HttpStatusCode.Created) 
{ 
Content = new StringContent(update.Status) 
}; 
response.Headers.Location =
new Uri(Url.Link("DefaultApi", new { action = "status", id = id })); 
return response; 
} 
else 
{ 
return Request.CreateResponse(HttpStatusCode.BadRequest); 
} 
} 

[HttpGet] 
public Update Status(Guid id) 
{ 
Update update; 
if (updates.TryGetValue(id, out update)) 
{ 
return update; 
} 
else 
{ 
throw new HttpResponseException(HttpStatusCode.NotFound); 
} 
} 
} 
}

This controller uses action-based routing, so the route template is "api/{controller}/{action}/{id}". The client will post the data to "/api/updates/complex".
這個控制器使用了「基於動做的路由（本系列教程的第4.1小節 — 譯者注）」，所以，路由模板是「api/{controller}/{action}/{id}」。客戶端會把這些數據遞交給「/api/updates/complex」。

Now let’s write an HTML form for users to submit a status update.
如今，讓咱們編寫一個用戶遞交狀態更新的HTML表單。

<h1>Complex Type</h1> 
<form id="form1" method="post" action="api/updates/complex"enctype="application/x-www-form-urlencoded">  &l