Welcome to weblogs.com.pk Sign in | Join | Help

AJAX-enabled WCF Service :: Getting Started

Once you know how to configure the WCF services; they are great! There is built-in AJAX-enabled WCF Service template that one can use to create a server side peace of the modern AJAX base web app. The more recent option is Web-Api; but it requires that you can make changes in the RouteTable and when you cant; AJAX-enabled WCF Service can be used!


Once it gets added; it adds the following configurations in the web.config; note the three important section that together make the WCF; AJAX enabled!


All set; we can then add required methods into the WCF class that we can invoke through Javascript! For the sake of simplicity I have added two inline methods without the contracts; the recommended practice. Also note the class level attribute matching the web.config entry to making it run in ASP.NET compatibility mode; that is; it will get invoked in HTTP pipeline similar to traditional ASMX; all the File Authorization, Url Authorization and HTTP session state will be applicable!


By default; the service returns the data in JSON format; if we want to return in XML; we can use the WebGet attribute at method level and set the content type accordingly; as highlighted!

Once the server peace is ready; we need some HTML + Javascript to invoke the service and display the data! The nice thing about AJAX-enabled WCF service is that we can access it by OurService.svc/js (or OurService.svc/jsdebug) url and it will generate the Javascript that we can use to access it. If we are using ASP.NET; we can also use ScriptManager and reference the service and it all gets done automatically and we have a client side proxy class in Javascript that we can use to call the service! Here’s a simple ASPX page with the ScriptManager and then a Javascript calling the service and displaying the data being received from the server adding it dynamically into the unordered list!


So far so good; but we end up writing “Spaghetti Javascript” (the good old Classic ASP / PHP days). After Visual Studio 2010; Microsoft started releasing Previews of Microsoft AJAX Library (previously ASP.NET AJAX Library); it was a pure client side Javascript library with no dependency or requirement of any server side technology and it had feature parity with Ajax Control Toolkit; you can use Javascript and do all kind of fancy things including templating! It reached till Beta after six previews and using it; we can rewrite the above Javascript code to something like this


Notice; there is no ScriptManager; instead a client side “start.js” file is used that loads the required Javascripts from the MS AJAX library that we ask for using Sys.require. We are using a client side “dataView” control (Javascript control) that supports templating and we no longer have to write any Javascript code doing for loop; adding HTML into the DOM etc; its all taken care with this “dataView control”

This is all great; but seeing jQuery popularity; Microsoft decided to abandon their MS AJAX library and instead introduced three jQuery plugins; one for templating; one for data linking and the last one for globalization. The templating plugin also reached till Beta; we can access our service and can have the templating in place with the following code!


Notice; jQuery’s $.ajax is used to call the service and jquery.tmpl has slightly different templating syntax! This all works; but unfortunately the tmpl plugin is no longer being updated and is not considered the “official” jquery templating solution. jQuery being open and widely used; there are number of plugins that one can use. jQuery Templating and jQuery Mustache are popular. Boris Moore; is the guy who I think developed this “tmpl” plugin; even he has developed two more JsViews and JsRender! They all have similar concept and offer a solution to avoid writing Spaghetti Javascript! What’s your favorite?

Templating just resolve JSON to DOM problem; for the remaining CUD operations of typical CRUD requirement needs DOM to JSON functionality as well. In next post of this series; we will revisit this and will also add Update / Save functionality

Published Monday, March 3, 2014 4:01 PM by khurram
Filed under: ,


No Comments

New Comments to this post are disabled