Generic Data Exchange Framework with AJAX

• Download RWC_AJAX.zip - 200 KB

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.

  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

 

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh) FirstPrevNext

Maybe I'm missing something, but is this really a problem today? Dewey 14:54 16 Mar '08   The solution I have been using to this problem has been JSON. I use C# objects on the server, and send those EXACT C# objects to the client in JSON. I can't execute the methods directly on those objects, but I generally don't need to. However, the future is even brighter. I plan to program the server AND the client in C#, and DUMP html and javascript as much as possible by using SilverLight. With SilverLight I can program in C#, and generate UI's that make the html/javascript combination look silly. It's not perfect, but it's getting there with the release of SilverLight 2.0 Beta 1. However, if you want to stick with javascript/html, there is of course Script#, which allows you to program in C# and target the browser, and it's quite robust at this point(although the source is not available). Sign In·View Thread·PermaLink Re: Maybe I'm missing something, but is this really a problem today? [modified] Alex_1 15:49 16 Mar '08   No, you are not missing anything. Dewey wrote: However, the future is even brighter. I plan to program the server AND the client in C#, and DUMP html and javascript as much as possible by using SilverLight. With SilverLight I can program in C#, and generate UI's that make the html/javascript combination look silly. It's not perfect, but it's getting there with the release of SilverLight 2.0 Beta 1. That is correct; however SilverLight's future may not be necessarily that bright. It is not standard yet. Also it does not have the controls and it is lacking the development tools. Hopefully it will have them. There is an article that may change your vision on Silverlight technology future: http://www.eweek.com/index2.php?option=content&task=view&id=46979&pop=1&hide_ads=1&page=0&hide_js=1[^]"> Microsoft failed to deliver this technology when everybody needed it most and the market was free. Also there is a chance that Silverlight will be killed by Google or Adobe and your skills will be wasted. This solution was published in 2006. At that time nobody even dreamed of .Net runtime on the browser client, though it was clear that it was a must. (see my comments about html/http programming model) I only updated the article because even now many people still like Ajax/HTML and all the rubbish associated with it. Unfortunately in the real life the solutions (the software solutions in particular) are often created and driven not by the professionals but by the marketing people. And about JSON : JSON has serious limitations (you can not have more than 1 object at a time). Much better to use XML. (XML is simply a lesser evil) modified on Monday, March 17, 2008 2:19 AM Sign In·View Thread·PermaLink Re: Maybe I'm missing something, but is this really a problem today? Dewey 23:33 16 Mar '08   Well, all I can say is this. The one thing that's 99 and 44/100 percent clear is that AJAX is a loser, and RIA's will rule the roost, and your prediction(or the talking heads) is that the HUGE community of .Net developers are going to jump to Google or Adobe? Not in this parallel dimension of reality. With SilverLight, I don't need XmlHttp, and I can send C# objects across the wire, and I have access to files in my distribution, with local isolated storage... I'm in heaven. On top of that, I can produce user interfaces that would make the best AJAX developer fold up his tent and start selling used cars. Add to that the fact that SilverLight has almost all the controls you'll need for business development(oddly the combo box and the tree control isn't there, but it is only Beta 1). You really need to look at SilverLight 2.0 Beta 1, because the development environment is much superior to any Flash development I ever seen, a true programming environment, not a development environment evolved out of a movie model. As a matter of fact, at the company I work for, we're moving towards ONLY doing things in SilverLight vs AJAX. AJAX has now become legacy, it's really obsolete, and non competitive. The choice is not to choose AJAX, it's which RIA to choose, Adobe or Microsoft. I submit that ,Net developers will make the Microsoft choice all day long, and twice on Sunday. Finally, on JSON, I can send multiple objects to the client at the same time, it's easy. I send very complex objects to the client composed of arrays of objects, and nested objects. I can send hash tables of objects that are totally different. JSON is proven, not evil, and faster over the wire than XML. However, I will send XML in the SilverLight environment because JSON isn't needed when javascript isn't the target(now javascript is sometimes evil, lol). Sign In·View Thread·PermaLink Re: Maybe I'm missing something, but is this really a problem today? Alex_1 0:11 17 Mar '08   Hi Dewey, Perhaps you are arguing with yourself. I agree that Siverlight is much superior to Flash and Ajax. I only say that Siverlight’s future might not be clear. My opinion on Ajax (and Html/Http) is at the top of article. More over, I consider Ajax a pretty silly and incompetent architecture, but the proposed framework also works with PostBacks in the same way as with Ajax. (Personally I don’t like postbacks either – I can not change that. It is a fundamental property of the internet model ) Generally the whole current internet model (html/http/browser) is totally outdated. It is a stone age. Though making a really good, modern internet architecture is not a technical problem. It is political and commercial. I value your comments. Thank you. Sign In·View Thread·PermaLink Re: Maybe I'm missing something, but is this really a problem today? Dewey 20:30 17 Mar '08   Perhaps you're right. Now that your position is clear, I think we agree pretty closely. I also understand your thoughts about SilverLight's future, and there we can both sit back and watch what happens. I'll leave you with a link to this article. Why SilverLight will change the way we build applications[^] Thank you for your thoughtful responses. Sign In·View Thread·PermaLink Another javascript library for remoting Troels Wittrup Jensen 12:55 16 Mar '08   It's called BusinessLogic.web, a bit nicer looking syntax: http://hijax.net/BusinessLogic.aspx[^] So, if you're headed down this path, Check it out! -------------------------------------------- projects: OutPost, UpFront, blog: C# Edge Sign In·View Thread·PermaLink

Last Visit: 21:00 8 Nov '09     Last Update: 21:00 8 Nov '09 1