How to recieve and process AngularJS HTTP POST to C#?

Question

I'm developing a web site associated to a SQL database and Azure web app. The app support authentication. For now, I'm able to login a user using Owin OAuthAuthorizationServerProvider class.

Here is the code I'm using to POST login data from my Angularjs file :

fac.login = function (user) {
      var obj = { 
                   'username': user.username, 'password': user.password, 
                   'grant_type': 'password'
                };

    Object.toparams = function ObjectsToParams(obj) 
     {
        var p = [];
        for (var key in obj) 
        {
            p.push(key + '=' + encodeURIComponent(obj[key]));
        }
        return p.join('&');
     }

    var defer = $q.defer();

    $http({
        method: 'post',
        url: serviceBasePath + "/token",
        data: Object.toparams(obj),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (response) {
        userService.SetCurrentUser(response.data);
        defer.resolve(response.data);
    }, function (error) {
        defer.reject(error.data);
    })
    return defer.promise;
}

And I deal with the data and identity by overriding : Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context).

This works perfectly. I'm now trying to create a "Sign In" page based on the same structure.

I think I know how to post the data with AngularJS like this :

fac.suscribe = function (newUser) {
    var obj = {
        'username': newUser.username, 'surname': newUser.surname, 'firstname': newUser.firstname,
        'password1': newUser.password1, 'password2': newUser.password2, 'email': newUser.email, 'guid': newUser.guid
    };
    Object.toparams = function ObjectsToParams(obj) {
        var p = [];
        for (var key in obj) {
            p.push(key + '=' + encodeURIComponent(obj[key]));
        }
        return p.join('&');
    }

    var defer = $q.defer();
    $http({
        method: 'post',
        url: serviceBasePath + "/register",
        data: Object.toparams(obj),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (response){
        userService.SetCurrentUser(response.data);
        defer.resolve(response.data);
    }, function (error) {
        defer.reject(error.data);
    })

    return defer.promise;
}

But I wonder how I can get the data to generate the post answer. Any idea on C#, preferably ?

Answer 1

First, You should have Model same with same property name on the server side. So that the property that you are sending in the object from angularjs will get binded to the Model Properties. Instead of having headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, change it to headers: { 'Content-Type': 'application/json' } for the Web API.

For your reference i am sharing this link CRUD WITH ANGULARJS and ASP.NET WEB API