POST-Daten an einen WebAPI-Controller

Question

Ich möchte Informationen von einem Formular senden, das auf einer Webseite eingereicht wurde, um von der WebAPI einer anderen Website verarbeitet zu werden. Die Form ist im Grunde eine Reihe von Feldern wie folgt:

1. Account (Optionsfeld 2 Optionen)
2. Namen
3. Email
4. Telefonnummer
5. Tarif (Drop-Down-4 Optionen)

Auf der Web-API-Controller-Ende habe ich eine Klasse namens QuickSwitch erstellt, die wie folgt codiert ist:

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; } 
} 

Auf der WebAPI Controller ich die folgende Methode haben:

[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 
} 

Wie kann ich die Daten auf der Webseite veröffentlichen, damit sie die Felder aus der Form auf die QuickSwitch- Klasse auf dem WebAPI Controller Endglieder . Ich hatte dann gehofft Variablen signieren zu können:

var accountType = qs.AccountType; 

Answer 1

Sie können einen einfachen Ajax Post mit JQuery verwenden.

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

Es gibt einen großen Fehler mit Ihrem Ansatz auf Daten unter Verwendung einer einfachen Form zu einem WebAPI Endpunkt Entsendung: was die Daten geschieht, nachdem gebucht wird?

Wenn Sie einfach ein Formular und POST-Daten auf Ihrem Controller erstellen, zeigt Ihnen Ihr Webbrowser die Antwort vom Server, und wenn es sich um einen Web-API-Endpunkt handelt, wird Ihnen keine Seite, sondern (normalerweise) ein JSON angezeigt/XML-Antwort (oder eine leere Antwort, wenn Sie einfach 200 Statuscode in Ihrem Controller zurückgeben). Das ist nicht was du willst (glaube ich).

Sie haben zwei Möglichkeiten dann:

1. POST Formular auf eine Seite in der gleichen Website, und dann eine serverseitige Anforderung an den Web-API-Endpunkt machen (das auf der Technologie hängt für Ihr Web verwendet Seite zB MVC, ASP.NET Webseiten, etc.);
2. Verwenden Sie AJAX und senden Sie Ihre Daten im Hintergrund an den Web-API-Endpunkt.

Für die zweite Option, vorausgesetzt, Sie sind mit 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!'); 
     } 
    }); 
}); 

Im success Rückruf Sie können den Benutzer auf eine Form Seite vorgelegt, umleiten oder einfach eine Erfolgsmeldung zeigen in die Seite (es liegt an dir).