Return List<Object> from C# Method to JavaScript PageMethods

Question

I'm having issue returning a list of objects from a PageMethods call in JavaScript on an ASP.net ASPX webpage.

In the C# method, If I return a single object it is able to be read by the JavaScript, however If I return a List of objects it returns a 500 error.

Below is an example of returning a single object, which works.

C#

[WebMethod]
public static Project SingleObject()
{
     Project obj = new Project("Thing 1", 10, 10, "Thing 2", new List<string>() { "Thing 3", "Thing 4" }, "thing 5", new List<string>() { "Thing 6", "Thing 7" }, "Thing 8", new List<string>() { "Thing 9", "Thing 10" });

     return obj;
}

JavaScript

function getObject()
{
     var object = PageMethods.GetData(onSuccess, onFailed);

     function onSuccess(data)
     {
         console.log(data.thing1);
     }

     function onFailed(result)
     {
     console.log("Request Failed!");
     }
}

Now if I change the C# method to return a List<Project> instead of a single object, it errors out returning an error 500 within the chrome web console.

Example below.

C#

[WebMethod]
public static List<Project> MulitpleObjects()
{
     Project obj1 = new Project("Thing 1", 10, 10, "Thing 2", new List<string>() { "Thing 3", "Thing 4" }, "thing 5", new List<string>() { "Thing 6", "Thing 7" }, "Thing 8", new List<string>() { "Thing 9", "Thing 10" });
     Project obj2 = new Project("Thing 1", 10, 10, "Thing 2", new List<string>() { "Thing 3", "Thing 4" }, "thing 5", new List<string>() { "Thing 6", "Thing 7" }, "Thing 8", new List<string>() { "Thing 9", "Thing 10" });
     Project obj3 = new Project("Thing 1", 10, 10, "Thing 2", new List<string>() { "Thing 3", "Thing 4" }, "thing 5", new List<string>() { "Thing 6", "Thing 7" }, "Thing 8", new List<string>() { "Thing 9", "Thing 10" });

     List<Project> objects = new List<Project>() { obj1, obj2, obj3 };

     return objects;
}

JavaScript

function getObjects()
{
     var objects = PageMethods.GetData(onSuccess, onFailed);

     function onSuccess(data)
     {
          console.log(data[0].thing1);
     }

     function onFailed(result)
     {
          console.log("Request Failed!");
     }
}

How do I change it to be able to return a List of objects?

Answer 1

Solved by a suggestion by @DavidTansey

Just add the following to the web.config files, detailed here

<configuration> 
   <system.web.extensions>
       <scripting>
           <webServices>
               <jsonSerialization maxJsonLength="2147483644"/>
           </webServices>
       </scripting>
   </system.web.extensions>
</configuration>