web-dev-qa-db-fra.com

Publier une API Web angulaire vers .net

J'utilise une ressource $ angulaire pour publier un modèle sur un point de terminaison webapi, mais Angular envoie les données dans la charge de la requête, plutôt qu'un corps JSON ou des paramètres de formulaire. En conséquence, le modèle finit toujours par null.

Mon API est la suivante:

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

Les en-têtes de requête 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 teste dans Fiddler en publiant la même chaîne JSON dans le corps, le modèle est correctement renseigné, comme prévu.

Existe-t-il un classeur de modèle intégré qui fonctionnerait dans ce scénario ou un élément pré-construit que je pourrais utiliser?

Ou quelqu'un peut-il m'indiquer un exemple de travail?

angularjsasp.net-web-api
22
mattdwen

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;
    }
}
37
Darin Dimitrov

Pour moi, cela a bien fonctionné ... ci-dessous est le code côté serveur

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

et le code du client demandeur 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(......
0
Ganesh Kumar Ponnuswamy