Consuming WCF WebService from jQuery AJAX (with JSON)

So the guys at work are pretty sold on jQuery now.  Everybody who've used it don't want to go back to vanilla JavaScript (just as I predicted).

One of the things always sitting at the back of my mind is to bridge the call from jQuery.ajax to WCF WebServices.

Finally we had a chance to do this, and it turns out this was pretty easy.  Special mention to Alvin Shen and Ron Maman who checked this out.

 

  1. Create an AJAX-enabled WCF WebService
    image
  2. This will update your web.config - the only difference is the WCF bindings used - here are the two interesting bits

    <service name="SSW.WCF.Services.BookService">
       <endpoint address="" behaviorConfiguration="SSW.WCF.Services.BookServiceAspNetAjaxEndPointBehavior"
        binding="webHttpBinding" contract="SSW.WCF.Services.BookService" />
    </service>

    <behaviors>
       <endpointBehaviors>
          <behavior name="SSW.WCF.Services.BookServiceAspNetAjaxEndPointBehavior">
             <enableWebScript />
          </behavior>
       </endpointBehaviors>
    </behavior>

  3. Here's the jQuery AJAX call

    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: http://localhost/<web app name>/BookingService.svc/DoWork,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                alert(data.d);

            }
        });
    });

 

Incredibly easy, the hardest part was working what the url was going to be

 

UPDATE technologies list:

  • jQuery
  • WCF WebService (AJAX-enabled WCF WebServices are only available in ASP.NET 3.5 - where they added the webHttpBinding, which does JSON serialization)

UPDATE:
Note that ASP.NET does date serialization a bit differently - there is no proper JSON date standard, and the JavaScript date doesn't match the .NET DateTime class with timezone, you may need to do a bit of work to serialize back to a JavaScript date. 

 

Here's a fun service that we use for testing.

// Add more operations here and mark them with [OperationContract]
[OperationContract]
public object[] TestJSON()
{
    return new object[] { DateTime.Now, 1, 1.034f, null, "test" };
}

Code Archaeology

Define: Archaeology

A discipline involving the study of the human past through its material remains.

This is probably not an uncommon scenario:

  • You have an outdated project (or project plan)
  • You have some source code (may be in different branches in your source control)
  • You have some old emails about what various people needed
  • For some reason (low priority, budget, time), things were never done
  • You have a list of players who have left the project / company / industry / country

Your task, is to resurrect the project and make it work (again):

I was looking for a word to describe this special branch of Computer Science discipline.  And I think I've found it. 

Archaeology.

In my words, a study of the remains of ideas that were left in the system, and trying to reconstruct the past to work out a picture for the present and the future.

System.Runtime.InteropServices.COMException when opening a visual studio web project

I'm in the middle of installing everything to get my new laptop (still not working right) , and came across a problem where I couldn't open a particular web project in the solution.

"System.Runtime.InteropServices.COMException"

First thing I did was opening the project file in notepad and grab the project type guid:

{349c5851-65df-11da-9384-00065b846f21} - Ah ha!  Web Application Project

There's a few things you need to open this project on Vista:

1. You'll need IIS with IE6 Metabase and IIS 6 configuration compatibility

image

2. Run VS.NET as administrator

3. Find out the project's

Alternatively, you can install VS.NET 2008 SP1 and the messages will be a bit more friendlier.

image

 

jliu

Sharing a little gem - ASP.NET Javascript String.format

When you are working with ASP.NET 2.0, Microsoft injects quite a bit of Javascript framework stuff.  Most ASP.NET developers don't dive into these libraries and thus never know the gems that Microsoft has added in their Javascript framework.

I'm just going to share a little gem today, Microsoft has implemented a full version of the String.format in Javascript - in the same style as the .NET counterpart.

So in Javascript, you can do:

 

String.format( "{0:d}", new Date() );

or

String.format( "{0:c}", 100 );

Do watch out these values are localized to your current culture - whether it's [en] or [en-us] or [en-au], these are set in your browser's settings.

Have fun!

jliu