Generic Data Exchange Framework with AJAX

Introduction 

Does the internet programming have to be awkward and user unfriendly? Yes it does until the internet programming model is changed from HTTP/HTML to another one. I already hear very angry criticism saying that this model is being successfully used by thousands of programmers all over the world. Yes that is true. However have you ever asked yourself the questions like: It is strange that after more than 10 years of internet existence there is no a decent HTML editor. Development of HTML page is always a tweaking with HTML tags. Were these editors developed by incompetent beginners? No , they were designed by very skillful people, but the HTML language is not up to the task. And that is not all. The data exchange between the server and the client is ultimately primitive. There are no common objects. Even with ASP.NET the situation has not improved much. Unfortunately the model can not be changed instantly. We have to live with it for a few more years and this article is about how some internet data exchange problems can be solved.

Unification of the client and server programming

Would it be nice to program the client the same way the server is? In objects, not in HTML and DOM terms? What is the main problem in the development of rich web clients? The problem is that rich application (no matter Windows Forms or Web Forms based) always relies on rich objects. Saying rich means well structured hierarchal classes and the means to manipulate these structures. Unfortunately noting exists on the client side to facilitate this task. We have Java script language - pretty adequate language that syntaxically allows for the manipulating the structured data, but there is no mechanism to deliver these structures from the server to the client and back from the client to the server. At best we can use XML parser. But do we have to? Presented framework solves these problems. Hence all the objects originate on the server, we create the objects (classes) of virtually any complexity on the server, initialize them, register them with framework (RWCDF) and then the framework will generate already initialized objects for the client. After the data manipulation on the client side is complete, the objects get sent back to the server using traditional PostBack or [and ] AJAX. You can also invoke the methods directly on the server using AJAX calls passing the objects (the classes) as parameters. For the efficient data manipulation we need collections as well. Without dynamic structures like ArrayList and Hashtable the implementation of any serious data manipulation engine is very time consuming. Java Script ArrayList and Hashtable have been implemented and included into the framework. In other words the framework unifies the server and the client data manipulation. With this framework the programming of the web client is almost identical to the programming of the server side.But be aware that it is not a panacea. The performance of Javascript is the main  showstopper. Apart from that Javascript has a very loosely defined data types.

Framework Programming

The first logical step is to create the data structures that will serve our needs.

Collapse

  public class EmployeeAddress
 {                         
    public string City;                         
    public string Country;
    public string Street;                     
    public string Phone;  
    public ArrayList PhotoAlbum = new ArrayList();         
 }                          
 public class Employee
 {                          
    public long somelong = 8598065;         
    public double Salary = 787878.344;
    public float Scale = 8.66F;
    public string Name;      
    public string  SName;                         
    public string Title;                         
    public string Position;
    public int Age;
    public DateTime Date;                         
    public string PictureUrl;
    public EmployeeAddress Address;
    public bool Married = true;
    public ArrayList SomeDataCollection;  

    public  Employee                         
    {
        Address = new EmployeeAddress();
    }                      
 }

Note that the instance of the EmployeeAddress class is the member of the Employee class.
Actually the depth of the nested classes is not limited.we create the instances of Employee(s) and initialize them.

  ArrayList MyEmployees = new ArrayList();
  Employee emp = new Employee()
  emp1.Name = "Bob";
  emp1.SName = "Smith";
  emp1.Title = "Mr";
  emp1.Position = "waiter";
  emp1.Date = new DateTime(2003, 2, 6);
  emp1.Address.City = "London";
  emp1.Address.Phone = "(043)8984 63535";
  emp1.Age = 33;
  emp1.PictureUrl = "BobSmith.jpg";

  //add employee to ArrayList
  MyEmployees.Add(emp);
  //....then create more employees and also add them to ArrayList
  MyEmployees.Add(emp1);

After that we need only to register the object (s) which we want to use on the client - in our case
it is ArrayList of Employee objects - MyEmployees.

 Convertor.RegisterObject("MyObjectKey", MyEmployees);

The number of registered objects is not limited.
After that the object MyEmployees can be accsessed on the client as Javascript class ArrayList

 var EmployeesArrList = _Get("MyObjectKey");

