Introduction:-

With the growth of Web2.0 and the need for faster user experience the spotlight has shifted onto javascript based applications built using REST pattern or asp.net AJAX Pagerequest manager. And when we are working with javascript wouldn’t it be much better if we could create objects in an OOAD way and easily push it to the client side.  Following are the reasons why you would push the server side objects onto client side

-          Easy availability of the complex object.

-          Use C# compiler and rick intellisense to create and maintain the objects but use them in the javascript. You could run code analysis etc.

-          Reduce the number of calls we make to the server side by loading data on the pageload.

I would like to explain about the 3^rd point because that proved to be highly beneficial to me when I was fixing the performance issues of a major website. There could be a scenario where in you be making multiple AJAX based webrequestmanager calls in order to get the same response in a single page. This happens in the case of widget based framework when all the widgets are independent but they need some common information available in the framework to load the data. So instead of making n multiple calls we could load the data needed during pageload.

The above picture shows the scenario where in all the widgets need the common information and then call GetData webservice on the server side. Ofcourse the result can be cached on the client side but a better solution would be to avoid the call completely.

 In order to do that we need to JSONSerialize the content and send it in the DOM.

Example:-

I have developed a simple application to demonstrate the idea and I would explaining that in detail here.

The class called SimpleClass would be sent as serialized JSON to the client side .

And this inherits from the base class which has the implementation for the GetJSONString method. You can create a single base class and all the object which need to be pushed to the client side can inherit from that class. The important thing to note is that the class should be annotated with DataContract attribute and the methods should have the Data Member attribute. This is needed by the .Net DataContractSerializer and this follows the opt-in mode so if you want to send an attribute to the client side then you need to annotate the DataMember attribute. So if I didn’t want to send the Result I would simple remove the DataMember attribute. This is default WCF/.Net 3.5 stuff but it provides the flexibility of have a fullfledged object on the server side but sending a smaller object to the client side. Sometimes you may hide some values due to security constraints.

 And thing you will notice is that I have marked the class as Serializable so that it can be stored in the Session and used in webfarm deployment scenarios.

Following is the implementation of the base class –

This implements the default DataContractJsonSerializer and for more information or customization refer to following blogs –

http://softcero.blogspot.com/2010/03/optimizing-net-json-serializing-and-ii.html

http://weblogs.asp.net/gunnarpeipman/archive/2010/12/28/asp-net-serializing-and-deserializing-json-objects.aspx

The next part is pretty simple, I just need to inject this object into the aspx page.

And in the aspx markup I have the following line –

<script type="text/javascript">

var data =(<%=SimpleClassJSON  %>);

alert(data.ResultText);

</script>

This will output the content as JSON into the variable data and this can be any element in the DOM. And you can verify the element by checking data in the Firebug console.

Design Consideration –

If you have a lot of javascripts then you need to think about using Script # and you can write javascript in C#. Refer to Nikhil’s blog –

http://projects.nikhilk.net/ScriptSharp

Ensure that you are taking security into consideration while exposing server side objects on to client side. I have seen application exposing passwords, secret key so it is not a good practice.

The application can be tested using the following url –

http://techconsulting.vpscustomer.com/Samples/JsonTest.aspx

The source code is available at