.NET Discussion

.NET Issues, Problems, Code Samples, and Fixes

ASP.NET Nested MasterPages: ID Mangling

After I implemented the ASP.NET PayPal solution for the order submission part of my site, I noticed that my color picker (which relies heavily on Javascript) wasn’t working anymore.  I did a bit of digging in my code and eventually discovered the source of the problem: ID mangling. While I was aware that ASP.NET mangled control IDs, I was not aware that each time you nest a MasterPage, you change the way the ID is mangled.

For example, my original post-mangling ID was “ctl00_cphMain_txtBackgroundColor”, and after I nested my MasterPages, the ID changed to “ctl00_ctl00_cphMain_cphMain_txtBackgroundColor”.  So, when using the document.getElementByID() function, it couldn’t locate the control, and thus threw me a yellow triangle. 

This really shouldn’t affect anyone who doesn’t include much Javascript in their code, but should be a good FYI for those who do.  I guess the silver lining is that at least the IDs are mangled predictably 🙂

kick it on DotNetKicks.com


October 19, 2007 - Posted by | ASP.NET, Javascript, MasterPages, Tips & Tricks


  1. when you generate your javascript code, you may use txtBackgroundColor.ClientID to retrieve the “mangled” ID, instead of hardcoding into js.

    Comment by devio | October 23, 2007 | Reply

  2. That’s a good point, assuming my javascript is generated server-side. I suppose I could use some magic inline code blocks to pull that ClientID. Thanks for the tip!

    Comment by Some.Net(Guy) | October 23, 2007 | Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: