POST 数据到 Web API 控制器答案

【问题标题】：POST data to a WebAPI controllerPOST 数据到 Web API 控制器
【发布时间】：2016-04-20 20:24:00
【问题描述】：

我希望通过网页上提交的表单发送信息，以由另一个网站的 WebAPI 处理。表单基本上是一系列字段如下：

帐户类型（单选按钮 2 个选项）
姓名
电子邮件
电话号码
关税（下拉 4 个选项）

在 Web API 控制器端，我创建了一个名为 QuickSwitch 的类，其编码如下：

public class QuickSwitch
{
    [StringLength(20)]
    public string AccountType { get; set; }

    [StringLength(50)]
    public string FullName { get; set; }

    [StringLength(100)]
    public string Email { get; set; }

    [StringLength(15)]
    public string PhoneNumber { get; set; }

    public string Tariff { get; set; }
}

在 WebAPI 控制器上，我有以下方法：

[HttpPost]
    public HttpResponseMessage PostMXBData([FromBody] QuickSwitch qs)
    {
        #region Customer Details
        var accountType = "";
        var name = "";
        var email = "";
        var phoneNumber = "";
        var mobileNumber = "";
        var houseNumber = "";
        var address = "";
        var town = "";
        var postcode = "";
        var county = "";

        var keypadAccountNumber = "";
        var keypadTariff = "";

        var billpayCustomerNumber = "";
        var mprnNumber = "";
        var billpayTariff = "";
        #endregion 
}

如何在网页上发布数据，以便将表单中的字段链接到 WebAPI 控制器端的 QuickSwitch 类。然后我希望能够将变量签名为：

var accountType = qs.AccountType;

【问题讨论】：

标签： post asp.net-web-api http-post asp.net-web-api2

【解决方案1】：

您可以在 JQuery 中使用简单的 Ajax 帖子。

var data = {
   fullName: 'john',
   email: 'a@c.com',
   // etc.etc.
};

$.ajax({
  type: "POST",
  url: 'http://localhost/api/mycontroller/PostMXBData',
  data: data, // your QuickSwitch object
  success: successCallbackFunction
});

function successCallbackFunction(result){
    // ok!
}

【讨论】：

【解决方案2】：

您使用简单表单将数据发布到 WebAPI 端点的方法存在一个大缺陷：数据发布后会发生什么？

如果您只是创建一个表单并将数据 POST 到您的控制器，那么您的 Web 浏览器将向您显示来自服务器的响应，如果它是一个 Web API 端点，它将向您显示的不是页面，而是（通常）一个 JSON/ XML 响应（如果您只是在控制器中返回 200 状态代码，则为空响应）。这不是你想要的（我相信）。

那么你有两个选择：

将您的表单发布到同一网站的页面，然后向 Web API 端点发出服务器端请求（这取决于您的网页使用的技术，例如 MVC、ASP.NET 网页等） ;
使用 AJAX 并将您的数据发送到后台的 Web API 端点。

对于第二个选项，假设您使用的是 jQuery：

$('#mySubmitButton').click(function (e) {
    e.preventDefault();
    var postData = {
        accountType: $('#accountTypeInput').val(),
        //etc...
    }
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "http://myhost/api/MyApi",
        data: postData ,
        success: function (data) {
            alert(data);
        },
        error: function (error) {
            alert('error!');
        }
    });
});

在success 回调中，您可能希望将用户重定向到提交的表单页面，或者只是在页面中显示成功消息（由您决定）。

【讨论】：