Angularjs $http.post - sending params as JSON to ASPX webmethod

Question

I have the following angularjs code sending http post to a webmethod, but I get the following error with no more info. Can someone help? If I do not send any data to webmethod and only get data from it, it works just fine !

Failed to load resource: the server responded with a status of 500 (Internal Server Error) angular.js:11442 POST http://localhost:54461/GetData.aspx/getData 500 (Internal Server Error)

Javascript:

var request = "{'name':'" + "Nariman" + "'age':'" + 12 + "'}";
$scope.retData = {};

var config = {
    headers: {
        'Content-Type': '"application/json; charset=utf-8";',
        'dataType': '"json"'
    }
}

$scope.retData.getResult = function (item, event) {

    $http.post('GetData.aspx/getData', request, config)
        .success(function (data, status, headers, config) {
            $scope.retData.result = data.d;
        })
        .error(function (data, status, headers, config) {
            $scope.status = status;
        });
}

ASPX webmethod (C#):

public static string getData(string name, int age)
{
    string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine);
}

EDIT --------------------------------------

If I do not send any json data to the webmethod, it works just fine. for example the below code works and if I put break point inside the webmethod, it shows that it goes there. but if I send json data, it does not go inside webmethod:

Javaacript (not sending any json data):

var config = {
    headers: {
        'Content-Type': '"application/json; charset=utf-8";',
        'dataType': '"json"'
    }
}

$scope.retData.getResult = function(item, event) {
    $http.post('GetData.aspx/getData', data, config)
        .success(function(data, status, headers, config) {
            $scope.retData.result = data.d;
        })
        .error(function(data, status, headers, config) {
            $scope.status = status;
        });
}

ASPX (When no input param)

public static string getData()
{
    // just having a breakpoint shows it comes inside the 
    // webmethod when no data is passed. 
}

Answer 1

your issue seems to be as pointed by Emmanual Durai in first comment of your question: var request = "{'name':'" + "Nariman" + "'age':'" + 12 + "'}"; is not a valid json object.

request will give you {'name':'Nariman'age':'12'} as String which won't parse to JSON (there are issues with format).

You should try something like below to get a valid string

var request = {
    name: "Nariman",
    age: 12
}

var requestString = JSON.stringify(request)

also please have a look here How to pass json POST data to Web API method as object. your issue is not typically specific to angularjs $http but in general to XHR request.

Answer 2

Simply change:

var request = "{'name':'" + "Nariman" + "'age':'" + 12 + "'}";

To:

var request = { name: "Nariman", age: 12 };

You don't have to use JSON.stringify()

var request = { name: "Nariman", age: 12 };
var config = {
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}
    $http.post('GetData.aspx/getData', request, config)
        .success(function(data, status, headers, config) {
            $scope.retData.result = data.d;
        })
        .error(function(data, status, headers, config) {
            $scope.status = status;
        });