Consuming an ASP.Net WebService with Jquery & JSON

comments

ASP.Net Script Services and Web Services are an incredibly powerful tool for providing rich dynamic sites using AJAX. As good as they are, there are times when you want to access them in alternate ways. Combine JQuery, JSON and ASP.Net Web Services and you have a combination that rivals the A Team – lets take a look.

Quit your jibber jabber

While keeping my previous comments about this powerful combination in mind remember this: If there is one thing that the new snickers ads should teach you its that if you act like a girly man you’ll have Mr T drive a tank at you while making comments about your manhood and throwing snickers at you. This applies to many things, so lets get into it!

Something that a lot of people don’t understand properly is that ASP.Net Web Services do a lot of funky things. One of these is returning things as pure JSON… mmm. That's right kids, strongly typed JavaScript web services.

What you’ll need to do

1. Add JQuery to the page consuming the web service.

I recommend the much publicised Google API method to achieve this, and use their CDN to speed up jquery’s load time significantly. Its so simple and offers the download from their servers – this is a good thing.

<head>
  <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>
</head>

2. Add your script manager to your page and reference your web service(mine is a local file).

<asp:ScriptManager id="scriptmgr" runat="server">
    <Services>
        <asp:ServiceReference  Path="~/MyWebservice.asmx" />
    </Services>
</asp:ScriptManager>

3. Setup you Web Service as a Script Service

Firstly i would like to show a sample of my simple WebService’s one method. As you’ll note i have marked it’s method as a [ScriptMethod] so that it can be accessed by script as well as marking the service as a [ScriptService].

[WebService(Namespace = "http://tempuri.org/")]
[ScriptService]
public class MyWebservice : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public string GetName(string firstName, string lastName)
    {  
       MyReturnObject output = 
          new MyReturnObject(firstName,lastName)
       return output;
    }
}
public class MyReturnObject
{
    public MyReturnObject(string firstName, string lastname)
    {
        FirstName = firstName;
        LastName = lastname;
    }
    public string FirstName;
    public string LastName;
}

4. Access our service using jquery

Now this is the real fun part. As something that usually may be a bit of a round the block ordeal if you returning large amounts of data from your Web Service, JQuery sticks to its word to and comes up trumps with “Write less, do more”.

Things to note:

- the data parameters are CaseSensitive
- this will only work for local web services
- you’ll note that i point at both the web service AND its method name after the /
- make note that i have set the dateType as JSON so that our webservice will return as JSON not XML

<script type="text/javascript">
$(document).ready(function() {
     $.ajax({  
       type: "POST",  
       url: "/MyWebservice.asmx/GetName",  
       contentType: "application/json; charset=utf-8",  
       data: "{'firstName':'John','lastName':'Doe'}",  
       dataType: "json",  
       success: function(msg){
        var results = (typeof msg.d) == 'string' ? 
            eval('(' + msg.d + ')') : eval(msg);
        alert("Hello, "+results.FirstName+" "+results.LastName);
       },  
       error: function(){
        alert("There was an error");
       }  
   });
});
</script>