Question

我希望从网页上提交的表单中发送信息，以便由其他网站的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;

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状态代码，则为空响应）。这不是你想要的（我相信）。

您有两种选择：

将您的表单发布到同一网站的页面，然后向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回调中，您可能希望将用户重定向到表单提交页面，或者只是在页面中显示成功消息（它取决于您）

将数据POST到WebAPI控制器

2 个答案: