You know, I think the most difficult part of this blog post was coming up with a descriptive title for it - it just needs more words to be explained. The story goes like this: While working on a JavaScript-heavy web application, I found myself wanting to share a set of variables between my server side C# code and the client-side JavaScript code. I wanted to be able to set a value in the JavaScript code running in the clients browser, and then later retrieve that same value on the server in the code behind of the page upon the next postback - and vice versa. It might sound a bit tricky (or maybe not?), but it proved to be quite simple - in fact, its perfect for some Friday afternoon blogging indulgence, before we get started on dinner :)
Aim First...
Whenever I decide to create a component, the first thing I do is think about how I want to use it. I find writing some mock code the perfect way to settle on an interface for the component, before even writing a line of code for it (TDD, anyone?). This way, I'm sure I'm actually making what I need, and not what I think I might need. So, let's look at some code that mimics what we want to accomplish with our component.
What I'd like to do, is to be able to drop it onto a Web Form and access it both from my JavaScript and my code behind. So, something like this:
<idc:ClientDictionary
ID="_myDictionary"
runat="server" />
Having declared that in my markup, I want to be able to do this from the client-side JavaScript:
$find('_myDictionary').setValue("key", "value");
And then, when the form is submitted, I want to be able to retrieve that value from the server-side C#:
string value = _myDictionary.Values["key"];
...and Fire at Will
Okay, so hopefully you've got an idea of what I'm up to. Basically, what I want is a hidden input field - but one that can store more than one value. Instantly, I'm thinking Asp.Net Ajax - or more precisely, a Control Extender. I could write one that targets the HiddenField control, transporting my dictionary between the client and server by serializing it into the hidden input field. But while that would take care of the client-side part, I need to extend the HiddenField serverside aswell. To do that, I'll write a new component that wraps the HiddenField and the said extender control into a composite control, ready to be dropped onto a form and just work.
Without any further ado, lets look at the source code I came up with for this control:
public class ClientDictionary : CompositeControl
{
private Dictionary<string,string> _values;
/// <summary>
/// The name of the dictionary, used for accessing the dictionary on the client using $find([name]).
/// </summary>
public string Name
{
get
{
EnsureChildControls();
return _hiddenFieldExtender.BehaviorID; // we map the name to the behavior ID of the hidden field extender
}
set
{
EnsureChildControls();
_hiddenFieldExtender.BehaviorID = value;
}
}
public override bool EnableViewState
{
get
{
// this control does not need view state
return false;
}
set
{
throw new InvalidOperationException();
}
}
/// <summary>
/// Gets or sets the values stored in the dictionary
/// </summary>
public Dictionary<string, string> Values
{
get { return _values; }
protected set { _values = value; }
}
protected override void OnInit(EventArgs e)
{
EnsureChildControls();
// the hidden field contains our javascript dictionary, which we'll want to deserialize into a C# dictionary
string serializedDictionary = this.Page.Request.Form[_field.UniqueID];
if (!String.IsNullOrEmpty(serializedDictionary))
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
this.Values = serializer.Deserialize<Dictionary<string, string>>(serializedDictionary);
}
else
{
// no client-side dictionary was present, so create a new blank one
this.Values = new Dictionary<string, string>();
}
base.OnInit(e);
}
private HiddenField _field;
private ClientDictionaryExtender _hiddenFieldExtender;
protected override void CreateChildControls()
{
_field = new HiddenField(); // we use the hidden field to transport our data between the server and client parts
_field.ID = "fl";
this.Controls.Add(_field);
// the extender makes sure a client-side behavior component representing the dictionary is available
this._hiddenFieldExtender = new ClientDictionaryExtender();
this._hiddenFieldExtender.BehaviorID = this.Name;
this._hiddenFieldExtender.ID = "xt";
this._hiddenFieldExtender.TargetControlID = _field.ID;
this.Controls.Add(this._hiddenFieldExtender);
}
protected override void OnPreRender(EventArgs e)
{
// its time to save the server-side dictionary into the hidden field, which will transport it to the client side component
JavaScriptSerializer serializer = new JavaScriptSerializer();
_field.Value = serializer.Serialize(this.Values);
base.OnPreRender(e);
}
}
The comments should make the above code pretty much self-explanatory, so lets just keep rolling and dive right into the javascript code:
Type.registerNamespace('Iridescence.Web.UI');
Iridescence.Web.UI.ClientDictionaryBehavior = function(element)
{
Iridescence.Web.UI.ClientDictionaryBehavior.initializeBase(this, [element]);
this._dictionary = null;
this._onSubmitDelegate = null;
}
Iridescence.Web.UI.ClientDictionaryBehavior.prototype =
{
initialize : function()
{
Iridescence.Web.UI.ClientDictionaryBehavior.callBaseMethod(this, 'initialize');
this._onSubmitDelegate = Function.createDelegate(this, this._onSubmit);
$addHandler(window, "submit", this._onSubmitDelegate);
this._deserialize();
},
getValue : function(name)
{
var value = this._dictionary[name];
return value;
},
setValue : function(name, value)
{
this._dictionary[name] = value;
},
_onSubmit : function()
{
// serialize the dictionary to the hidden field
this.get_element().value = Sys.Serialization.JavaScriptSerializer.serialize(this._dictionary);
},
_deserialize : function()
{
// deserialize the dictionary from hidden field
this._dictionary = Sys.Serialization.JavaScriptSerializer.deserialize(this.get_element().value);
},
clear : function()
{
this._dictionary = null;
this._dictionary = new Object();
},
dispose : function()
{
Iridescence.Web.UI.ClientDictionaryBehavior.callBaseMethod(this, 'dispose');
}
}
Iridescence.Web.UI.ClientDictionaryBehavior.registerClass('Iridescence.Web.UI.ClientDictionaryBehavior', AjaxControlToolkit.BehaviorBase);
The only thing left to define is the ClientDictionaryExtender, which is dead simple:
[ClientScriptResource("Iridescence.Web.UI.ClientDictionaryBehavior", "Iridescence.Web.UI.ClientDictionaryBehavior.js")]
[TargetControlType(typeof(HiddenField))]
internal class ClientDictionaryExtender : ExtenderControlBase
{}
There's no server-side functionality in the extender, its job is just to hook up the JavaScript component to the hidden field. I've made it internal as well, as it makes little sense to use it without the plumbing being handled by the ClientDictionary control.
And that is all there is to it! Dropping the ClientDictionary component onto a form, I can now set and get values from its dictionary both from the client-side JavaScript and the server-side codebehind, and it will be synchronized both ways.
I've created a demo project which you can download here, which includes the working source code and a small Asp.Net application that demos the basic functionality. Enjoy!
