Skip to content
February 11, 2008 / kiranpatils

Name Mangling with MasterPages and javaScript+ASP.NET

from last few days we are working with Master Page and Java script and as the all Javascript do it gets the control by ID using “document.getElementByID(<ID OF CONTROL>).value”..That’s it.it looks simple but frankly speaking it has wasted our so much time…..Looks funny na???so let me tell you why??

defn [Name Mangling wikipedia]: In software compiler engineering, name mangling (more properly called name decoration, although this term is less commonly used) is a technique used to solve various problems caused by the need to resolve unique names for programming entities in many modern programming languages.

Problem:

you can do it simply by document.getElementByID..but you will get stuck when your control lies under Master Page…if you keep the same function which you have used for simple page[without Master page] IE Will say “Object required”. Because in your simple page the ID of control will be same…and if you add Master Page than id will be something like ctl00_ContentPlaceHolder1_txtName.. let’s see it by example

Suppose you have one control in simple ASP.NET Page and has ID txtName.

Now if you put it in MasterPage which has ContentPlaceHolder and had ID= ContentPlaceHolder1.

so now your ID= ctl00_ContentPlaceHolder1_txtName So the pattern for generating name i like :

ctl00_<ContainerID>_<CONTROL ID> for example ID = ctl00_ContentPlaceHolder1_txtName

Hope you are clear now.. so how you will find you control by this ID????

Solution:

in old Javascript you will refer control like:

document.getElementById(“txtName”).value

and Now you have to do:

document.getElementById(“<%= txtName.ClientID %>”).value

That’s it.

Looks cool na??

Hope you have enjoyed this article.

Happy Java scripting.

Kiran Patil

UPDATED 19-2-2008 VER 1.1

I have tried this with my page which has .js file located under different folder and i have linked it with page using tag.

But it was not working because Visual studio doesn’t Parse this  file and ClientID will not work.

So, Conclusion is that  you can’t use ClientID with different .js file

12 Comments

Leave a Comment
  1. Gordon / Feb 11 2008 7:22 pm

    Does it generate:

    or

    Just wondering because the “name” is critical for the standard HTTP Submit (get/post) but the “id” is important when doing a getElementById(id) lookup in javascript.

    This relates to the issue that Internet Explorer doesn’t implement the document.getElementById(id) method properly, and may return the wrong element (esp. if the field is an array of checkboxes)

    Bug 152

  2. Eric / Mar 11 2008 5:56 pm

    It would be nice if there was a way to turn the name mangling off. I don’t like it littering my HTML pages with extra bytes for the prefixed control names.

  3. Tijo Chacko / Apr 25 2008 11:18 am

    Thanks Bro

    The solution was excellent and spotted on.

  4. Dj / Oct 18 2008 5:17 am

    Nice work man

  5. Subramanian / Dec 13 2008 7:46 am

    Thanks for this articles..it is very valuable help..

    document.getElementById(””).value

  6. ElEdu / Jan 15 2009 7:36 pm

    Gracias Amigo estaba estancado con el javascript Nice Job!!!!

  7. Heel / Feb 9 2009 9:35 pm

    Very good site! I like it! Thanks!

  8. Will / Feb 10 2009 5:59 pm

    I have had a couple of goes at trying to get java script working with master pages. I thought I had tried the syntax above but obviously not!

    Well done and thanks. There is quite a lot of confusion out there with this issue.

    I just thought I would share with you this really clear and easy java script validation site I found….

    http://www.livevalidation.com/examples

  9. Kyong Sumbera / Apr 27 2009 5:15 pm

    Great articles & Nice a site.

  10. Доля / May 22 2009 7:21 am

    Я с большим интересом прочитала её….

  11. Jeff Parkingson / Nov 28 2010 8:14 pm

    I will subcribe to your rss, nice post.

  12. Arpan Shah / Jan 10 2012 12:31 pm

    Your help is really help full for me.
    Thank you So much.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: