Invalid JSON primitive: lookupID.","StackTrace":"

Question

I can't figure out why I am getting this error. When I put quotes around the variables, it literally sends the text instead of the variable.

{"Message":"Invalid JSON primitive: lookupID.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeDictionary(Int32 depth)\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

My ajax function:

function GetVisitDates(lookupID, IsMiscellaneous) {
    $.ajax({
    type: "POST",
    url: "Home.aspx/GetVisitDates",
    data: "{ 'LookupID': lookupID, 'isMiscellaneous': IsMiscellaneous }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
...

The Method it Calls:

[WebMethod]
    public static string GetVisitDates(int LookupID, bool isMiscellaneous)

Answer 1

You need to JSON.stringify() the data first before you send it - unfortunately .aspx WebMethods are very picky about how they bind parameters :)

If you use your Browser's F12 tools to look at the actual POST request, you will see that your code currently sends the payload like this:

LookupID=20&isMiscellaneous=true

However in order for this to correctly bind, it needs to be actual JSON, like this:

{LookupID: 20, isMiscellaneous: true}

And that's where JSON.stringify comes in.

Here is the code I used to replicate and confirm that this solves the problem:

in Home.aspx.cs:

public partial class Home : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetVisitDates(int LookupID, bool isMiscellaneous)
    {
        return string.Format("{0}-{1}", LookupID, isMiscellaneous);
    }
}

On the client side (in my case just a script in Home.aspx):

 $(document).ready(function() {
            GetVisitDates(20, true);
        });

        function GetVisitDates(lookupID, isMiscellaneous) {
            var data = {
                "LookupID": lookupID,
                "isMiscellaneous": isMiscellaneous
            };

           data = JSON.stringify(data);

            $.ajax({
                    type: "POST",
                    url: "Home.aspx/GetVisitDates",
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(xhr) {
                        console.log(xhr);
                    }
                }
            );
        }

Finally, here is a reference that is pretty good for using ajax with Webforms...hope that helps!