How do I add an expando attribute to a user control?

Question

I am building in some custom javascript functionality in an existing ASP.NET usercontrol. The usercontrol needs to know about a property of the control it is nested in. So, I ended up opting for using an expando attribute rather than a global javascript variable like this:

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)

However, although the expando is output to the client properly, the usercontrol itself doesn't have a corresponding element in HTML. So, the following JavaScript that is autogenerated by ASP.NET gets an "object is null" error:

var ctl00_MainContentHolder_Payment_CreditCardInput1 = document.all ? document.all["ctl00_MainContentHolder_Payment_CreditCardInput1"] : document.getElementById("ctl00_MainContentHolder_Payment_CreditCardInput1");
ctl00_MainContentHolder_Payment_CreditCardInput1.validatorsenabled = "False";

I did a little investigating and discovered this page indicating that implementing the IWebPart interface might do it, but I tried with no luck.

Is there any way to make a usercontrol output a tag like a server control? Or is the only option converting the entire thing to a server control (which goes against the grain of the website design in this case)?

I am open to other suggestions for declaring a shared JavaScript property in a user control if anyone has any other ideas.

Answer 1

I found a better solution listed after my original one

I found a workaround.

It seems (by the lack of response and lack of results when I search for the term) that the vast majority of people are unaware of expando attributes and their usefulness. You know when you add validation controls to an ASP.NET page and you get that rather large looking block of JavaScript at the bottom of the page which sets a bunch of properties (such as enabled and errormessage)? Those are what I am referring to. They can be output to the page using the Page.ClientScript.RegisterExpandoAttribute() method - essentially they are to make your markup valid HTML, while allowing you to add additional (meaningful) properties for use with javascript. They are added and can be accessed through the HTML DOM, but they are not actually there in the HTML.

Anyway, back to my solution. I simply added 2 literal controls to the usercontrol - one at the very beginning, and one at the very end, and in codebehind I added the markup for a control element with the ID of the usercontrol (since a usercontrol doesn't output one). So the markup looks like this:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CreditCardInput.ascx.vb" Inherits="BVModules_Controls_CreditCardInput" %>
<asp:Literal ID="litControlBegin" runat="server" />

<!-- User Control Content Here -->

<asp:Literal ID="litControlEnd" runat="server" />

Then in codebehind, I did this:

Me.litControlBegin.Text = String.Format("<div id=""{0}"" class=""creditcardinput"">", Me.ClientID)
Me.litControlEnd.Text = "</div>"

Now an element will exist in the HTML that corresponds to the ID (ClientID) of the UserControl. Which essentially gives me a unique namespace to add expando attributes - and a way for other controls to easily identify these attributes and associate them with my usercontrol. The expando attribute is then added using this code:

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)

Which no longer crashes, thanks to the HTML element I added manually. It would be nice if the plumbing were there in a usercontrol to take care of this detail like it is with a server control, but this workaround is a suitable substitute.

Better solution

As always, when you have to resort to string parsing you should take a closer look whether there is a better way. This time there happened to be one - override the Render method (just like a server control would) and use the built-in methods on the HtmlTextWriter to produce the output.

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
    writer.AddAttribute(HtmlTextWriterAttribute.Id, Me.ClientID)
    writer.RenderBeginTag(HtmlTextWriterTag.Div)
    MyBase.Render(writer)
    writer.RenderEndTag()
End Sub

This is functionally equivalent to the code in my other solution - it produces a DIV tag with the ID of my usercontrol. However, it doesn't require extra code to be in Page_Load like the original did, utilizes the framework better, and doesn't require any string formatting or concatenation.

Now, this line will add an expando attribute (in javascript) directly to the usercontrol:

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)