.Net, JavaScript

Consume .Net Web service using 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.

25 thoughts on “Consume .Net Web service using jQuery

  1. 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.

  2. 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

  3. 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.

  4. 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?

  5. 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.

  6. 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.

  7. Hi There. I’ve re-created the example as a project but its not working from my side. It’is doesn’t return a success or failed message either.

  8. Is it possible to retrieve the user’s identity (authentication) in the web method?
    I’m also wondering if user roles can be checked in web methods. If someone has some info or links, please share

  9. Hi Andy , nice post it helped me.
    I created a static HTML page and dumped the html code above in that and my web service works fine, But im facing a problem in the response part i.e in the success method the response is NULL.
    Can you please address my problem ASAP.

Leave a Reply

Your email address will not be published.