Simple way of converting server side objects into client side using JSON serialization for asp.net websites
- by anil.kasalanati
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 3rd 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
http://techconsulting.vpscustomer.com/Source/HistoryTest.zip
