Friday, July 22, 2011

Devloping web2.0 user interface for self hosted WCF services using HTML5, CSS3 and JQuery

WCFWebApp Image - maximum width is 600 pixels

Link to article


This article describes a method to utilize WCF self hosted services to be able to serve web 2.0 user interface as well as web services.

By using this method tools or applications can be built using web 2.0 technologies like HTML5, CSS3 with self hosted WCF service as backend business layer. Thus developers can benefit from advanced javascript libraries like JQuery or Underscore etc.. to build user interface. This eliminates need to install .Net framework on client machines.

Traditionally self hosted WCF services has user interface built using WinForms and WPF technologies. And to be able to use browser as UI platform ASP.Net and IIS becomes hard dependencies. For tools and applications which typically are executed out of a single machine or intranet with limited users, IIS is considered as an overkill. Thus browser as a UI plarform with HTML5, CSS3 and backed by powerful javascript engines is very promising option for self hosted WCF services.


Intial versions of WCF could only work with SOAP messages. With bindings like WebHttpBinding from .Net3.5 onwards WCF could offer direct support to consume web services from ajax calls from javascript. However consuming dataformats like JSON is still not so much so an out of box experience. Effort to write DataContracts for every argument and return types is quite high. And with other data formats like XML, client end couldn't directly benefit from javascript libraries due to extra step involved to convert from XML to JSON.

This method considers 'Stream' as input and out type for UI interfacing operations. It also supports basic authentication which can be extented for advanced usage. And no customization is done at any layer and just works based on out of box features of WCF in .Net 3.5. This can also be used with .Net 4.0. However for JSON.Net is used to format json objects.

Using the code

Download and build source. You can use Visual Studio 2010 or VS command line. (Code is built for .Net 4.0 but can be used with .Net 3.5 also)

  1. Start WCFWebApp.exe. If port 2011 is not free, change to different port. And you need admin previleges
  2. When server is running, open any browser with javascript support and navigate to "http:/:/index.htm"
  3. Enter username # 'user' and password # 'pass' and click on login. You will login and an about page is loaded
  4. Click on States link
  5. Check on visited option for any state and click on Update
  6. Change page to About and come back to States and observe that last selection is perisisted.
  7. Click on 'Logout' on right top corner.

All these operations are run out of a self hosted WCF service. And this demonstrated features like authentication, fetching static files, getting as well as setting and data. Following sections walk through code.

Server code

Main class just starts a WCF service using WebHttpBinding and WebServiceHost.

class Program
    static void Main(string[] args)
      string baseAddress = "http://" + Environment.MachineName + ":2011/";
      using (WebServiceHost host = new WebServiceHost(typeof(WebApp), new Uri(baseAddress)))
        WebHttpBinding binding = new WebHttpBinding();
        host.AddServiceEndpoint(typeof(IWCFWebApp01), binding, "").Behaviors.Add(new WebHttpBehavior());
        ... other lines left for brevity

Service contract defines a method 'Files' to serve all static html files, another method 'Links' serves all linked files like javascript, stylesheets and data. Other resources like login. logout, States and State are service operations. Observable point here is 'Stream' data type for input as well as output.

    public interface IWCFWebApp01
      [OperationContract, WebGet(UriTemplate = "/{resource}.{extension}")]
        Stream Files(string resource, string extension);

      [OperationContract, WebGet(UriTemplate = "/{path}/{resource}.{extension}")]
        Stream Links(string path, string resource, string extension);

      [OperationContract, WebInvoke(Method = "POST", UriTemplate = "/login")]
        Stream Login(Stream request);

      [OperationContract, WebInvoke(Method = "POST", UriTemplate = "/logout")]
        Stream Logout(Stream request);

      [OperationContract, WebGet(UriTemplate = "/states")]
        Stream States();

      [OperationContract, WebInvoke(Method = "POST", UriTemplate = "/state")]
        Stream State(Stream request);

