The problem with using WebParts with UrlRewriting (or UrlMapping) is the WebPart PersonalizationProvider uses the path of the page being rendered to save/load the personalization state, not the path that was rewritten that the user sees. So, to fix this you just need to create a custom PersonalizationProvider and override all the methods that reference path, and call the base methods but pass in the path that was requested instead of the path being rendered.

Here's a SqlPersonalizationProvider I wrote that does this:

Another implementation (possibly a better one) would be to create a custom WebPartManager and change the path that is sent to the PersonalizationProvider, but the way shown above was simplier for me to implement and it works.

As a followup to the "Create AJAX Server Controls using the ScriptControl base class" post I wrote a couple weeks ago, I've decided to write on how to create ASP.NET AJAX Extender Controls using the ExtenderControl base class in ASP.NET 3.5. There is already an article titled "Adding ASP.NET AJAX Client Behaviors to Web Server Controls" in MSDN, but it doesn't show all the code involved in creating Extender Controls, especially the JavaScript code.

What is an Extender Control?

First what exactly is an Extender Control? An Extender Control is basically a non-visual control that adds some sort of AJAX behavior to another control within the page. The majority of the controls within the AjaxControlToolkit are built as Extender Controls. It is a common misconception that you can only create Extender Controls by using the base classes within the AjaxControlToolkit, but in fact ASP.NET 3.5 contains the required ExtenderControl base class to create Extender Controls.

The base class I'm referring to in this article is the System.Web.UI.ExtenderControl base class located within the System.Web.Extensions.dll assembly.

According to MSDN the ExtenderControl class is:

The ExtenderControl class enables you to programmatically add AJAX functionality to an ASP.NET server control. The ExtenderControl inherits from the Control class and implements the IExtenderControl interface. The Control class defines the properties, methods, and events that are shared by all ASP.NET server controls. The IExtenderControl interface is an abstract class, which you cannot instantiate directly. Instead, you create a derived type.

Basics of created Extender Controls that Inherit from ExtenderControl

When first creating your custom extender control you need to inherit from the ExtenderControl base class. The first thing you'll see is the ExtenderControl requires you to implement to methods: GetScriptDescriptors and GetScriptReferences. The GetScriptDescriptors method is used to get an IEnumerable collection of ScriptDescriptor objects that basically define any of the controls client-side AJAX properties. The GetScriptReferences method is used to get an IEnumerable collection of ECMAScript (JavaScript) files that will be loaded on the client-side once the page loads; this is used to basically define any client-side scripts the control will require to run on the client.

You may have noticed the TargetControlType attribute applied to the FocusExtender control; this attribute is required, and is used to define the type of control that the extender explicitly works with. In the case of this example, I'm setting it to work with any thing that inherits from the Control class, which is all server controls.

Define ScriptReferences

In the GetScriptReferences method, return an IEnumerable collection of the ScriptReference objects to include in the page on the client-side.

Here's a basic example of setting up a ScriptReference that includes a script resource that is embedded within the assembly that FocusExtender is contained in:

When inheriting from ExtenderControl you'll always have at least one ScriptReference, because you need to reference the script that creates the client-side JavaScript representation of your extender control.

Define ScriptDescriptors

In the GetScriptDescriptors method, return an IEnumerable collection of ScriptDescriptor objects that define what properties will be passed down to the client-side JavaScript representation of your control.

The only ScriptDescriptor you need to return in the IEnumerable collection is a  ScriptBehaviorDescriptor instance that contains all the descriptors for your extender control.

Here's a basic example of returning a ScriptBehaviorDescriptor without any properties being defined:

What ECMAScript (JavaScript) code is needed?

There is a basic block of JavaScript code that you'll need to include that will define the client-side JavaScript representation of your control. This basic block of code is the same base code that you'll start with when creating all extender controls.

Here's the basic JavaScript that will define the client-side JavaScript representation of the ForucExtender control we're using in this example. One thing to remember is that the namespaces and object name in the JavaScript file need to be the same as they are in the server-side .NET code. In case you're wonderin, there is a way to make the client-side and server-side namespaces different, but that's beyond the scope of this article.

