Данные POST для контроллера WebAPI

Question

Я ищу для отправки информации из формы, представленной на веб-странице, которая будет обрабатываться WebAPI другого веб-сайта. Форма в основном ряд полей следующим образом:

1. Тип учетной записи (переключатель 2 варианта)
2. Имя
3. Email
4. Номер телефона
5. Тариф (выпадающий 4 варианта)

В конце интерфейса API 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 
} 

Как POST данные на веб-странице, так что он связывает поля от формы к классу QuickSwitch на стороне контроллера WebAPI , Тогда я надеялся, что смогу подписать переменные как:

var accountType = qs.AccountType; 

Answer 1

Вы можете использовать простой пост Ajax с JQuery.

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 для своего контроллера, тогда ваш веб-браузер покажет вам ответ от сервера, и если это конечная точка веб-API, он покажет вам не страницу, а (как правило) JSON/XML (или пустой ответ, если вы просто возвращаете код состояния 200 в своем контроллере). Это не то, что вы хотите (я полагаю).

У вас есть два варианта, то:

1. POST своей формы на страницу в том же сайте, а затем сделать запрос на сторону сервера к Web API конечной точке (это зависит от технологии, используемой для веба например, MVC, веб-страницы ASP.NET и т. д.);
2. Используйте AJAX и отправьте свои данные в конечную точку веб-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 обратного вызова вы можете перенаправить пользователя на форме представил страницу, или просто показать сообщение об успехе в страницу (это зависит от вас).