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.

Published Thursday, July 17, 2008 5:25 PM by bmains
Filed under:

Comments

No Comments