Type.registerNamespace("CustomExtenderControl");

CustomExtenderControl.FocusExtender = function(element) {
    CustomExtenderControl.FocusExtender.initializeBase(this, [element]);
};

CustomExtenderControl.FocusExtender.prototype = {
    initialize:function(){
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "initialize");
    },
    dispose:function(){
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "dispose");
    }
};

CustomExtenderControl.FocusExtender.registerClass("CustomExtenderControl.FocusExtender", Sys.UI.Behavior);

Sys.Application.notifyScriptLoaded();

Also, in order for the ExtenderControl to correctly load the "CustomExtenderControl.FocusExtender.js" script reference that we're using in this example, we must not forget to define the assemblies embedded resource as a Web Resource, like so:

Let's Add a Little "Rich" AJAX Functionality to the Extender Control

Now that we have a basic ExtenderControl created, we can start adding out "rich" AJAX functionality that we will use to extend our target server control in the page.

In this article, I'm going to keep things extemely simple, and we're going to do the following:

1. Pass HighlightCssClass and NoHighlightCssClass properties down to the client, that will determin the CSS class's used to highlight out server control (in this article a TextBox).

Add the HighlightCssClass and NoHighlightCssClass Properties

Add the ScriptDescriptor for the HighlightCssClass and NoHighlightCssClass Properties

Just modify the GetScriptDescriptor method above to look like the following:

Add the Client-Side Name Property that will receive the value

To do this we need to add a "private" like variable for each CSS property and property accessor methods for each to our JavaScript.

Here's the above JavaScript file with the "private" variables and property accessors added for the CSS properties:

Type.registerNamespace("CustomExtenderControl");

CustomExtenderControl.FocusExtender = function(element) {
    CustomExtenderControl.FocusExtender.initializeBase(this, [element]);
    this._HighlightCssClass = null;
    this._NoHighlightCssClass = null;
};

CustomExtenderControl.FocusExtender.prototype = {
    initialize:function(){
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "initialize");
    },
    dispose:function(){
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "dispose");
    },
   
    get_HighlightCssClass:function() {
        return this._HighlightCssClass;
    },
    set_HighlightCssClass:function(v) {
        this._HighlightCssClass = v;
    },
    get_NoHighlightCssClass:function() {
        return this._NoHighlightCssClass;
    },
    set_NoHighlightCssClass:function(v) {
        this._NoHighlightCssClass = v;
    }
};

CustomExtenderControl.FocusExtender.registerClass("CustomExtenderControl.FocusExtender", Sys.UI.Behavior);

Sys.Application.notifyScriptLoaded();

Set the TargetControls CSS according to the Focus

In this example we're going to attach event handlers to the TargetControl's focus and blur events that will change the controls CSS.

Here's the above JavaScript code with the event handlers added:

Type.registerNamespace("CustomExtenderControl");
CustomExtenderControl.FocusExtender = function(element) {
    CustomExtenderControl.FocusExtender.initializeBase(this, [element]);
    this._HighlightCssClass = null;
    this._NoHighlightCssClass = null;
   
    this._focusHandler = Function.createDelegate(this, this._onFocus);
    this._blurHandler = Function.createDelegate(this, this._onBlur);
};
CustomExtenderControl.FocusExtender.prototype = {
    initialize:function(){
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "initialize");
       
        var targetElement = this.get_element();
       
        $addHandler(targetElement, "focus", this._focusHandler);
        $addHandler(targetElement, "blur", this._blurHandler);       
    },
    dispose:function(){
        var targetElement = this.get_element();
       
        $removeHandler(targetElement, "focus", this._focusHandler);   
        $removeHandler(targetElement, "blur", this._blurHandler);
   
        CustomExtenderControl.FocusExtender.callBaseMethod(this, "dispose");
    },
   
    get_HighlightCssClass:function() {
        return this._HighlightCssClass;
    },
    set_HighlightCssClass:function(v) {
        this._HighlightCssClass = v;
    },
    get_NoHighlightCssClass:function() {
        return this._NoHighlightCssClass;
    },
    set_NoHighlightCssClass:function(v) {
        this._NoHighlightCssClass = v;
    },
   
    //Event Handler Methods
    _onFocus:function(eventArgs) {
        var targetElement = this.get_element();
        if (targetElement != null)
        {
            targetElement.className = this.get_HighlightCssClass();
        }
    },
    _onBlur:function(eventArgs) {
        var targetElement = this.get_element();
        if (targetElement != null)
        {
            targetElement.className = this.get_NoHighlightCssClass();
        }
    }
};
CustomExtenderControl.FocusExtender.registerClass("CustomExtenderControl.FocusExtender", Sys.UI.Behavior);
Sys.Application.notifyScriptLoaded();

