Long title, but this is a problem that has haunted me for a while now.  I have an Asp.Net WebMethod that takes a List/IEnumerable/Array of stuff as a parameter, how do I send that stuff to that method using the JQuery Ajax method.

Now, without having to reinvent the wheel, do check out David Ward’s articles on JQuery and Asp.Net WebMethods for a primer on how this is done.

But one item not mentioned is how to update methods that take lists.

If you want to know why this is hard, take a look at this sample.  If you have a web method that looks like this:

   1: [WebMethod]
   2: public void SendName(string firstName, string lastName)
   3: {
   5: }

You are going to call it with code like this:

   1: $.ajax({
   2:   type: "POST",
   3:   url: "WebService.asmx/SendName",
   4:   data: "{'firstName':'Chris','lastName':'Brandsma'}",
   5:   contentType: "application/json; charset=utf-8",
   6:   dataType: "json",
   7:   success: function(msg) {
   8:   }
   9: });

If you are still wondering where this issue is, look at line 4 of the second sample there.  

data: “{‘firstName’:’Chris’,’lastName’:’Brandsma’}”,

The data that is being passed to the web method has to be converted to string first.  And a JSON compliant string.  Now, while there is a way to take a JSON string and turn that into functioning JavaScript code (via the eval method), there is no built in “turn this JavaScript object into a JSON string for me, m’kay”.  For simple data this is no problem, but for complex data this is a daunting task.

But there is a way.

Enter JSON2.js by the most excellent Douglas Crockford — go check out his book, Javascript: The Good Parts

JavaScript: The Good Parts

ISBN: 0596517742
ISBN-13: 9780596517748

(Side note: if anyone has contact info on Mr. Crockford, I’d love to do a podcast with him as well)

JSON2.js gives you a method called JSON.stringify. Which takes an object and returns a string.  All this in a class that can be minified to less than 2.5K.

Now, lets put this to work.

I’m going to create a new WebMethod:

   1: [WebMethod] 
   2: public void SendValues(List<string> list)
   3: {
   5: }

Here is my JQuery code:

   1: var list = ["a", "b", "c", "d"];
   2: var jsonText = JSON.stringify({ list: list });
   4: $.ajax({
   5:   type: "POST",
   6:   url: "WebService1.asmx/SendValues",
   7:   data: jsonText,
   8:   contentType: "application/json; charset=utf-8",
   9:   dataType: "json",
  10:   success: function() { alert("it worked"); },
  11:   failure: function() { alert("Uh oh"); }
  12: });

And it works!  If you are worried that I’m sending too simple an object here (a simple list of strings in this example), I have tested this with much more complex object types as well, and it still works wonderfully.

Previous post

How Scrum is Like Marijuana

Next post

JQuery 1.3.2: Performance and IE8


  1. February 23, 2009 at 7:25 am

    […] JavaScript Arrays via JQuery Ajax to an Asp.Net WebMethod and JQuery 1.3.2: Performance and IE8 (Chris Brandsma) […]

  2. March 2, 2009 at 1:08 pm

    Just what I needed! Thanks Obi!

  3. May 7, 2009 at 8:06 am

    This was just what I was looking for! Thanks a lot!

  4. May 12, 2009 at 5:43 am

    It really works! I also use a simple aspx file instead of WebService1.asmx. Works well passing parameters!

  5. March 7, 2011 at 6:01 am

    Good Work

  6. August 19, 2011 at 9:07 pm

    Thank you!

  7. September 3, 2011 at 12:21 am

    Great job! works perfect!

  8. September 4, 2011 at 9:10 am

     Thanx for the great article.Thats what i wanted precisely.

  9. November 10, 2011 at 9:28 am

    hi i tried out the above example but it is not working fine for me every time i get the error message

  10. November 14, 2011 at 6:54 pm

    Thanks for ending hours of failed attempts.