[水煮 ASP.NET Web API2 方法論]（1-3）如何接收 HTML 表單請求

問題

  我們想創建一個能夠處理 HTML表單的 ASP.NET Web API 應用程序（使用 application/x-www-form-urlencoded 方式提交數據）。

解決方案

  我們可以創建一個 Controller Action 接收一個 Moddel，Model 的結構和準備從HTML 表單提交的準備處理的結構相似，模型綁定依賴于 ASP.NET Web API 來處理。模型中的屬性名字和 HTTP 請求中要用的名字要匹配。

public HttpResponseMessage Post(RegistrationModel model)
{
    //忽略
}

  另外，我們可以使用 System.Net.Http.Formatting.FormDataCollection作為 Action 方法的唯一參數。框架將會通過鍵值對集合的方式傳值，我們就可以自己處理我們想要的值。

public HttpResponseMessage Post(FormDataCollection form)
{
    //忽略
}

工作原理

  當使用 ASP.NET Web API 構建 web 應用程序時，為了提升現有 Web 應用程序（MVC，Web Form，或者其他技術）而使用 Web API 的時候，提交 form-URL-encoded 數據是一種很常見的需求。

  ASP.NET Web API 使用 MediaTypeFormatters 從 HttpRequestMessage 表單中提取數據，并且，傳輸這些數據給相應選擇的 action 來處理請求。第四章會詳細介紹模型綁定和格式化，在這里，我們僅僅接觸了直接與處理 HTML 表單相關的概念。

    兩個現成的格式化程序能夠處理的格式：

• FormUrlEncodedMediaTypeFormatter,用于綁定使用     application/x-www-form-urlencoded 內容類型的 FormDataCollection。

• JQueryMvcFormUrlEncodedFormatter，也是使用同樣的內容類型，也可以綁定到 Model（DTO）

從設計角度來看，后面的應該是前面的子類。

  使用FormDataCollection 來代替我們 action 參數，他不僅讓我們能夠訪問原始表單數據，還通知了 ASP.NET Web API 不執行任何驗證。

  默認情況，Web API 僅僅讀請求體一次，當使用模型綁定表單數據時，這種模式應該封裝了所有的表單域。換句話說，不能在傳輸數據的時候，即使用請求體傳輸數據，同時又使用 URL 參數形式傳輸數據，在這樣的情況下，還希望框架自動處理模型綁定。對于 MVC 開發者這個情況就很痛苦，因為他們習慣了這樣的開發方式。不過，我們還是可以強制 Web API 使用像 MVC 樣式的參數綁定。這部分將在本書 4-4 部分討論。

  如果你的表單處理的時二進制數據，例如，上傳文件。這時候，表單將被替換為 multipart/form-data 的形式提交。ASP.NET Web API 沒有提供任何內建的MediaTypeFomatter 來處理二進制數據。不過，他還是很容易處理這種方式提交的表單。他是使用 MultipleFormDataStreamProvider 來直接處理 HttpRequestMessage 的內容。如清單 1-7 所示。盡管處理文件上傳超出了我們介紹的范圍，還是會在 4-11 單獨討論。

清單1-7. 接收復雜請求的表單數據

public async Task Post()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable,
        "請求格式化失敗"));
    }
    var streamProvider = new MultipartFormDataStreamProvider("d:/uploads/");
    await Request.Content.ReadAsMultipartAsync(streamProvider);
    //訪問 FormDataCollection 的 實例 streamProvider.FormData
 }

注意 在這一部分討論的功能不是 ASP.NET 特有的，Web API 之外一樣可以用。不過，作為 ASP.NET Web 應用程序的一部分來運行 Web API 的時候，我們通常還是要處理傳統的網頁表單。

代碼演示

清單 1-8 展示了使用簡單表單和JavaScript 提交到 ASP.NET Web API 的簡單網頁表單.

清單 1-8. 簡單的網頁表單

<form role="form" method="post" action="/api/form" enctype="application/x-www-form-urlencoded">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" placeholder="Enter name">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" placeholder="Enter email">
    </div>
    <div class="radio">
        <label>           
            <input type="radio" name="gender" value="female" checked>Female
        </label>
    </div>
    <div class="radio">
        <label>            
            <input type="radio" name="gender" value="male">Male
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
    <button id="postJS" class="btn btn-default">使用 JS 提交</button>
</form>
<script type="text/javascript"> $(
    function () { 
        $("#postJS").on("click", function () { 
        var data = { name: $("input[name='name']").val(), 
        email: $("input[name='email']").val(),
        gender: $("input[name='gender']:checked").val(), }; 
        $.ajax(
            { 
                data: data, 
                datatype: "html", 
                type: "POST", 
                url: "/api/user"
        }).done(function (res) {
            //處理 handler
        }); 
    });
});
</script>

  清單 1-9 展示了可以處理清單 1-8 表單的兩個 ASP.NET Web API action。第一個是是使用相對傳統的方式，使用 FormDataCollection 和 手動提取數據，然后在填充到服務器的模型里面。第二個依依賴與框架的自動模型綁定。

清單 1-9. Web API 控制器處理表單數據

public async Task Post()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable,
        "請求格式化失敗"));
    }
    var streamProvider = new MultipartFormDataStreamProvider("d:/uploads/");
    await Request.Content.ReadAsMultipartAsync(streamProvider);
    //訪問 FormDataCollection 的 實例 streamProvider.FormData
}

public class UserModel{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Gender { get; set; }
}

public class FormController : ApiController{
    public HttpResponseMessage Post(FormDataCollection form)
    {
        var user = new UserModel        {
            Email = form["Email"],
            Name = form["Name"],
            Gender = form["Gender"]
        };
        //  處理用戶...       
        //  忽略    
     }
}

public class UserController : ApiController{
    public HttpResponseMessage Post(UserModel user)
    {
                //process user...        
                //rest omitted for brevity    
     }
}