WCF DataService and jQuery

I have spent the last couple of days looking at WCF DataService and integrating it with jQuery. It's something I have been thinking about for a good few months now. We have some good reasons for wanting to do this; jQuery offers much more web development power than ASP.NET, RESTful web services are the way of the future and it's good to keep on top of what the private sector is already doing.

One of the frustrating things I find when undertaking a learning exercise like this one is how many dead ends you have to walk down before you arrive at the answer. I have spent two days Googling about a million different phrases and reading endless blog and forum posts about configuration, design and debugging. Even getting a simple RESTful web service via WCF up and running was a challenge but I finally cracked it and now I have a very simple web page making an asynchronous AJAX call to an IIS hosted WCF Data Service (which sits on top of the Northwind database), obtaining data in JSON and parsing through it. I had never done anything like this before so it has been an interesting (and at times frustrating) two days.

Here's a very quick walkthrough.

Fire up Visual Studio 2008 and create a new WCF Service Application (you might need to get the templates, or you might be lucky enough to have Visual Studio 2010 which has them pre-installed). Call it NorthwindService. I'm using VB.NET. Delete the IService1.vb and Service1.svc files that get created by default. Right click on the project and Add New Item. Select an ADO.NET Entity Data Model and call it NorthwindDataModel. This fires up a wizard so choose 'Generate from database' and create a connection to the Northwind database on your local machine or network. It's a good idea to create a SQL user on Northwind (i.e. northwind/northwind) and use this from the go rather than relying on integrated security - makes life easier when you deploy to IIS. If you choose to do this include the sensitive data in the connection string. Put ticks in all three boxes and hit Finish.

You'll get a nice ER diagram of Northwind which you can close. Add another new item, this time an ADO.NET Data Service. Call this NorthwindDataService. You get a Class file up. Make a few modifications. First, replace [[class name]] with NorthwindEntities. Second add config.UseVerboseErrors=true to the InitializeService sub (helps with debugging). Then uncomment the last two commented lines. Replace the first parameter in each method call with * and make sure they're both set to All rather than AllRead in the second parameter. Do a build and you should be good to go.

Let's test it out. Hit F5 and you should get IE up with a load of XML. You should recognise the tables from the Northwind database. Add /Categories after .svc and you will get just the Categories info - this is REST working in all its genius glory.

Publish to IIS next. Right click, publish. Target should be c:\inetpub\wwwroot\NorthwindService (remember that VS needs to be in Admin mode). Then open up IIS (which you installed, right, when you built your laptop) and create a new application on your default web site. Set the alias to NorthwindService and the path to where you just published to. You should now be able to browse to http://localhost/NorthwindService/NorthwindDataService.svc/. Try adding Categories after the final / in the URL and make sure you get the Categories data back.

How do I make jQuery talk to this service? That's dead easy but I will continue this tomorrow.