AngularJS Post data as key-value pair to a asp.net page

Question

I am trying to post key-value pair data from angular application to a asp.net page however I am not able to receive the result at the asp.net page.

Example Data

 {fullName: "Vikas Bansal", userId: "1001387693259813", userimageurl: "http://graph.facebook.com/1001387693259813/picture?width=250&height=250"}

Angular Code

    var postData = {
        fullName: $scope.name,
        userId: $scope.userId,
        userimageurl: $scope.userImage
    };

    var postUrl = 'http://localhost:41115/Index.aspx';

    $http({
        url: postUrl,
        method: "POST",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: postData
    }).then(function (responce) {
        console.log(responce);
    }, function (responce) {
        console.log(responce);
    });

Asp.net Page Code

protected void Page_Load(object sender, EventArgs e)
{
    var userId = Request.Form["userId"];    /// getting null
    var fullName = Request.Form["fullName"];    /// getting null
    var img = Request.Form["userimageurl"]; /// getting null
}

In asp.net page all variables are null.

EDIT

By changing content type to 'Content-Type': 'application/json; charset=utf-8' in angularJs post request

and by using var strJSON = (new StreamReader(Request.InputStream).ReadToEnd()); I am able get the posted json

but I am still wondering if there is a way to get key-value pairs directly?

like this var userId = Request.Form["userId"];

You have content type mismatch. Your payload is JSON but you told ASP that it's Form. Set your Content-Type to application/json; charset=utf-8. — Kyle
– Kyle, Commented Apr 22, 2016 at 17:25

Vikas Bansal · Accepted Answer · 2016-04-22 17:53:20Z

2

It's because your payload is actually JSON but you tried to pass as a FormData object.

You'll need to make a FormData() object. Then

(1) Tell AngularJs not to serialize it by using the angular.identity function.

(2) Angular's default header for PUT and POST requests is application/json, so you'll want to override that too. The browser sets the Content-Type to multipart/form-data and fills in the correct boundary.

Try this:

var postData = new FormData();
postData.append("fullName", $scope.name);
postData.append("userId", $scope.userId);
postData.append("userimageurl", $scope.userImage);

$http.post(postUrl, postData, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
}).then(function(data) {
    //success
}, function(error) {
    //error
});

edited Apr 22, 2016 at 17:53

Vikas Bansal

12k16 gold badges65 silver badges107 bronze badges

answered Apr 22, 2016 at 17:36

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vikas Bansal Over a year ago

exactly what I needed. I request you to please provide some details on transformRequest: angular.identity, and why did you set 'Content-Type': undefined . Many many thanks

Collectives™ on Stack Overflow

AngularJS Post data as key-value pair to a asp.net page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related