将数据发布到WebAPI控制器

Question

我希望从网页上提交的表单发送信息，该表单将由另一个网站的WebAPI处理。 该表格基本上是一系列字段，如下所示：

1. 帐户类型（单选按钮2选项）
2. 名称
3. 电子邮件
4. 电话号码
5. 关税（下拉菜单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;

Answer 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!
}

Answer 2

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

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

然后，您有两个选择：

1. 将您的表单发布到同一网站的页面上，然后向Web API端点发出服务器端请求（这取决于您的网页所使用的技术，例如MVC，ASP.NET网页等）；
2. 使用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回调中，您可能希望将用户重定向到表单提交的页面，或者仅在页面中显示成功消息（由您决定）。