Serialization

In developing a "rich Browser" application I minimize the Postbacks to the server and write Javascript to manipulate the state of an server side object on the browser.In this article I will describe a process whereby the state of my objects in my database table are serialized then sent to the browser where the object is modified, returned to the server and persisted back into the table using DLinq.The article also touches on using Atlas (MS Ajax) Pagemethods that are used when server interaction is required. the overall solution looks like:

The beauty of using an ORM like DLinq is that it makes this hydration and persisting process so simple.I do not have to write any SQL as the object model fits right into my architecture.Lets look at how I use this technique to persist changes to and from the match class, as shown in the above diagram this is a simple object that tracks the results of a tennis match between 2 players. The first thing that I do in the Page_Load is serialize the Match class to a memorystream and then use this to set the value of the hidden field ScoresXml. As a result the javascript in the client browser knows what the Scores looks like and changes can be made to the object. This code looks like:

protected void Page_Load(object sender, EventArgs e)
{

Match match = new Match();
XmlSerializer toXML = new XmlSerializer(typeof(Match));
MemoryStream m = new MemoryStream();
toXML.Serialize(m, match); m.Seek(0, SeekOrigin.Begin);
XmlDocument doc = new XmlDocument();
doc.Load(m); ScoresXml.Value = doc.OuterXml;

the XML in ScoresXML contains nodes that describe the scores for the match that looks like:

So the score for our match is 1-6 1-6 as player 2 did not do so well.
I am used Atlas javacript namespaces so when the page is loaded in the browser my javascript object called worker is instantiated and the equivilant to a constructor is executed . The state of my Match object will be used to populate a HTML table that contains elements like:

input id="set11" type="text" class="inputStyle1"

The ScoreNN XML nodes are used to populate the setNN HTML labels thus transferring the server state to the client, with the following code:

for (var j=0; j < 6; j++)
{

//get the first score label
var label = document.getElementById("set" + i);
//set the value to the "one" attribute
var node= root.selectSingleNode("Score" + i++);
label.value = node.text;
if (i%2 == 1)
i = i+8;
}

Then the user can change the scores as needed and the save button will persist the changes to the XML with the code in the Save method of the $InputHandler object. This is invoked through the client side click handler as follows:
<input id="save" type="button" value="Save" onclick="$InputHandler.Save()" />

The code in save is the reverse of the above code as it is setting the scoreNN nodes in the XML to the values of the setNN HTML input boxes, that code looks like:

this.Save = function()

for (var j=0; j < 6; j++)
{

var node= root.selectSingleNode("Score" + i);
//set the int node to the corresponding score label (setnn where nn = 11,12,21 ..etc
node.text = document.getElementById("set" + i++).value;
if (i%2 == 1)
i = i+8;

}
PageMethods.SaveNewMatch(root.xml, OnSaveComplete, OnRequestError);

Note the PageMethods.SaveNewMatch which will return the modified XML to the server thru an ATLAS Pagemethod. It is interesting to drill into how this works as PageMethods is a javascript method provided by ATLAS that is defined in the HTML for our page as:

var PageMethods = new function()

var cm=Sys.Net.PageMethod.createProxyMethod;
cm(this,"SaveNewMatch","XML");

}

The resultant request is intercepted by an HTTP module, named ScriptModule(Atlas supplied). Since the request is directed to a page (as opposed to a Web service)--the HTTP module registers its own handler for the PreRenderComplete event. In turn, the PreRenderComplete event code registers a render method delegate that invokes the SaveNewMatch page method via reflection.

SaveNewMatch method will deserialize the XML stream into a Match object then once we have the object I call the Insertmatch method of my DataAcess layer that will use DLinq to persist the client side changes to the database with a call to SubmitChanges.of course I could have put the SubmitChanges inline but then we would not be following good practices. SaveNewMatch looks like:

[WebMethod]
public void SaveNewMatch(string XML)
{

Match match = new Match();
XmlSerializer xs = new XmlSerializer(typeof(Match));
MemoryStream memoryStream = new MemoryStream(StringToUTF8ByteArray(XML));
XmlTextWriter xmlTextWriter = new XmlTextWriter(memoryStream, Encoding.UTF8);
match = (Match) xs.Deserialize(memoryStream);
DataAcess.InsertMatch(match);

}