Tips and Tricks

Tip #1: Simplify Creating ExtenderControls using a custom ExtenderControlBase class

One trick that I've learned, that proves useful when creating custom Extender Controls, is to create your own base class that inherits from ExtenderControl and extends it to use some custom attributes to make adding ScriptReferences and ScriptDescriptors easier. This is the same trick that I learned from creating ScriptControls.

Here's what the final server-side code for the FocusExtender object would look like when using custom attributes and our very own ExtenderControl base class to add ScriptReferences and ScriptDescriptors:

As you can see, the new code for the FocusExtender using this ExtenderControlBase class with custom attributes is much cleaner and easier to read.

Here's the complete code for the ExtenderControlBase, ScriptReferenceAttribute and ExtenderControlPropertyAttribute objects:

Tip #2: Access ExtenderControl via JavaScript

Another trick that I figured out allows you to be able to reference the custom extender control from within JavaScript. The issue this solves is the fact that the ExtenderControl base class doesn't send the control ID down to the client, so there is no way to get a reference to it for manipulation via JavaScript.

To do this all we need to do is add a property named "id" to the ScriptBehaviorDescriptor within the GetScriptDescriptor method. Here's an example of doing this:

Now with the following FocusExtender control in the page:

We can access it from JavaScript like so:

It's kind of strange that the ExtenderControl base class doesn't automatically link it up to be able to access it from within JavaScript, but at least it's pretty simple to add.

Conclusion

As you can see it's fairly simple to get started creating your own custom extender controls that inherit from the ExtenderControl base class, especially if you use the above ExtenderControlBase class along with it's ExtenderControlPropertyAttribute and ScriptReferenceAttribute attributes. It's also very simple to enable the ability to access the ExtenderControl from within JavaScript to enable much richer AJAX functionality to be built.

Download Full Source Code: CreateAJAXExtenderControlUsingExtenderControlBaseClass.zip (21.36 kb)

A couple months ago I blogged about the fact that using Virtual Earth and ASP.NET AJAX together on the same page caused errors in Safari. There is good new to report back, the latest update to Virtual Earth has fixed this issue. In fact Virtual Earth v6.1 actually includes much better Safari support that previous versions; it actually works correctly in Safari. I found this to be especially helpful since I can now support Safari with my Web.Maps.VE product.

What's the catch? I can't work perfectly now can it. Well, as far as I can tell Virtual Earth works great. However, the code example in my post calling attention to the error actually still has a little bug in it. The bug is the calendar that is automatically shown on hover over by the AjaxControlToolkit CalendarExtender get hidden by the Map below the textbox. This is actually caused by a layering issue related to the z-index of the elements on the page. An easy way to fix this is to just set the z-index of the VEMap's DIV element to a lower value so all other elements on the page will be rendered over the top of it.

Here's the full example code showing example what I mean above:

I've been doing a lot with ASP.NET AJAX for almost 2 years now, including my Web.Maps.VE product. So, I've decided to spread some of my knowledge in this area by writing up some articles on things that I've learned and figured out.

As a note, since .NET 3.5 is the "latest and greatest" version of the framework out at the time of this writing, this article targets .NET 3.5. This article also assumes you have a basic understanding of ASP.NET AJAX and JavaScript.

