There are a lot of ways how to combine these three technologies: JavaScript, Ajax and WebControls. One problem is how a control can be rendered on the client-side JavaScript and on the server-side. If you have a look at http://demo2.pctopp.com/default.aspx [1] (username and password "danny", demo is only working in Internet Explorer 5.x or higher) you can see at the right side a green box with some counting values. If you refresh the page the initial values are already there. On the server I write the initial values as a JavaScript variable to the HTML page using the Ajax.JSON.DefaultConverter:
protected override void Render(HtmlTextWriter writer) { StringBuilder sb = new StringBuilder(); Ajax.JSON.DefaultConverter(ref sb, this.value);
base.Render(writer);
writer.WriteLine("<script language=\"javascript\">"); writer.WriteLine("var " + this.ID + "_value = " + sb.ToString() + ";"); writer.WriteLine("render('" + this.ID + "');"); writer.WriteLine("</script>"); }
The control will render a small JavaScript with the JSON [2] converted object and call the method render(...) which will render the HTML code for the control or fill some tags with values. After one second it will call the Ajax.NET [3] method to get the data again and update the controls HTML code.
If you have a look at the source code of the demo page you will find following initial JavaScript object (~line 61):
var initialMyPcToppData = { [...] 'PO':{'TimeStamp':'53bb9214e1f18fb38d7b9d539a8cba','ViewID':2,'Machines':[{'TimeStamp':'1258815.880','DownDuration':0,'DownReason':'','DownStart':'','Count':null,'ToProduce':2448,'Speed':null,'IsLow':false,'IsHigh':false,'Code':'OND','Name':'Onduleuse','IsCorr':true,'Status':'O','Progress':0,'SchedSetup':0,'ActualSetup':0},{'TimeStamp':'1263492.699','DownDuration':0,'DownReason':'','DownStart':'','Count':19,'ToProduce':2200,'Speed':0,'IsLow':true,'IsHigh':false,'Code':'20','Name':'Slotter Jurine','IsCorr':false,'Status':'S','Progress':1,'SchedSetup':21,'ActualSetup':21},{'TimeStamp':'1266769.850','DownDuration':0,'DownReason':'','DownStart':'','Count':3304,'ToProduce':10700,'Speed':10000,'IsLow':false,'IsHigh':true,'Code':'30','Name':'Martin 1000','IsCorr':false,'Status':'R','Progress':31,'SchedSetup':19,'ActualSetup':19},{'TimeStamp':'1266712.480',.... }
So, we do not get the control rendered on the server, but we have a very fast initial rendered display instead of doing the first Ajax.NET call from the client.