Dynamically created user controls

[Denise]

In ASP.Net, I am working with some in-house software that dynamically creates
a form based on rows in a database table. For example, most pages consist of
a header control, center control, and a footer control. By adding rows to
specific tables in the database, the form can be changed to add a breadcrumb
control or a calendar control.

I have discovered that for each new control that is added, ASP.Net adds a
_ctl# prefix. In javascript, when I need to reference a control, I can use
_ctl1_FirstName. Today my client side code stopped working because someone
added a calendar control to the form and now my textbox is _ctl2_FirstName.

Can anyone think of a way in Javascript to figure out what the prefix is for
a given control? Would the best approach be to loop through all the controls
to find the ones with a name I'm looking for? If so, does anyone have a
quick code sample?

It wouldn't be a problem if there were only one or two forms, but there are
many.

Thanks,
Denise

[Brock Allen]

If you declare the tag yourself use the ID="_myID". Unfortunately if this
control is nested under other controls then it's possible this ID isn't unique,
so you can also use Control.ClientID to know the proper ID to use from your
javascript.

-Brock
DevelopMentor
[url]http://staff.develop.com/ballen[/url]

> In ASP.Net, I am working with some in-house software that dynamically
> creates a form based on rows in a database table. For example, most
> pages consist of a header control, center control, and a footer
> control. By adding rows to specific tables in the database, the form
> can be changed to add a breadcrumb control or a calendar control.
>
> I have discovered that for each new control that is added, ASP.Net
> adds a _ctl# prefix. In javascript, when I need to reference a
> control, I can use _ctl1_FirstName. Today my client side code stopped
> working because someone added a calendar control to the form and now
> my textbox is _ctl2_FirstName.
>
> Can anyone think of a way in Javascript to figure out what the prefix
> is for a given control? Would the best approach be to loop through
> all the controls to find the ones with a name I'm looking for? If so,
> does anyone have a quick code sample?
>
> It wouldn't be a problem if there were only one or two forms, but
> there are many.
>
> Thanks,
> Denise

[Denise]

Thanks for your response. I don't understand how to declare the tag myself.
If I name the control _ctl9_UserName, it gets generated into
_ctl2__ctl9_UserName.

And I believe the control.clientid is on the server side. I need to be able
to find the control on the client side, withouth supposing the _ctl# prefix
that ASP.Net will generate.

Denise


"Brock Allen" wrote:

> If you declare the tag yourself use the ID="_myID". Unfortunately if this
> control is nested under other controls then it's possible this ID isn't unique,
> so you can also use Control.ClientID to know the proper ID to use from your
> javascript.
>
> -Brock
> DevelopMentor
> [url]http://staff.develop.com/ballen[/url]
>
>
>

> > In ASP.Net, I am working with some in-house software that dynamically
> > creates a form based on rows in a database table. For example, most
> > pages consist of a header control, center control, and a footer
> > control. By adding rows to specific tables in the database, the form
> > can be changed to add a breadcrumb control or a calendar control.
> >
> > I have discovered that for each new control that is added, ASP.Net
> > adds a _ctl# prefix. In javascript, when I need to reference a
> > control, I can use _ctl1_FirstName. Today my client side code stopped
> > working because someone added a calendar control to the form and now
> > my textbox is _ctl2_FirstName.
> >
> > Can anyone think of a way in Javascript to figure out what the prefix
> > is for a given control? Would the best approach be to loop through
> > all the controls to find the ones with a name I'm looking for? If so,
> > does anyone have a quick code sample?
> >
> > It wouldn't be a problem if there were only one or two forms, but
> > there are many.
> >
> > Thanks,
> > Denise

>
>
>
>

[Denise]

I don't understand what you mean by declaring the tag myself. If I name my
control _ctl9_UserName, is will be generated as _ctl2___ctl9_UserName.

And isn't the Control.ClientId on the server side? Is there any way to do
this client side?

Denise

[Brock Allen]

Yes, Control.ClientID is server side. You need to get this value on the server
and emit it into the javascript that's being sent back to the client. This
could be done as easily as a parameter to a function. Something like this
(quickly written pseudo-code, so may have syntax errors):

<script language="javascript">
function Work(element)
{
document.getElementByID(element).innerHTML = "something different";
}
</script>

<asp:Label runat=server id=_myLabel Text="something" />

<script runat=server>
void Page_Load(...)
{
_myLabel.Attributes.Add("onclick", String.Format("Work({0})", _myLabel.ClientID));
}
</script>

-Brock
DevelopMentor
[url]http://staff.develop.com/ballen[/url]

> Thanks for your response. I don't understand how to declare the tag
> myself.
> If I name the control _ctl9_UserName, it gets generated into
> _ctl2__ctl9_UserName.
> And I believe the control.clientid is on the server side. I need to
> be able to find the control on the client side, withouth supposing the
> _ctl# prefix that ASP.Net will generate.
>
> Denise
>
> "Brock Allen" wrote:
>

>> If you declare the tag yourself use the ID="_myID". Unfortunately if
>> this control is nested under other controls then it's possible this
>> ID isn't unique, so you can also use Control.ClientID to know the
>> proper ID to use from your javascript.
>>
>> -Brock
>> DevelopMentor
>> [url]http://staff.develop.com/ballen[/url]

>>> In ASP.Net, I am working with some in-house software that
>>> dynamically creates a form based on rows in a database table. For
>>> example, most pages consist of a header control, center control, and
>>> a footer control. By adding rows to specific tables in the
>>> database, the form can be changed to add a breadcrumb control or a
>>> calendar control.
>>>
>>> I have discovered that for each new control that is added, ASP.Net
>>> adds a _ctl# prefix. In javascript, when I need to reference a
>>> control, I can use _ctl1_FirstName. Today my client side code
>>> stopped working because someone added a calendar control to the form
>>> and now my textbox is _ctl2_FirstName.
>>>
>>> Can anyone think of a way in Javascript to figure out what the
>>> prefix is for a given control? Would the best approach be to loop
>>> through all the controls to find the ones with a name I'm looking
>>> for? If so, does anyone have a quick code sample?
>>>
>>> It wouldn't be a problem if there were only one or two forms, but
>>> there are many.
>>>
>>> Thanks,
>>> Denise