What is ScriptControl?

First, what exactly is ScriptControl? Well, the base class I'm referring to is the System.Web.UI.ScriptControl base class located within the System.Web.Extensions.dll assembly.

The ScriptControl is basically the first building block you want to use to start building out a WebControl (server control) that will have some kind of rich AJAX functionality in the browser. You may have heard of ASP.NET AJAX Control Extenders, especially if you're familiar with the AJAX Control Toolkit, so why would we use ScriptControl instead of creating an ExtenderControl in order to give a control some rich AJAX functionality within the browser? Well, you want to create an ExtenderControl to extend or enhance an existing control with some rich AJAX functionality, and you want to inherit from the ScriptControl class when you are creating a full control that will have some rich AJAX functionality.

According to MSDN the ScriptControl class is:

ScriptControl inherits from the WebControl class and implements the IScriptControl interface. The WebControl class is a base class for ASP.NET Web server controls. The ScriptControl is an abstract class, which you cannot instantiate directly. Instead, you derive a class based on this abstract class.

The ScriptControl base class tests the page for a ScriptManager control during the PreRender stage of the derived control. The ScriptControl base class also makes sure that the derived control calls methods of the ScriptManager control to register script during the Render event. This includes registering ScriptDescriptor objects for the ScriptControl when the Render method is called. The Render method makes sure that ScriptDescriptor objects are not rendered unless the ScriptControl itself is rendered. This enables a ScriptControl to work inside a closed WebPart control.

You can add as many descriptors and types as necessary to any class that you derive from ScriptControl.

Basics of Creating Server Controls that Inherit from ScriptControl

When first creating your custom server control you inherit from ScriptControl instead of WebControl like usual. The first thing you'll see is ScriptControl requires you to implement two methods: GetScriptDescriptors and GetScriptReferences. The GetScriptDescriptors method is used to get an enumeration of ScriptDescriptor objects that basically define any of the controls client-side AJAX properties. The GetScriptReferences method is used to get an enumeration of ECMAScript (JavaScript) files that will be loaded on the client-side once the page loads; this is used to basically define any client-side scripts the control will require to run on the client.

Here's a basic stub of a control that inherits from ScriptControl:

Define ScriptReferences

In the GetScriptReferences method, return an enumeration of the ScriptReference objects to include in the page on the client-side.

Here's a basic example of setting up a ScriptReference that includes a script resource that is embedded within the assembly the CustomScriptControl is contained in:

When inheriting from ScriptControl you'll generally always have at least one ScriptReference because you need to reference the script that creates the client-side JavaScript representation of your control.

Define ScriptDescriptors

In the GetScriptDescriptors method, return an enumeration of ScriptDescriptor objects that define what properties will be passed down to the client-side JavaScript representation of your control.

The only ScriptDescriptor you need to return in the enumeration is a ScriptControlDescriptor instance that contains all the descriptors for your control.

Here's a basic example of returning a ScriptControlDescriptor without any properties being defined:

What ECMAScript (JavaScript) code is needed?

There is a basic block of JavaScript code that you'll need to include in the ScriptReference that's being defined by the GetScriptReferences method that will define the client-side JavaScript representation of your control. This basic block of code that you include in this script file is the same for all ScriptControls that you'll create.

Here's the basic JavaScript that will define the client-side JavaScript representation of the CustomScriptControl we're using in this example. One thing to remember is that the namespaces and object name in the JavaScript file need to be the same as they are in the server-side .NET code.

Type.registerNamespace("CustomScriptControl");
CustomScriptControl.CustomScriptControl = function(element) {
    CustomScriptControl.CustomScriptControl.initializeBase(this, [element]);
};
CustomScriptControl.CustomScriptControl.prototype = {
    initialize:function() {
        CustomScriptControl.CustomScriptControl.callBaseMethod(this, "initialize");
    },
    dispose:function() {
        CustomScriptControl.CustomScriptControl.callBaseMethod(this, "dispose");
    }
};
CustomScriptControl.CustomScriptControl.registerClass("CustomScriptControl.CustomScriptControl", Sys.UI.Control);
if(typeof(Sys)!=="undefined")Sys.Application.notifyScriptLoaded();

