JavaScript Arrays via JQuery Ajax to an Asp.Net WebMethod

February 21st, 2009

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: {
   4:     
   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: {
   4:     
   5: }

Here is my JQuery code:

   1: var list = ["a", "b", "c", "d"];
   2: var jsonText = JSON.stringify({ list: list });
   3:  
   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.

  • Pingback: Dew Drop - February 23, 2009 | Alvin Ashcraft's Morning Dew

  • Nick

    Just what I needed! Thanks Obi!

  • http://www.svennerberg.com Gabriel Svennerberg

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

  • http://jack-fx.com/blog/ Jack

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

  • Ashutosh

    Good Work

  • Cjaxsn

    Thank you!

  • http://www.facebook.com/Danimal521 Daniel Biscup

    Great job! works perfect!

  • Simba

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

  • Shenoy Prasanth

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

  • Brian

    Thanks for ending hours of failed attempts.