JSON-Enabled WCF Services (Part 2)

Attachment: JSON-Enabled WCF Services (part 2).zip

This article is to continue the article JSON WCF Service (part 1), in which we created WCF service taking and giving out data in JSON format.

In this article, we are going to implement JavaScript-based client side that will interact with our WCF service. However, we won’t write a single line of pure JavaScript code in order to do this. Instead, we will use Script#. It allows us to write code in C#, programming language we got used to and translate it to JavaScript.

You can get some basic knowledge about Script# from the article Script# insights or on the official website of the product [http://projects.nikhilk.net/ScriptSharp]. There you can download the latest version of Script#.

So, let’s start working.

Start from the message classes: ContinentPopulation, ContinentDetails, ContinentDetailRequest, ContinentDetailsResponse, ContinentsListResponse.

As you remember, members of every class above are automatically implemented properties. However, if you try to assemble Script# project with such properties, you will get the following error:

“Feature ‘automatically implemented properties’ cannot be used because it is not part of the ISO-2 C# language specification”. So we have to modify our classes so that they address to the language specifications.

It can be done in multiple ways. I will show you all of them, so you can choose one that is the most convenient for you.
The first one and, probably, the easiest way is to create data model specially for Script# projects.
For example, message class ContinentPopulation for common C# projects looks as follows:

In Script# it will be:

This is not the best way, and I wouldn’t recommend using it. Yes, it can be good if you create sample application that contains only few classes of data model. But real projects include huge amount of data model classes and may reach up to hundred classes. Just imagine that you will need to continuously synchronize changes in these classes.

In order to avoid duplication of data model classes I suggest to use preprocessor directives.

First of all we need to add conditional compilation symbol to data model service project Let’s call it SERVICEMODEL. We will use it in the #IF directive in order to define server side code which will not be used in Script# classes.

Add a project to our solution that will contain data model for Script#. Name it ClientDataModel.

As you add the project, you will be suggested to set the folder to copy the generated js files to. I set Scripts folder of the web application.

It is necessary to add references to data model service classes in the created projects.

Let’s see how class code should look like. I won’t show code of each class, you will be able to view it in the sample attached to this article. I will just consider code of the ContinentPopulation class. Changes for the rest of data model classes will be the same.

Code of the ContinentPopulation class is shown below:

The fragment containing mixed client and server side code will look like:

Now let’s consider the listing above.

Our class doesn’t use System.Text namespace, that is why line 4 may be deleted. System.Runtime.Serialization namespace doesn’t exist in Script#, but it is used in C# (contains DataContract and DataMemeber classes), that is why line 5 should be replaced by the following code:

We don’t need DataContract and DataMember attributes in Script#, that is why we will place them in the directive “#if SERVICEMODEL” (lines 9, 12, 19).
We’ll do the same with properties. Code of the changed class is shown below:

All data model classes should be transformed in this way. PreserveCase attribute is used in order to avoid conversion of the class member name when generating JavaScript code.

Finally we will change namespace in classes of our data model from ServiceDataModel to DataModel

Let’s proceed to implementation of the client side of our application.

Add “jQuery Script Library” project under “ClientLibrary” name to our solution.

In order to avoid copying js files to web application during assembling Script# project you can set Scripts folder in the way we did it when adding Script# project to data model.

Let’s forget that JavaScript has no idea about interface or class, let’s forget about JavaScript at all. Let’s write code in C# in the way we got used to (based on the specification ISO-2 of C#).

I can schematically describe interaction of WCF service and client application in the following way.
WCF has 2 public methods: GetContinents and GetContinentDetails that are defined by IContinentsPopulation interface.
In the client application, it is possible to define service layer that will do all the job of getting data from the service – interact with service methods GetContinents and GetContinentDetails. Define IService interface with methods: GetContinents and GetContinentDetails which names are analogous to the names of service methods.

Interaction with the service will be asynchronous, that is why interface methods will transmit callback methods. They will be executed after successful or failed execution of the query. Interface code is shown below.

