I’ve been working with the ASP.NET AJAX Extensions a lot lately, and have been learning a few trick on how to get stuff done. One of the things I’ve learned is how to create a Generic TypeConverter for ASP.NET Ajax to use when serializing my server-side objects to JSON when passing them down to the client-side.
Introduction
When creating an ASP.NET Extender Control (using ASP.NET AJAX and the AJAX Toolkit) you can add custom properties to your Extender (using the ExtenderControlProperty attribute) that get passed down to the client. Well, this is really cool and all, but you are restricted to using the “standard” variable types (string, int, bool, etc.); unless of course you want to create your own custom TypeConverter to convert your custom objects to JSON.
How do I create and use a JSON TypeConverter?
and, do I need to create a separate one for each of my “custom” objects? First off, it’s pretty simple, and secondly, you can create “generic” TypeConverter that will work with virtually all your objects.
Step 1: Create a new Extender Control (http://ajax.asp.net/ajaxtoolkit/Walkthrough/CreatingNewExtender.aspx)
Step 2: Create out “generic” TypeConverter to use with our object. Yes, this is really all the code necessary to create the “generic” TypeConverter; all the serialization is actually done for us by the System.Web.Script.Serialization.JavaScriptSerializer object.
public class GenericTypeConverter : TypeConverter
{
public override object ConvertTo(ITypeDescriptorContext context,
System.Globalization.CultureInfo culture,
object value, Type destinationType)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
string s = jss.Serialize(value);
return s;
}
}
Step 3: Create your “custom” object that we want serialized and passed down to the client, and set the TypeConverter attribute to point to our GenericTypeConverter. In this example I’m using a Person object to keep things simple.
[TypeConverter(typeof(GenericTypeConverter))]
public class Person{
private string _FirstName;
public string FirstName
{
get { return _FirstName; }
set { _FirstName = value; }
}
private string _LastName;
public string LastName
{
get { return _LastName; }
set { _LastName = value; }
}
}
Step 4: Add our Person property to the ExtenderControl
Step 5: Add the code that deserializes our object on the client. Add the following line of code to the “initialize” method of your ExtenderControl’s behavior javascript file:
[code:c#]
if(this._myPersonValue!=null){
this._myPersonValue=Sys.Serialization.JavaScriptSerializer.deserialize(this._myPersonValue);
}
Step 6: Acces our Person object properties on the client
[code:js]
alert("The full name of my person is:\n" + this._myPersonValue.FirstName + " " + this._myPersonValue.LastName);
Conclusion
Even though this ends up being a very simple thing to do, it took me a lot of time (a few months ago) to figure out since there aren’t very many articles out there on how to do stuff with ASP.NET AJAX.
I also kept this article pretty simplistic, since I’m offering the complete solution for download and code always speaks for itself.
Download Sample Code: CustomJSONTypeConverter.zip