Wednesday, 8 September 2010

Creating a JSON - enabled .NET Web Service

Assuming that you're writing VB.NET. The blogging app won't let me put less than / greater than tags in so make sure you add these.

1. Create a new ASP.NET Web Service Application project in Visual Studio 2008 / 2010. Call it 'JSONWebService'.

2. Rename the default 'Service1.asmx' to 'json.asmx'. Also rename the code behind class from 'Service1' to 'json' and change the binding on the front .asmx page.

3. There should be a commented line in the template code that the project creates that looks like "" . Uncomment this.

4. Add a new Public Class to your code behind. The example I am going to use will provide data on staff contact information (i.e. phone number, email address) but you can fit in whatever data you want. So I will do Public Class StaffInformation. Create four public string variables within the Class; Public forename As String, Public surname As String, Public phonenumber As String, Public email As String.

5. Add a new Web Method to the json Class. Call it GetEmployees so you'll need to do Public Function GetEmployees(ByVal id As String) As List(Of StaffInformation). Make sure you add the WebMethod() line of code above the Function declaration - you can copy / paste that from the HelloWorld method that the project template creates.

6. You'll also need to add this line inside tags below the WebMethod declaration: System.Web.Script.Services.ScriptMethod(UseHttpGet:=False, ResponseFormat:=Script.Services.ResponseFormat.Json)

7. Couple of important points here. The WebMethod is returning a List - that's pretty vital to the JSON output because from what I have read .NET struggles to convert more complicated objects such as DataTables. I had never used this before until I sorted this example out and it's a useful look into how OO works in VB.NET. The ScriptMethod in point 6. is also important because a) it tells the web service to return data in JSON notation, not XML and b) it forces the AJAX call to get made using HTTP POST and not GET. POST is essential when you write the AJAX call in jQuery.

8. The GetEmployees function is going to read some data from a database, put it into the List object and then return the List. Something clever then serialises the List into JSON.

9. Create SqlConnection, SqlCommand and SqlDataReader objects and set the first two up. In my example I did a simple SELECT statement against a table to return the four fields I'm looking for (as specified in the custom List).

10. Declare a new instance of the List (i.e. Dim MyList = New List(Of StaffInformation).

11. Execute the SqlDataReader. Loop through the dataset with it and do the following:

12. Dim item = New StaffInformation With {.field1 = reader(0).ToString(), .field2 = reader(1).ToString(), etc.}

13. MyList.Add(item)

14. Return MyList at the end of the Function.

15. You also need to modify the Web.Config file to allow AJAX HTTP calls. Inside the system.Web node add webServices, then protocols inside that, and then two new entries inside protocols: 'add name="HttpGet"' and 'add name="HttpPost"'.

16. That's it. Compile, publish to IIS and test with a jQuery AJAX call.


Manuel Micko said...

It returns xml not Json
How can i get Json?

IƱigo Mazo said...

I have the same problem, it returns JSON wrapped in XML, and I only want the JSON.

I try to read this JSON from EXTS with a ScriptTagProxy