Let’s create class implementing IService interface, name it ServiceProvider. ServiceProvider class will form AJAX queries to the server, set handlers for successful or failed completion of the query. Implementation of the class is quite simple that is why we won’t consider it. Let’s consider GetRequestData and PrepareDataForRequest methods.

GetRequestData method executes conversion of the object to a string in JSON format by using the standard class provided by Script#.

GetContinentDetails method on WCF service has argument with the “request” name. It slightly limits query data, it should be provided in the following way:

In this case an object of the ContinentDetailRequest type with request name will be created when serializing data on WCF service. That is why we create a dictionary in the Script# project and place all objects of ContinentDetailRequest type with “request” key.

Code of this method will look as follows after conversion to JavaScript:

It can be done in the other way. Create class that will contain field with request name and object type.
For example, RequestData class as shown below:

Then it will be possible to create an object of RequestData type in the PrepareDataForRequest method, set field value to request and pass it for serialization:

Add SetData method to IService interface. This method will process data came from the server deleting unnecessary information. And correspondingly implementation of this method in the ServiceProvider class will look like this:

Client application will contain three layers – one layer has been considered already – this is the layer of interaction with server. Next layer is layer of data processing, it will prepare data necessary for execution of methods on the server and handle response from the server. The third layer is responsible for displaying data on the page.

Now let’s add to the ClietLibrary project a class that will manage the process of getting data from the server (data processing layer). Name it ContinentsManager.

We won’t consider code of this class as it quite simple for understanding. I will just mention that this class should somehow notify data display layer that the data has been loaded. JavaScript doesn’t have event, but Script# allows us to describe events in the way we do it in C# hiding from us the whole implementation of the mechanism. That is why we can certainly describe the following events in the ContinentsManager class:

Every event type should have a delegate. Corresponding delegates are provided below:

Let’s proceed to the data display layer.

I’ll show you how the page with data should look like:

Table structure is as follows:

Add ViewManager class to the ClientLibrary project. This class will be responsible for data displaying. On the previous step, we created ContinentsManager class that allows getting of data from the server. It has 2 asynchronous methods and corresponding events. Let’s create a private field of the ContinentsManager type with name _continentsManager. Initialize this field in the ViewMethod constructor.

Add the SetElement method to the ViewManager class. This class will setup and configure element for data diaply. And LoadData method initializing data upload from the server. Let’s review work of the SetElement method. It calls InitializeViewElement method which code you can see below:

In the first code line, we get page element. This line looks like this in JavaScript:

The second line checks if the elements are found. The fourth line gets the first element – JavaScript equivalent

The fifth line sets CSS property “border” for our element by using JQuery – JavaScript equivalent:

Code of the InitializeHeader method is set in the table below where each line of code in Script# corresponds to a line of code in JavaScript. This method create table caption with 2 columns “Name” and “Population”.

Script#

JavaScript

_continentsManager_ContinentsListLoaded method is called when a list containing continents and popularity was loaded from the server. _continentsManager_ContinentsListLoaded method searches the list of clients and adds data to the table. When the table row is formed, a cell containing data about continent name is bound to click event. This event handler gets cell content – continent name – and queries detailed data for this continent.

_continentsManager_ContinentDetailsLoaded method is called when detailed data on continent is loaded from the server. This method forms strings with continent data and displays it in the modal window.

ViewManager class is ready, and correspondingly data display layer is ready as well.
Let’s see how to use all we created in Script#

By adding all necessary scripts to the page:

<script src=”Scripts/jquery-1.6.2.js” type=”text/javascript”></script>

<script src=”Scripts/mscorlib.debug.js” type=”text/javascript”></script>

<script src=”Scripts/ClientDataModel.debug.js” type=”text/javascript”></script>

<script src=”Scripts/ClientLibrary.debug.js” type=”text/javascript”></script>

Element we will use for data display:

Add the following JavaScript code:

This code creates object of ClientLibrary.ViewManager class. Set an element in the page loaded event handler, this element will be used to display data and call data upload method.

The application looks in the browser as shown in the picture below. Table displays a list of countires with population. If you click on the country name detailed data on this country will be loaded from the server and displayed in the dialog window of the browser.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.