JQuery AJAX post to asp.net webmethod never getting called

Question

I have a web method in one of my aspx pages:

[WebMethod]
public static string AddDebt(int userId, int type, string description, float amount)

And in the aspx page I have the JQuery

$(".addDebt").click(function (e) {
            e.preventDefault();
            var userId = $("[id$='txtUserId']").val();
            var type = $("[id$='ddlExistingDebtType']").val();
            var description = $("[id$='txtExistingDebtLender']").val();
            var amount = $("[id$='txtExistingDebtAmount']").val();

            var results = new Array();
            results.push({ userId: userId });
            results.push({ type: type });
            results.push({ description: description });
            results.push({ amount: amount });
            var dataString = JSON.stringify(results);
            $.ajax(
            {
                type: "POST",
                url: "register_borrower_step4.aspx/AddDebt",
                data: dataString,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $(".pDebtsTable").text(result);
                }
            });

        });

I know that looks stupid the way I have set the data param but it was cleaner before and I will change it, but the point is, the JSON seems fine to me so it isn't that?

When it is run there is not post to the web method, though if I change contentType and dataType I get the whole aspx page returned. One thing I just thought of, say this jquery is actually on the register_borrower_step4.aspx page, would that cause a problem?

Answer 1

The method doesn't expect an array. Try like this:

var dataString = JSON.stringify({ 
    userId: userId, 
    type: type, 
    description: description, 
    amount: amount 
});

$.ajax({
    type: "POST",
    url: "register_borrower_step4.aspx/AddDebt",
    data: dataString,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        $(".pDebtsTable").text(result);
    }
});

Also make sure that floating point separator is correct according to the culture for the amount parameter. Make the distinction between . and , or the web method might not work. To further analyze any problems you could use FireBug to see exactly what is happening under the covers.