jQuery Ajax 不调用 C# Webmethod

Question

I know multiple queries like below exist on this forum but I could not found what exactly is wrong in my case.

$.ajax({
    type: "POST",
    url: "default.aspx/GetMaturityValues",
    data: jsonParams,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        alert(response);
    },
    failure: function (response) {
        alert(response.d);
    }
});

[System.Web.Services.WebMethod]
public static string GetMaturityValues(string countryIDList, string xAxis, string yAxis, string bubbleSize)
{
    //some code   
}

The execution is not flowing into C# code.

The jsonParams:

var paramList = '';
var countryIDList = '1,2,3,5';
var xAxis = '1';
var yAxis = '2';
var bubbleSize = '6';
paramList += 'countryIDList' + '":"' + countryIDList;
paramList += 'xAxis' + '":"' + xAxis;
paramList += 'yAxis' + '":"' + yAxis;
paramList += 'bubbleSize' + '":"' + countryIDList;
paramList = '{' + paramList + '}';
var jsonParams = JSON.stringify(paramList);

Answer 1

Try using a model:

public class MyModel
{
    public IList<int> CountryIDList { get; set; } 
    public int XAxis { get; set; }
    public int YAxis { get; set; }
    public int BubbleSize { get; set; }
}

that your WebMethod will take as parameter:

[System.Web.Services.WebMethod]
public static string GetMaturityValues(MyModel model)
{
    //some code   
}

and finally on the client:

var paramList = {
    countryIDList: [1, 2, 3, 5],
    xAxis: 1,
    yAxis: 2,
    bubbleSize: 6
};

var jsonParams = JSON.stringify({ model: paramList});

$.ajax({
    type: "POST",
    url: "default.aspx/GetMaturityValues",
    data: jsonParams,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        alert(response);
    },
    failure: function (response) {
        alert(response.d);
    }
});

In this example all the parameters are integers, buy you could of course use other data types like strings for example:

public class MyModel
{
    ...
    public string Foo { get; set; }
}

which can be passes as string from the client accordingly:

var paramList = {
    ...
    foo: 'bar'
};

Answer 2

I think the problem is simply that you parameters are not correctly formatted when you post. Try this simple workaround:

<script type="text/javascript">
    var params = {};
    params.countryIDList = "test";
    params.xAxis = "x";
    params.yAxis = "y";
    params.bubbleSize = "y";

    $.ajax({
        type: "POST",
        url: "Test1.aspx/GetMaturityValues",
        data: JSON.stringify(params),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert(response.d);
        }
    });
</script>

@DarinDimitrov is (of course) correct that you could benefit from making a model class... But you can make it work with just sting parameters as well.