Adding Client-Side Custom Properties To Controls

One of the benefits of writing an ASP.NET book is that it forces me to spend a lot of time spelunking deep in the bowels of ASP.NET uncovering all sorts of little gems I never noticed the first time around.

Many of these little morsels should end up in the book, but I thought I would blog about a few of them as I go along. 

This is all part of the weird situation I find myself in while writing this book. I thought I would just sit down and all the words would flow. Instead, no matter how motivated I am, everytime I sit down to write I spend two hours procrastinating for every one hour of writing.  What gives!?

In any case, one of the gems I discovered is the ClientScriptManager.RegisterExpandoAttribute method.  This method allows you to add custom properties to a control.  These properties are not rendered in the HTML as attributes, but simply attached to the control in the DOM via javascript.

This is nice for control authors who want to make a custom control client scriptable, but still maintain XHTML compliance, since XHTML compliance doesn’t allow arbitrary attributes for tags.

The following is a really simple example.  I present here a custom control that inherits from Label.

public class ExpandoControl : Label
{
    //Code to be filled in.
}

The AddAttributesToRender method is the appropriate place to call RegisterExpandoAttribute.

protected override 
    void AddAttributesToRender(HtmlTextWriter writer)
{
    Page.ClientScript.RegisterExpandoAttribute(this.ClientID
                , "contenteditable", "true");
    base.AddAttributesToRender(writer);
}

Now we can access the contenteditable property of this control via client script. The following javascript demonstrates.

var expando = document.getElementById('expando');
alert('Content editable: ' + expando.contenteditable);

This is a good approach to take to develop a client-side api for your custom controls.

What others have said

Requesting Gravatar... Simone Busoli Nov 27, 2006 3:07 AM
# re: Adding Client-Side Custom Properties To Controls
That's interesting Phil, thanks for the pointer.
Requesting Gravatar... Dave Frank Nov 27, 2006 12:23 PM
# re: Adding Client-Side Custom Properties To Controls
You're using AddAttributesToRender but yet you say "properties are not rendered in the HTML as attributes"

So I'm confused what the difference is between this and regular attributes -

Wouldn't you still be able to use this code on the client-side:

var expando = document.getElementById('expando');
alert('Content editable: ' + expando.contenteditable);

if you added the attribute with

expando.Attributes.Add("contenteditable","true")

(expando is your label label)

?

Requesting Gravatar... Haacked Nov 27, 2006 12:55 PM
# re: Adding Client-Side Custom Properties To Controls
Yes, but my point is that for cases in which XHTML compliance is important, I don't want to add arbitrary attributes to the rendered markup. Instead, I add them to the element's representation in the DOM.
Requesting Gravatar... Simone Busoli Nov 27, 2006 2:33 PM
# re: Adding Client-Side Custom Properties To Controls
Dave, Phil used the AddAttibutesToRender method for coincidence, he could have used any event handler from the page init to the pre render phase.
The real deal is in the RegisterExpandoAttribute method.
Requesting Gravatar... Haacked Nov 27, 2006 2:38 PM
# re: Adding Client-Side Custom Properties To Controls
That's right. It just seemed like AddAttributesToRender is the appropriate time to call that method.

Especially given that in most examples on the web, developers check the RenderUplevel boolean value first, and if false, render these attributes to the HTML instead of calling RegisterExpandoAttribute.

I neglected doing that in my example for brevity.
Requesting Gravatar... Dave Frank Nov 27, 2006 2:45 PM
# re: Adding Client-Side Custom Properties To Controls
Cool, and I found a further clarification for anyone else who is dense like me :)

http://aspadvice.com/blogs/joteke/archive/2006/08/26/Remember-expando-attributes-with-custom-controls.aspx
Requesting Gravatar... Thomas S. Trias Dec 21, 2006 12:51 PM
# re: Adding Client-Side Custom Properties To Controls
The only unfortunate drawback I have found with RegisterExpandoAttribute is that it is limited to string content that gets enclosed by double quotes by the RenderExpandoAttribute routine; I would prefer the ability to be able to render either completely "un-sanitized" JavaScript or a JSON serialization as the value of the expando attribute.

In the example above, this would let you set the attribute "contenteditable" to an actual Boolean value instead of a string. It may not mean much for a small number of controls or a small amount of JavaScript logic, but for larger data sets and complex logic appropriate typing makes a world of difference performance-wise.

-Tom
Requesting Gravatar... Zalak Shah Jun 16, 2008 8:17 AM
# re: Adding Client-Side Custom Properties To Controls
Hi

i have done the same but i m not getting the properties with the java script after first post back. i am getting same properties perfectly at server side...

can any one have a solution for that .. i m seek of this..


thanks
Requesting Gravatar... Naomi Jul 31, 2008 3:38 PM
# re: Adding Client-Side Custom Properties To Controls
I found your article. I'm trying to add a new custom attribute to the dropdownlist (to each option) in the UserControl.

How should I call ClientScriptManager then from the UserControl?

Requesting Gravatar... rüya tabiri Sep 05, 2008 9:38 PM
# re: Adding Client-Side Custom Properties To Controls
Thank you
Requesting Gravatar... parke Sep 05, 2008 9:40 PM
# re: Adding Client-Side Custom Properties To Controls
Thanksssss
Requesting Gravatar... rüya tabirleri Sep 05, 2008 9:41 PM
# re: Adding Client-Side Custom Properties To Controls
Dave, Phil used the AddAttibutesToRender method for coincidence, he could have used any event handler from the page init to the pre render phase.

What do you have to say?

(will show your gravatar)
Please add 7 and 7 and type the answer here: