Sending a complex object as parameter to Asp.Net PageMethod

Question

I am trying to send an object created in JavaScript to an ASP.NET PageMethod. This object mirrors the properties of an existing custom business object, so i was hoping that i could pass a single object instead of a parameter for each property. I am getting an error "Unknown web method SavePart when attempting to use this method.

Javascript:

function() {
    var pt = { Id: 1, Onhand: 20, LowPoint: 30, __type: 'Custom.Objects.Part'};

    $.ajax({
        type: 'POST',
        url: 'partlist.aspx/SavePart',
        data: JSON.stringify(pt),
        contentType: 'application/json; charset: utf-8;'
        dataType: 'json',
        success: function(results) { alert('Success!'); }
    });
}

Code Behind:

<WebMethod()> _
Public Shared Function SavePart(pt as Custom.Objects.Part) as Boolean
    Dim repo as new PartRepository()
    return repo.Save(pt)
End Function

I am using another PageMethod which just accepts an int, and this works fine.

Answer 1

I ended up solving my problem by sending the object this way through the jQuery ajax command:

data: '{"pt":' + JSON.stringify(pt) + '}'

this serialized the object automatically and returned it to my WebMethod. When i tried sending the object as is, i got an error saying "invalid JSON primitive".

Answer 2

You are attempting to pass a string to the method. You will need to accept the string, and deserialize it with fx. JavascriptSerializer or JSON.NET

Answer 3

I know this is incredibly old, but its not very intuitive when you're using this to figure out what the issues are. You are very close but I wanted to add a bit more to this in case someone else later wants to do the same thing. This works with nested objects as well, the one thing I can say is CASE matters in your JS variables that map to .NET POCOs on the page method.

Your "answer" is where I will start with. And as in the comments below it, yes you have to pass the object wrapped in its page method variable name.

Ill say it again, this is CASE-Sensitive, and can trip you up not just on the object's name but its properties as well. So to combat this I usually create my POCO object in .NET then copy that to the page so I know the names, capitalization and all are correct. Something like this:

POCO:

Public Class CustomObject
    Public Property Id as integer
    Public Property ReqDate as DateTime
    Public Property Message as string
End Sub

Now with a defined POCO for page method, replicate that "model" exactly as it is for the JS/AJAX to post with, being vigilant about case-sensitivity.

function ParseAndPostData()
{
   var data = { custobj: {
                Id: 1, 
                ReqDate: "04/12/2018",
                Message:"Hello!" 
                }
           };
  //Stringify the data so it goes through page method parser
  var postdata = JSON.stringify(data);
  $.ajax({
         type: 'POST',
         url: '/BasePath/SomePage.aspx/SomeMethod',
         data: postdata,
         contentType: 'application/json; charset=utf-8',
         dataType: 'json',
         success: function (msg) {
              var parsedACData = JSON.parse(msg.d);
              alert(parsedACData);
             },
        error: function (msg) {
              alert(msg);
              }
  });
}

Page Method (Note custobj in the parameters):

<WebMethod()> _
Public Shared Function PostCustomObject(custobj as CustomObject) as String
    return custobj.Message
End Function