Get the first employee:

 var emp = EmployeesArrList.GetAt(0);
 alert(emp.SName + ", " + emp.Name + "," + emp.Title +
 "," + emp.Position + "," + emp.Address.Street);

Same with other Employees.

The employees in the collection can be modified and sent back to the server via traditional PostBack or [and] Ajax.

You can invoke the method on the server with EmployeesArrList (or another class) as parameter as well.

 var Params = new Array();
 Params.push(EmployeesArrList );
 var Ret = r.Invoke("ReadEmployeesMethod", Params);

You can create the instance of the Employee (s)  and initialize it :

  var Emp1 = new Employee ();                         
 Emp1.Name = "Peter";
 Emp1.Age = 20;

And so on ...
Add this employee to the collection

How it works

The business objects on the server are initialized and then serialized to XML format. Then this code is injected into the HTML page body and sent to the client for rendering.
The data is kept in the hidden field. The serialized data is deserilized on client into the collection of the JavaScript objects when the page is loaded.

Data Synchronization

Now we have the data from the server in the form of the JavaScript objects, like Employee object.
We can change the fields of the this classes

 emp.Position = "waiter";

The next logical step is sending the objects back to the server. This can be done in two ways PostBack and AJAX. 
The updating of the server objects only requires calling the method

 _Put("MyEmployeesArr", EmpArrList); 

before the PostBack takes place.

Another way to update the objects on the sever is sending the collection via XmlHttp
In order to do that just call

 r. Send ("some string data from client");

In this particular case the string 'some string data from client' will be sent to the server.

The objects defined on the server (and recreated on the client) like Employee can be also sent

 r.Send(emp);  

Or the collection of the objects

 r.Send(EmployeesArrList);        

wher r is Remoting (JavaScript object defined in Rwc.js)

Also the method on the server can be called
Using method Invoke (also defined in Rwc.js)

 var Ret = r.Invoke("ReadABCD", Param1); 

Where ReadABCD is the method's name on the server
Param1 is the object (any object that is defined on the server and registered)

Example of Invoke:

 var Params = new Array();
Params.push(EmployeesArrList );
var Ret = r.Invoke("ReadEmployeesMethod", Params);        

You can create (on the client) the instance of the Employee(s) and initialize it :

 var Emp1 = new Employee ();
Emp1.Name = "Peter";
Emp1.Age = 20; ..... And so on ...

Add this employee to the collection

var EmpCollection = new ArrayList();
EmpCollection.Add(Emp1);

Add other employees and send this collection to the server [PostBack/Ajax]
On the server side the objects are received as the instances of the objects which have been previously registered.

On the server side the objects sent via AJAX are received by l_DataReceivedEvent handler()

 private object l_DataReceivedEvent(object obj)
{   
    if (obj is Hashtable)// chech the type of the object sent from the client
    {
        return "Server: Update OK";
    }
    return "Return a string "; // can be returned any registered object
}         

If the standard PostBack was used, the object is received using l_PostBackDataReceivedEvent handler

private void l_PostBackDataReceivedEvent(object obj)
{
      Hashtable ht = (Hashtable)obj; // all objects on the client are packed to hashtable when PostBack is used
        ArrayList emps = (ArrayList)ht["MyEmployeesArr"];
        Convertor.RegisterObject("MyEmployeesArr", emps);    
}          

Data Types

Naturally the data types that do not have Javascript representation are absolutely useless. For instance if you have a class with the member field defined as a TimeSpan, it can not be translated to Javascript.

Supported data types

int
char
bool 
float
double
string
DateTime
ArrayList
Hashtable

The framework and ASP.NET components

The framework has nothing to do with asp.net components; it is just a generic structured data delivery mechanism. However this framework may be very useful for such components design - it can provide the structured data for the components and can be easily integrated with component framework.2>Live demo

Live demo

 Live demo is here RWC_Live

VersiVersion

 Current version is 1.0.2

Credits

For better performance the framework uses Javascript compressor by Eric Woodruff

If a new version is released, it can be downloaded from www.dotnetremoting.com along with other useful components

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)