Using the Dojo Toolkit with Microsoft’s WCF

For .NET developers, the Microsoft Windows Communication Foundation (WCF) is an excellent resource for creating service-based Web applications. Defining web services is relatively easy using WCF; using Visual Studio .NET, you can set up a solution with the interfaces needed for WCF quickly and easily. Actually doing the communication using Ajax, however, requires a client-side component to make and handle the various Ajax calls. Almost all of the examples on the Intertubes(™) use jQuery, but that’s not the only JavaScript toolkit on the market. How would you accomplish these goals if you were developing your service-based applications using the Dojo Toolkit?

It turns out that consuming WCF-based services with Dojo is quite easy to do, and in this post we’ll show you how to do it. For reference, we’ll be using this article from Sridhar Subramanian at C# Corner which shows how to write your WCF-based services, so we won’t be going into the details of the C# component here. Instead, we’ll focus on the client-side code.

Get the code
If you’d like to see this in action, download this zip archive, which is set up as a solution using Microsoft Visual Web Developer 2010 Express. The HTML file we’ll be using for examples is called “WCFWithDojo.html”, which you’ll notice is a pure HTML file and not an ASP.NET page. To see how the actual Ajax calls are made with Dojo, scroll to the bottom of that file.

Calling the web services
The first example in this file calls an old-style ASMX-based web service, with the result expected as JSON. Most of the default web services in .NET expect HTTP POST-style calls, which is represented in the Dojo Toolkit with dojo.xhrPost. Here’s the basic example:

dojo.xhrPost({
       url: "/service/CountryProvinceWebService.asmx/GetProvince",
       handleAs: "json",
       contentType: "application/json",
       postData: dojo.toJson({ "Country": "USA" }),
       load: function(result){
               //      The result here is of type Object; use JS accessors
               //      to extract information from it.
       },
       error: function(err){
               console.warn(err);
       }
});

Read more: Script Junkie

Posted via email from Jasper-net