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 (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 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 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.

No Comments