Also, in order for the ScriptControl to correctly load the "CustomScriptControl.CustomScriptControl.js" script reference that we're using in this example, we must not forget to define the assemblies embedded resource as a Web Resource, like so:

Let's Add a Little "Rich" AJAX Functionality to the Control

Now that we have a basic ScriptControl created, we can start to add out "rich" AJAX functionality to it.

In this article, I'm going to keep things extremely simple, and we're going to do the following:

1. Pass a Name (type string) property to the client by defining it as a ScriptDescriptor, and displaying it to the user via a JavaScript Alert dialog.

Add the Name Property to the Control

Add the ScriptDescriptor for the Name Property

Just modify the GetScriptDescriptors method above to look like the following:

Add the Client-Side Name Property that will receive the value

To do this we need to add a "private" like variable to hold the value and property accessor methods to our JavaScript file.

Here's the above JavaScript file with the "private" variable and property accessors added for the Name property:

Type.registerNamespace("CustomScriptControl");
CustomScriptControl.CustomScriptControl = function(element) {
    CustomScriptControl.CustomScriptControl.initializeBase(this, [element]);
    // "private" variable to hold the Name properties value
    this._name = null;
};
CustomScriptControl.CustomScriptControl.prototype = {
    initialize:function() {
        CustomScriptControl.CustomScriptControl.callBaseMethod(this, "initialize");
    },
    dispose:function() {
        CustomScriptControl.CustomScriptControl.callBaseMethod(this, "dispose");
    },
    // Name Property Accessors
    get_Name:function() {
        return this._name;
    },
    set_Name:function(value) {
        this._name = value;
    }   
};
CustomScriptControl.CustomScriptControl.registerClass("CustomScriptControl.CustomScriptControl", Sys.UI.Control);
if(typeof(Sys)!=="undefined")Sys.Application.notifyScriptLoaded();

Display the Name to the User

In this example we're going to display the Name property to the user using a JavaScript Alert within the objects client-side initialize property.

Here's the initialize method modified to include the Alert:

initialize:function() {
    CustomScriptControl.CustomScriptControl.callBaseMethod(this, "initialize");

    // Display Name property to user
    alert(this.get_Name());

},

Tips and Tricks

One trick that I've learned that proves useful when creating custom ScriptControls, is to create your own base class that inherits from ScriptControl and extends it to use some custom attributes to make adding ScriptReferences and ScriptDescriptors easier.

Here's what the final server-side code of the CustomScriptControl object would look like when using custom attributes to add the ScriptReferences and ScriptDescriptors:

As you can see, the new code for the CustomScriptControl using this base class with custom attributes is much cleaner and easier to read.

Here's the complete code for the ScriptControlBase, ScriptReferenceAttribute and ScriptControlPropertyAttribute objects:

Conclusion

As you can see it's fairly simple to get started creating your own custom server controls that inherit from ScriptControl, especially if you use the above ScriptControlBase class along with its ScriptControlPropertyAttribute and ScriptReferenceAttribute attributes.

Download Full Source Code: CreateAJAXServerControlUsingScriptControlBaseClass.zip (33.31 kb)

Update 5/31/2008: I recently posted an article titled "Create AJAX Extender Controls using the ExtenderControl base class" on how to create Extender Controls in ASP.NET using the System.Web.UI.ExtenderControl base class.

I've been using ASP.NET AJAX alot for a while now, so I thought I'd share some of the Tips and Tricks that I've learned though my adventures. Lately, all the buzz has been around Silverlight, but I know there are still a lot of devs out there that can benefit from these tips and tricks.

UpdatePanel Tips

Use UpdateMode=Conditional

By setting the UpdatePanel's UpdateMode property to Conditional, it will only update its contents when one of its triggers occurs or a control within the UpdatePanel itself raises a Postback.

