Solved

Access a Server Control in Javascript

Posted on 2006-07-05
3
7,327 Views
Last Modified: 2008-09-25
Hi
In ASP.NET 2.0, I am using a Master Page on my site
Now my webpage refers to the Master page, So I get a Content Place Holder, a "Content" Tag on my Web page and I place my Server Controls inside this Content Tag.

Say I have a TextBox called "MyTextBox", We are supposed to access it using
    document.getElementById("MyTextBox")
Now its not able to find the control, and if I look at the source generated I find that my TextBox control has been renamed to
    ctl00$ContentPlaceHolder1$MyTextBox
i.e thye ID of the Content Place Holder is appended to my Control's ID and something called ct100 as well, which is God knows what

Now How do I access the TextBox ? I don't think Microsoft wants you to go and check the Source generated in the Browser and find out what all to append to the TextBox ID for accessing it...
I have asked a similar query at ASP.NET forum but have not recieved any response...

Thx
0
Comment
Question by:arif_eqbal
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 52

Assisted Solution

by:Carl Tawn
Carl Tawn earned 250 total points
ID: 17041058
Each control has a property called "ClientID" which you may be able to factor into your javascript code.

If you need any help with getting it into your code can you post the js and tell us how you add it to the page (i.e. hardcoded into the source or added as a snippet from code-behind).
0
 
LVL 9

Accepted Solution

by:
bele04 earned 250 total points
ID: 17041190
I haven't really seen a proper documentation regarding this item yet but based on my experience ASP .NET replaces the name of the control on the client side when it generates it if the control is nested inside another server side control.  In this case your textbox is nested inside the Content server control and since your Content control is pointing to the ContentPlaceHolder control in your masterpage so what happens is the name or ID of your textbox is changed to ctl00_<id of your top level control>[_id of the second level control]_<id of the control you want>.  The one in the brackets [] is optional and this only happens if you have a control nested inside two other controls. That's a "L" in ctl by the way and the numbers that comes after it is the index of the row the item is located in case it is repeated.  The '_' is used for the id property of the control and the '$' is used for the name.  Usually you see this in controls nested inside a datagrid.

So let's take for an example in your case: ctl00$ContentPlaceHolder1$MyTextBox.  ctl00 is used since the set of items in the contentplaceholder control is repeated only once.  It's like saying its at index 0.  If you have a datagrid/gridview which repeats several items you can see ctl01, ctl02, ctl03.  ContentPlaceHolder1 is used since that's where your Content control is pointing to as seen in the ContentPlaceHolderID property of the Content control. And immediately after that is the name of your textbox since your textbox is only nested within one control.  

So if your textbox is inside a gridview or datalist like control then you might see this as its name upon generated: ctl00$ContentPlaceHolder1$GridView1$ctl01$TextBox1 or if you have a contentplaceholder within a contentplaceholder and your Content control is pointing to the inner contentplaceholder then it might look like this: ctl00$ContentPlaceHolder1$InnerContentPlaceholder$TextBox.

It's much better if you access the control through javascript on the server side using the RegisterClientScriptBlock method like this:

RegisterClientScriptBlock("executemethod", "<script language='javascript'>yourMethod(" + TextBox.ClientID + ");</script>");

So what happens there is that your calling your javascript method and passing the clientID of your textbox which you could use in your document.getElementById statement.

That was a long post...not quite sure if you got all that.  Hopefully someone can explain better! :D

0
 
LVL 19

Author Comment

by:arif_eqbal
ID: 17048063
Hi
Thanks for your posts,
I understand RegisterClientScriptBlock would give me access to the control if I pass the control / ID as argument to it
But let me say I am not very happy with the scheme of things, If I name a control X I'd like to refer it by X not by appending something to its name. What's the point in giving an ID if I can not refer it by the same ID, Microsoft could have as well generated the ID automatically passing argument in RegisterClientScriptBlock would have still worked.
And most of all, what happens to the Document Object of the HTML Page, many methods including getElementById are of no use at all now, untill and unless, of course, I pass the ID as argument, Now that's not very flexible. There might be cases where I'd like to access any control on the page say based on User's Client events.
And as for the appending ctl00 and $ and _ etc. I don't think its advisable to access using this new ID then, because your code would break if the UI guys added another container and moved the control to it.
Also, writing the whole Javascript function as string input to RegisterClientScriptBlock function, specially if its a lengthy script is something any programmer would hate, and its not very elegant as well.
I wonder what's the intention of Microsoft, what are their recommended best practices in this regard.

Anyway lets see if somebody has some other advice

0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET MVC - Views 3 61
Best book for Internet security 4 52
Difference between Highcharts and Mapbox 10 44
Delete command SQLdatasource in asp.net, vb 2 20
This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question