Now coming to service implementation. As this method is primarily intented for self hoseted WCF services, singleton isntance with concurrent threads is good enough. Consider sessions as applicable. But unlike IIS hosted services, self hosted services would nomally serve limited users and thus default concurrency is good enough. And on functional line constructor is just loading data onto local member.

[ServiceBehavior(InstanceContextMode = InstanceContextMode.Single,ConcurrencyMode=ConcurrencyMode.Multiple)]
    public class WebApp : IWCFWebApp01
    JObject states;

    public WebApp()
      if (states==null)
        states = JObject.Parse(File.ReadAllText("web\\data\\states.json"));

    ... other lines left for brevity


Now that server is running, when user tries to access for the first time, several htm, css and javascript files are served.
These are handled by methods 'Files' and 'Links'. Links are files refered in index.htm in head section like JQuery. And in 'Files' method different types of files are picked up from seperate folders based on extension. Switch cases can be extended based types of files.

public Stream Links(string path, string resource, string extension)
       ... other lines left for brevity

    public Stream Files(string resource, string extension)
      switch (extension)
        case "htm":
           ... other lines left for brevity
        case "js":
           ... other lines left for brevity

When user makes a login request, basic authentication token is sent in standard header "Authorization".
That is validated in a seperate method 'Authenticate' described later. Also username is sent as JSON object in request stream which is parsed into JSON object using JSON.Net library. Logout method is similar to login

public Stream Login(Stream request)
      if (!Authenticate()) return null;
         ... other lines left for brevity
      JObject o = JObject.Parse(data);

When user clicks on 'States' request reaches following method.
As this resource doesn't have any extension, request will not go through 'Files' method. Here request is authenticated and data is sent from member variable.

public Stream States()
      if (!Authenticate()) return null;

      WebOperationContext.Current.OutgoingResponse.ContentType = "application/json";
      return new MemoryStream(Encoding.ASCII.GetBytes(states.ToString()),false);

When user does a modification and clicks on 'Update', following method would be invoked. This parses state id and update class member variable and returns updated list back to client.

public Stream State(Stream request)
      ... other lines left for brevity
      JObject data = JObject.Parse(new string(buffer));
      int id = ((int)data["id"]) -1;
      states["states"][id]["visited"] = true;

      return States();

Authentication. Methods which require authorization invokes following method.

public bool Authenticate()
      string userName = "user";
      string password = "pass";

      string basicAuthCode = Convert.ToBase64String (Encoding.ASCII.GetBytes (string. Format ("{0}: {1}", userName, password)));
      string token = WebOperationContext.Current.IncomingRequest.Headers["Authorization"];
      if (token.Contains(basicAuthCode))
        return true;
        WebOperationContext.Current.OutgoingResponse.StatusCode = HttpStatusCode.Unauthorized;
        return false;

Client code

Client code is placed in seperate folder by name 'web'. At the root of this folder all static htm files are placed. And seperate sub-folders are included for images, javascript and stylesheets. These are refered from 'Files' method in server code based on extension.

Client follows Single Page Application design. Thus only 'index.htm' is a full html page. Other html files are filled into 'content' division using ajax calls as shown below for states

function StatesPage () {
  this.loadStatesPage = function (data) {
    content = undefined;
    $.each (data, function (index, value) {
      if (data[index]["id"]=="content") {
        content = data[index].innerHTML;
        $("#content")[0].innerHTML = content;
        $("#b_update")[0].onclick = updateStates;
    if (content == undefined) {alert("Failed to load page: Content missing"); return;} 
      ... other lines left for brevity

Authentication: Client side authentication token is in login class. This token is added in header section in 'beforeSend' function of each call after login. Other code in client requires understanding abour Jquery, javascript and ajax concepts which is well explained on web.

Points of Interest

If windows authentication is required, service host can be customized

More structured javascript libraries with MVC architecture can also be used without making any change to server side code.

Consider using JQuery UI plugins for common look and feel

As UI is browser based, extending UI for handheld devices becomes quite easy.