An ASP.NET WebService JSON Proxy Generator

Posted on June 30, 2007. Filed under: Ajax, ASP.NET, javascript, Programming, Web Services |

On sites that I develop, I sometimes prefer to deliver plain-vanilla html pages instead of ASP.NET ASPX pages, and to use web services on the back-end to perform my processing. The problem is that it is necessary to write code to call these web services, and unless you have a proxy generator available, you have to write a lot of javascript, potentially have ugly code, must duplicate a lot of it, etc., etc. In any case, it can be time consuming.

There are a number of implementations of systems that allow you to call back-end services from HTML pages. One popular one is Jayrock, a system that uses ASP.NET handlers subclassed off Jayrock foundation classes to generate javascript proxies. Another method is one defined in an article written by Matthias Hertel, in which SOAP proxies are generated by an ASPX page called in the <script> tag. There are drawbacks to both of these systems that I don’t like; Jayrock, for example, requires you to set up HTTP handlers on your site, and requires that you subclass off the Jayrock foundation classes. The Hertel method uses SOAP, and I prefer to use JSON, a much simpler, less wordy protocol.

The Hertel architecture is interesting to me, because it allows me to write “pure” web services and not HTTP handlers that inherit from a 3rd party class library, so I used that as a starting point for my own system. In Hertel, an ASPX page loads the WSDL for a specified webservice and uses XSLT to transform it into a bunch of Javascript that calls the services via SOAP. I took the same approach and instead generated JSON proxies. The result is that you can do the following in your javascript:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=Services/TestService.asmx"></script>
function doEcho() {
    TestService.Echo("Hello World", onEchoSuccess, onGenericFailure);

function onEchoSuccess(result) {
    alert("success: " + result);

function onGenericFailure(result) {
    alert("failure: " + result.responseText);

When the GetJavaScriptProxy code is called, it parses the WSDL and generates pure javascript. The generated Javascript looks like this:

 TestService = {
    url: "http://localhost:62657/TestSite/Services/TestService.asmx",

    callAsync: function(func, params, onSuccess, onFailure)
        {callService("POST", this.url + "/" + func, (params == null ? params : JSON.stringify(params)), onSuccess, onFailure);},

    ExceptionTest: function ( onSuccess, onFailure)
        { this.callAsync("ExceptionTest", null, onSuccess, onFailure); },

    HelloWorld: function ( onSuccess, onFailure)
        { this.callAsync("HelloWorld", null, onSuccess, onFailure); },

    Echo: function (msg, onSuccess, onFailure)
        { this.callAsync("Echo", {msg: msg}, onSuccess, onFailure); }

By including 2 other small javascript libraries, one that provides the actual callService code, and the JSON library from, we have a complete AJAX system that can invoke ASP.NET WebServices using JSON as the protocol, and providing a natural caller model to the javascript coder.

I’ll be packaging the code shortly and making it available; if you are interested, please contact me directly.

Read Full Post | Make a Comment ( 2 so far )

Liked it here?
Why not try sites on the blogroll...