POSTing d'Angular à .net WebAPI

J'utilise une ressource Angular $ pour publier un modèle sur un point de terminaison webapi, mais Angular envoie les données dans la charge utile de requête, plutôt qu'un corps JSON ou des paramètres de formulaire. Par conséquent, le modèle finit toujours par être nul.POSTing d'Angular à .net WebAPI

Mon API est la suivante:

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

Les en-têtes de demande sont:

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

Et la charge utile de la demande:

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

Si je test dans Fiddler, affichant la même Chaîne JSON dans le corps, le modèle est correctement rempli, comme prévu.

Y a-t-il un classeur intégré qui fonctionnera dans ce scénario, ou quelque chose de pré-construit quelque part que je peux utiliser?

Ou quelqu'un peut s'il vous plaît me diriger vers un exemple de travail?

Source

2013-05-18 mattdwen

Un échantillon pour commencer: http://www.codeproject.com/Articles/737030/A -basique-SPA-application-en utilisant-AngularJS-WebAPI-et – Braulio

Vous pouvez utiliser le $http module.

Voici un exemple:

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

En supposant que le contrôleur suivant:

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

Source

2013-05-18 10:07:07

Il semble que WebAPI attende également que les données postées soient aussi enveloppées en tant qu'objet 'User', par exemple {Données d'utilisateur}}. – mattdwen

@mattdwen Je ne pense pas que ce soit le cas si vous utilisez '[FromBody]' bien que je jure que je ne fais pas cela et que ça fonctionne encore sans cela. – kamranicus

Et si vous vouliez ou * * * utiliser $ resource? Quel serait le moyen le plus propre de "réparer" le POST? En utilisant un attribut de filtre global? – kamranicus

Pour moi, ce tout a bien fonctionné. est sous le code côté serveur

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

et demande le code client sera,

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(......

Source

2017-10-01 03:20:44

POSTing d'Angular à .net WebAPI

Répondre

Questions connexes