To do this just do the following:

{code:html}

<asp:UpdatePanel runat="server" ID="UpdatePanel_List" UpdateMode="Conditional">

{/code}

Programmatically Tell the ScriptManager to handle a specific controls postbacks asynchronously

Programmatically telling the ScriptManager to raise a Postbacks Asynchronously can be usefull in some scenarios; such as when you may want to optionally enable ajax for certain things on the page.

To do this you just use the ScriptManagers RegisterAsyncPostBackControl method and pass it the reference to the control you want to make asynchronous.

Here's an example page that does this:

Default.aspx

{code:html}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UpdatePanel_01_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
        <asp:Button runat="server" ID="btnShowTime" Text="Show Time" OnClick="btnShowTime_Click" />
        <br />
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
            <ContentTemplate>
                <asp:Label runat="server" ID="lblTime"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
  
    </div>
    </form>
</body>
</html>

{/code}

Default.aspx.cs

WebMethods and PageMethods

Using WebMethods

By attaching the ScriptService and ScriptMethod attributes to your WebServices you can enable them to be accessed from within your pages via JavaScript.

Here's a sample WebService with the ScriptService and ScriptMethod attributes attached:

{code:c#}

[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WSTime : System.Web.Services.WebService
{
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string GetServerTime()
    {
        return DateTime.Now.ToLongTimeString();
    }

}

{/code}

Then to access the WebService from within JavaScript you need to first tell the ScriptManager about the WebService by giving it a ServiceReference. This can be done declaratively within the page, like so:

{code:html}

<asp:ScriptManager runat="server" ID="ScriptManager1">
    <Services>
        <asp:ServiceReference Path="~/WebMethods/WSTime.asmx" />
    </Services>
</asp:ScriptManager>

{/code}

Now to acess the WebServices methods you just use the namespace that ASP.NET Ajax creates in the page for the WebService and access its methods like normal JavaScript methods. The namespace that is created is the same name as the WebService, in this case it's WSTime. The whole Ajaxiness of calling the server and getting the results back are handled for you, and all you have to worry about is processing the results. Remember, WebMethods can only be called Asynchronously.

Here's an example of using the WSTime.GetServerTime WebService method from within JavaScript:

{code:js}

function btnGetServerTime_Click()
{
    // call the WebMethod and pass it the method
    // to call once it gets the response from
    // the server.
    WSTime.GetServerTime(SucceededCallback);
}
function SucceededCallback(result, eventArgs)
{
    alert(result);
}

{/code}

Using PageMethods

PageMethods are accessed in the same fashion as WebMethods, except they do not require the creation of a WebService. PageMethods are actually WebMethods that are added to the page itself. Once thing to note is there is No way to embed PageMethods within Custom User Controls or Server Controls, they must be added to the Page; hence the name PageMethods.

Here's the C# code of an example page with a PageMethod defined:

{code:c#}

public partial class PageMethods_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    public static string GetServerTime()
    {
        return DateTime.Now.ToLongTimeString();
    }
}

{/code}

To enable the PageMethods you must first set the ScriptManagers EnablePageMethods property to True.

{code:html}

<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true"></asp:ScriptManager>

{/code}

Then you can call the PageMethods in the same way as WebMethods, except the namespace you use to access the methods is named PageMethods.

Here's the example code of calling the above PageMethod from JavaScript:

{code:js}

function btnGetServerTime_Click()
{
    PageMethods.GetServerTime(SucceededCallback);
}
function SucceededCallback(result, eventArgs)
{
    alert(result);
}

{/code}

Conclusion

I hope these couple of tips help in your endeavors with ASP.NET AJAX. When I get time (in between all the other million things) maybe I'll post some more tips.

Also, if you have your own tips, please post them in the comments.

In ASP.NET AJAX Extensions v1.0 for ASP.NET 2.0 there is the JavaScriptSerializer class that provides JSON serialization and deserialization functionality. However, in .NET 3.5 the JavaScriptSerializer has been marked obsolete. The new object to use for JSON serialization in .NET 3.5 is the DataContractJsonSerliaizer object. I'm still new to the DataContractJsonSerializer, but here's a summary of what I've learned so far...

Object to Serialize

Here's a simple Person object with First Name and Last Name properties.

Now in order to serialize our object to JSON using the DataContractJsonSerializer we must either mark it with the Serializable attribute or the DataContract attribute. If we mark the class with the DataContract attribute, then we must mark each property we want serialized with the DataMember attribute.

Serialization Code

Jere's the most basic code to serialize our object to JSON:

Our resulting JSON looks like this:

As you can see the first serialization with the class marked with the Serializable attribute isn't quite what we were expecting, but is still JSON. This serialization actually isn't compatible with the client-side JSON Serializer in ASP.NET AJAX.

As you can see the second serialization with the class marked with the DataContract attribute is exactly what we were expecting, and is the same JSON that the old JavaScriptSerializer object would have generated. This is the method of JSON serialization using the DataContractJsonSerializer that you'll need to do if you are going to pass the resulting JSON down to the client to be consumed with ASP.NET AJAX.

Deserialization Code

Here's the most basic code to deserialize our object from JSON:

Controlling the property names in the resulting JSON

When using the DataContract and DataMember attributes, you can tell the DataMember attribute the specific name you want that property to have within the JSON serialization by setting its "Name" named parameter.

Here's an example that will give the name of "First" to the "FirstName" property within the JSON serialization:

The resulting JSON looks like this:

Here's the code for some Helper methods using Generics to do all the dirty work for you

What Assembly References does my application need for this?

From the namespace that contains DataContractJsonSerializer you can probably tell that you need to add a reference to the System.Runtime.Serialization assembly. However, you also need to add a reference to the System.ServiceModel.Web assembly.

Update 5/17/2008: This issue has since been fixed with the release of the Virtual Earth v6.1 release. There is still a small issue related to the CalendarExtender and Virtual Earth that only occurs in Safari. You can read more about it here.

I do alot of development with ASP.NET AJAX and Virtual Earth, and each of them work fine by themselves in Safari 3 on Windows. However, if you use them both on the same page, it will cause ASP.NET AJAX to break and stop working in Safari.

This issue comes up when you include the Virtual Earth API JavaScript file in the page. You don't even need to create an instance of VE on the page to cause the issue to occur.

I don't have a Mac, so keep in mind that I haven't tested this in Safari on the Mac. I've only verified this issue in Safari 3 on Windows.

Below is a code example using the CalendarExtender in the Ajax Control Toolkit to demonstrate the issue. If you run the following code, you will notice that when you click on the textbox in Safari, the calendar never pops up, and the JavaScript console will register a couple exceptions in the ASP.NET AJAX Extensions JavaScript code.

This is a real issue for me, since I can not add Safari support to my Web.Maps.VE product because of this issue. I know it's probably an issue with Safari, since everything works perfect in IE and Firefox, but I hope it gets fixed soon.

Loading alot of pushpins on the map can slow down your page in two ways: 1) Page load times can be slowed down, and 2) loading pushpins via ajax can be slow. To improve the performance (as in download and database query times) of loading pushpins on the map, you can load the Pushpin Shapes Title and Description on the fly. This allows you to only load the Pushpins Title and Description as it's needed, thus reducing the amount of data you need to send down to the client when initially loading your pushpins.

Dynamically Load InfoBox Title and Description using ASP.NET AJAX

Step 1: When adding Pushpins to the map, use the following format when setting thier Titles: "LOAD:{0}". Replace the "{0}" with a unique ID representing that Pushpin.

Step 2: Create the GetInfoBoxData Page Method in the page that we'll call using Ajax. Also create a simple InfoBoxData class in the page; we'll use this class to more easily pass both the Title and Description down to the client.

Step 3: Add the ViewManager class to the site's App_Code folder. This class will be used within the GetInfoBoxData Page Method to render the Description from a UserControl Template. This class was written by Scott Guthrie in his post titled "Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios", and it works perfect in this scenario.