ASP.NET Ajax exception – Two components with the same id can’t be added to the application

There’s a couple of exceptions to look out for when you start developing custom ASP.NET Ajax client controls.  They are:

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id ‘ctl00_MainContentPlaceHolder__eventsRepeater_ctl01_ke1′ can’t be added to the application.

and…

Microsoft JScript runtime error: Sys.InvalidOperationException: A control is already associated with the element.

These errors can be caused when you have a custom control/component which gets added and then re-added at some later point in time – such as when you have a partial page render.  This is being caused because the Sys.Control or Sys.Component gets registered with the Sys.Application when you call the initialize method of your component like so:

MarkItUp.Web.MyCustomControl.callBaseMethod(this, ‘initialize’) ;

Under the hood, the Sys.Application keeps a list of all the components that are registered with it – that’s how $find works.  So when you call ‘initialize’, Sys.Application looks at the list of components that it currently knows about and if yours already exists then you will likely see one of the errors listed above.

The trick is to make sure that you call dispose on your control’s base when you are finished:

dispose : function() { 

    $clearHandlers(this.get_element()) ; 

    // any other cleanup work

    MarkItUp.Web.MyCustomControl.callBaseMethod(this, ‘dispose’) ;

}