Automatic Control Prefixes like _ctl0

[DFB]

I have created a custom control which contains an asp:dropdown inside it and
embedded my custom control in my web page.

I am accessing this dropdown via javascript.

The Problem: when this asp:dropdown control was embedded directly in my
webpage ... my javascript call to reference this dropdown worked (javascript
referenced call "document.all.idCategories").

BUT NOW ... because I have embedded this asp:dropdown id=idCategories within
my user control, the compiler has prepended it with a prefix id of _ctl0_, so
my javascript references to it no longer work.

HOW do I switch off this prepended prefix of _ctl0_ ... I did it before many
years ago .. but can't remember.

:|

Thank you in advance, frustruated!

 

[Mythran]

I have created a custom control which contains an asp:dropdown inside it
and
embedded my custom control in my web page.

I am accessing this dropdown via javascript.

The Problem: when this asp:dropdown control was embedded directly in my
webpage ... my javascript call to reference this dropdown worked
(javascript
referenced call "document.all.idCategories").

BUT NOW ... because I have embedded this asp:dropdown id=idCategories
within
my user control, the compiler has prepended it with a prefix id of _ctl0_,
so
my javascript references to it no longer work.

HOW do I switch off this prepended prefix of _ctl0_ ... I did it before
many
years ago .. but can't remember.

:|

Thank you in advance, frustruated!

When you output the control name for use in javascript, use
Control.ClientID. This will output the actual ID set for the client for use
in client-side operations (such as script).

Mythran

 

[DFB]

Thank you - but I don't understand -> where am I supposed to use
Control.clientID?

 

[Mythran]

Instead of hard-coding the control's id into the javascript, you can specify
the control's id as a parameter to the function(s) you are calling. Then,
in your webcontrol, you can output the id that is set on the webcontrol by
registering a client-side script that calls the function(s) you are calling
using the following code:

in the html:

<script language='javascript' type='text/javascript'>
function DoSomething(ElementId)
{
var element = document.getElementById(ElementId);
// element is now referencing the element by the id.
}
</script>

in the webcontrol you are building:

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
MyBase.OnPreRender(e)

Dim script As String = _
"<script language=javascript type=text/javascript>" & vbNewLine & _
" DoSomething('" & Me.ClientID & "');" & vbNewLine & _
"</script>"
Page.RegisterStartupScript( _
"ThisControlClientScriptKey", _
script _
)
End Sub

This is assuming that you are using VB.Net (easy to convert to C#), and you
want to call a function when the page is finished loading. If you want to,
instead, do something when your control is clicked, then replace OnPreRender
with the following:

Protected Overrides Sub AddAttributesToRender( _
ByVal writer As HtmlTextWriter _
)
MyBase.AddAttributesToRender(writer)
Dim script As String = _
"<script language=javascript type=text/javascript>" & vbNewLine & _
" DoSomething('" & Me.ClientID & "');" & vbNewLine & _
"</script>"
writer.AddAttribute(HtmlTextWriterAttribute.Onclick, script)
End Sub


Please note, this is untested code and is meant to give you an IDEA of how
to do something similar to what you are asking.

HTH,
Mythran

 

[DFB]

Thank you Mythran .. one mistake I made .. it is not a custom control .. it
is a user control that I have implemented .. and essentially it is very
simple. It has a asp:dropdown control within it ... and scattered about I
have references to this dropdown in my javascripts.

user control code:

<td align="left"><aspropDownList
style="color:#48570F;FONT-SIZE:11px;FONT-FAMILY:Tahoma" Runat="server"
ID="ICategories" Width="221"
Height="10"
onchange="HandlePhotoCategorySelect();"></aspropDownList></td>


Result: the ICategories resulting id is _ctl0I_Categories.
How can I control what the asp:dropdownlist outputs as the id?