POST von Angular zu .net WebAPI

Ich verwende eine Angular $ -Ressource, um ein Modell an einen Webapi-Endpunkt zu senden, aber Angular sendet die Daten in der Anforderungsnutzlast anstelle von JSON-Text- oder Formularparametern. Daher endet das Modell immer als null.POST von Angular zu .net WebAPI

Meine API ist wie folgt:

public class UserController : APIController { 
    [HttpPost] 
    public void Disconnect(Models.Users.User model) { 
    } 
}

Die Request-Header sind:

POST /siteapi/User/Disconnect HTTP/1.1 
Host: rouge2 
Connection: keep-alive 
Content-Length: 125 
Accept: application/json, text/plain, */* 
Origin: http://rouge2 
X-Requested-With: XMLHttpRequest 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31 
Content-Type: application/json;charset=UTF-8 
Referer: http://rouge2/Users 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Cookie: .ASPXAUTH=115C6015BDD5C1A9D111B0A9FBF05294B73287328566F65CB1BCB457DF206EF0916D4615B5914EB443AA567E860742AC14EAA2951B9C327260C4F00649694260A1B3960771FB6675FEE8F3E68B0BB46436020ACAB33ECE0D3E70B50D6569E52B27F69161762C10C19A806A12D3254DF60EF4758DEDCA529A91CB36C74B7FA7F4; __RequestVerificationToken=Rp4Vu8R67ziDNc36DoOLZH7KmEfumig1zFDmYiFWHTsWyf2I037xJQydcmLtOfaJ3ccc8GEZXmHoa8LBRusxKFRYVoy27GuFEfNhKKYS_hUysjwCjmsxw5OCK3RKsiXIAh1Gbi0PxcdqBfzctSJn9g2

Und die Anfrage Nutzlast:

{"Id":3,"FirstName":"Test","LastName":"User","Username":"testuser","IsApproved":true,"IsOnlineNow":true,"IsChecked":true}

Wenn ich in Fiddler zu testen, die gleiche Buchung JSON-Zeichenfolge im Textkörper, das Modell ist wie erwartet korrekt ausgefüllt.

Gibt es einen integrierten Modellbinder, der in diesem Szenario funktioniert, oder etwas, das ich irgendwo vorinstalliert habe?

Oder kann mir bitte jemand in die Richtung eines Arbeitsbeispiels zeigen?

Quelle

2013-05-18 mattdwen

Eine Probe, um loszulegen: http://www.codeproject.com/Articles/737030/A -basic-SPA-application-using-AngularJS-WebAPI-und – Braulio

Sie könnten die $http module verwenden.

Hier ist ein Beispiel:

<!DOCTYPE html> 

<html ng-app> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
</head> 
<body> 
    <div ng-controller="TestController"> 
     <ul ng-model="person"> 
      <li>FirstName: {{person.FirstName}}</li> 
      <li>LastName: {{person.LastName}}</li> 
      <li>UserName: {{person.Username}}</li> 
      <li>IsApproved: {{person.IsApproved}}</li> 
      <li>IsOnlineNow: {{person.IsOnlineNow}}</li> 
      <li>IsChecked: {{person.IsChecked}}</li> 
     </ul> 
    </div> 

    <script type="text/javascript" src="~/scripts/angular.min.js"></script> 
    <script type="text/javascript"> 
     function TestController($scope, $http) { 
      var data = { "Id": 3, "FirstName": "Test", "LastName": "User", "Username": "testuser", "IsApproved": true, "IsOnlineNow": true, "IsChecked": true }; 
      $http.post(
       '/api/values', 
       JSON.stringify(data), 
       { 
        headers: { 
         'Content-Type': 'application/json' 
        } 
       } 
      ).success(function (data) { 
       $scope.person = data; 
      }); 
     } 
    </script> 
</body> 
</html>

die folgenden Controller Unter der Annahme:

public class ValuesController : ApiController 
{ 
    [HttpPost] 
    public User Post(User model) 
    { 
     return model; 
    } 
}

Quelle

2013-05-18 10:07:07

Es scheint, dass WebAPI erwartet, dass die geposteten Daten auch als ein "Benutzer" -Objekt, z {Benutzerdaten}}. – mattdwen

@mattdwen Ich denke nicht, dass es wird, wenn Sie '[FromBody]' verwenden, obwohl ich schwöre, dass ich das nicht tue und es trotzdem gut funktioniert. – kamranicus

Was, wenn Sie wollten oder * benötigt * $ Ressource verwenden? Was wäre der sauberste Weg, den POST zu "reparieren"? Verwenden eines globalen Filterattributs? – kamranicus

Für mich gerade funktionierte gut. Unten finden Sie die serverseitigen Code

[HttpPost] 
    public void Disconnect([FromBody] Models.Users.User model) { ... }

und der anfragende Client-Code wird,

var dataToPost ={ id : 3, firstName : 'Test', lastName : 'User', username : 'testuser', isApproved : true, isOnlineNow : true, isChecked: true }; 

      var config = { 
       headers : { 
        'Content-Type': 'application/json;charset=utf-8;' 
       } 
      } 
      $http.post(thisIsUrl, dataToPost, config).then(......

Quelle

2017-10-01 03:20:44

POST von Angular zu .net WebAPI

Antwort

Verwandte Themen