AJAX Control Toolkit's ComponentReferenceAttribute and ElementReferenceAttribute
If you've done custom development using the AJAX Control Toolkit, you know that the approach the framework takes is an attribute-based approach. If you haven't looked at this before, check out this brief example (there are some other sections on the site that are helpful): http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/CreatingNewExtender.aspx. There are som explanations of the attributes that can be used here: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/ExtenderClasses.aspx.
The ComponentReference is a very useful attribute, which I didn't see in the links above. This attribute can be used on a property that holds the ID of a control. It will internally find the control reference and provide a reference to the AJAX class for that control. Let's assume the following property as an example:
public string AjaxControlID { .. }
The AjaxControlID property stores the ID of a control that emits an AJAX script. An AJAX control has both a server-side component and a client-side component. For instance, the TabContainer control has an AjaxControlToolkit.TabContainer server component and an AjaxControlToolkit.TabContainer client component. ComponentReference is a shortcut way, by using the ID, to gain reference to the client component (thie client component has a get_id getter that has the same ID as the control.
While ComponentReference gets a reference to the client component, ElementReference gets a reference to the HTML element that the client component extends. Every AJAX control and extender works with some underlying HTML element; an extender targets a different HTML element with its javascript, while a control renders its own interface, which means it extends the HTML element it renders.
So if we have a server property:
[
ExtenderControlProperty,
ClientScriptResource("extenderControl"),
ComponentProperty
]
public string ExtenderControlID
{
get { .. }
set { .. }
}
Which maps to the client class's property getter/setter defined in the prototype definition:
get_extenderControl : function()
{
return this._extenderControl;
}
set_extenderControl : function(value)
{
this._extenderControl = value;
}
The reference to the component for the extender is accessible on the client side; _extenderControl references the custom AJAX class for the extender. If the property used ElementReference, it would reference the HTML element that the extender represents.