Consume .Net Web service using jQuery
Avoid using the Microsoft client library. Instead use jQuery.
The JavaScript functionality that is injected into .Net pages seems limited when compared to jQuery.
Whilst looking for a way to use jQuery instead of the stock Microsoft client library, I came across this excellent article.
There doesn’t seem to be too much on Web about this subject. Maybe most .Net developers stick to Microsoft tools, but I like using jQuery for all my client scripting, and would rather not use more than one library. So as it look me a while to get example code working, I’ve included my efforts.
Below is a simple .Net Web service. Once again, I’ve used continents and countries as my simple dataset. Pass a continent to the service, and it will return an array of countries.
<%@ webservice Language="C#" class="AndrewRowland.Continents" %> using System; using System.Web.Script.Services; using System.Web.Services; using System.Collections; using System.Collections.Specialized; namespace AndrewRowland { [ScriptService] [WebService(Namespace = "AndrewRowland")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class Continents { [WebMethod(Description="Returns array of countries for a given continent.")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string[] GetCountries(string continent) { Hashtable ht = new Hashtable(); ht.Add("Europe", new string[] {"UK", "France", "Germany"}); ht.Add("Africa", new string[] {"South Africa", "Zimbabwe", "Cameroon"}); ht.Add("North America", new string[] {"USA", "Canada"}); return (string[]) ht[continent]; } } }
Note the response format, which is JSON. Originally, I omitted this, and serialized the data as a JSON string using the .Net JavaScriptSerializer class, before returning it.
This resulted in the client having to evaluate the returned string to build an array. By returning an array, the JSON object is instantly available in our client code, without any jiggery-pokery.
To enable the client to call the Web service, I had to add following in my web.config file under the system.web section:
<webServices> <protocols> <add name="HttpPost"/> </protocols> </webServices>Sample client code that calls the .Net Web service:
<html> <head> <title>World example</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submit').click(function() { $.ajax({ type: "POST", data: '{continent: "' + $('#txtContinent').val() + '"}', url: "/services/example.asmx/GetCountries", contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { var data = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; $('#result').empty().append('<table border=1><thead><tr></tr></thead><tbody></tbody></table>'); $('<th/>').text($('#txtContinent').val()).appendTo('#result thead tr'); for (var i = 0; i < data.length; i ++) { $('<tr/>').append($('<td/>').text(data[i])).appendTo('#result tbody'); } }, failure: function(msg) { $('#result').empty().append(msg); } }); }); }); </script> </head> <body> <p><label for="txtContinent">Continent</label><br /> <input type="text" id="txtContinent" /> <input id="submit" type="button" value="Submit" /></p> <div id="result"></div> </body> </html>Note line 15:
var data = (typeof response) == 'string' ? eval('(' + response + ')') : response;
I added this line so that the data object is correctly evaluated if a serialized JSON string is returned.
There you have it, avoid the Microsoft code bloat, with not a ScriptManager tag in sight.
Comments
If you look at line 10 in the HTML example above, the data key of the AJAX request contains a serialised JSON object. I’ve manually serialised the parameters to be sent to the Web service. If your object is more complex, use a JSON stringifier.
The example Web service I’ve provided takes this very simple JSON object to obtain the parameter continent. It then returns a list of countries.
Hope this helps.
Indeed, and it appears many people are heading in this direction. Thanks very much for posting the first comment.
+1. Beautiful, I too love jquery and moved away from the scriptmanager/updatepanel/proxy stuff. It was way too clunky.
good article, thanks
would you show us
how to post a
json object to web
service and how
the service consume
the json object,
best is sample
thanks
Hello,
I am using .net 2.0 with c# and I am stuggling to get any of these exemples working. Could you please send a .net zipped up proj or solutio please
I’m also using .net 2 with C# and would appreciate the revised solution. Thanks in advance.
Seems to be a fair amount of interest in this post. As you can see, I’m stuggling to find the time to update this blog more regularly.
I’ll try to come up with a basic site, and post it here some time this week. I don’t use Visual Studio, so I can’t create a project.
Thanks gents.
Sorry for the delay. I installed Visual Studio 2008 Express, and created this project.
Hope this helps.
nice article!
thanks
Now I shall try it myself…
:)
Hi there,
if you’re interested in creating a more object oriented proxy for a webservice using jQuery check out my article on:
http://yoavniran.wordpress.com/2009/08/02/creating-a-webservice-proxy-with-jquery/
Good stuff Yoav. I’m sure your article will be useful to others as well.
HI
I am trying to use FullCalendar to display events but I am having trouble trying to get the right json array returned.
Heres my server side code
public string[][] GetEventsForDate(string currentDate)
{
Hashtable ht = new Hashtable();
string[][] jaggedArray1 =
{
new string[] {“1”,“Meeting One”,“2009-10-30T08:15:00.000+10:00”,“2009-10-30T10:15:00.000+10:00”},
new string[] {“2”,“Meeting Two”,“2009-10-30T12:15:00.000+10:00”,“2009-10-30T13:15:00.000+10:00”},
new string[] {“3”,“Meeting Three”,“2009-10-30T02:15:00.000+10:00”,“2009-10-30T03:15:00.000+10:00”}
};
return jaggedArray1;
}
Any ideas?
Hi
I was able to figure out a way to integrate the FullCalendar with ASP.Net, heres the link to a write up I did
http://www.101webdesigns.com/index.php/2009/11/03/jquery-calendar-in-asp-net/
Hope someone finds it useful
Excellent example!
Hi.
I am wondering if this works from a static html page outside of the webservice project?
Hi am using Webservice as a different project and when i add a webreference of this in my project. then jquery call does not works. if the asmx file is in the same webapplication project then it works fine. Is there any way to cosume the webservice’s webmethod by puting the web reference of weservice.
No reason why not. In your AJAX call, you will have to use the full URL if the service is running on different domain. Other than that consideration, it should not be a problem.
Here is an example of how to get FullCalendar working in VB.NET using a webservice. http://jake1164.blogspot.com/2010/06/jquery-fullcalendar-and-aspnet.html
Please comment on this article. Constructive criticism, ideas, and corrections welcome. In fact, it does not even have to constructive. Feel free to take the p*ss.