Dynamically changing the ID of a control

[Dunc]

I've got a c# app, and in the HTML in front I have a <divtag around
some navigation controls, and I want to dynamically change it's ID so
the CSS kicks in and highlights the currently selected option.

Problem is - when you set an ID, it prefixes it with ctl0_ on IIS 5.1
(Windows XP - our dev machines) and ctl00_ on IIS 6.0 (Windows 2003
server - the production machine)

The obvious answer is to create two versions of style stylesheet - one
for dev, one for production. The problem with this is trying to
explain to management why we'd need to modify the CSS outside of
source control every time we deploy it; in short, it's just not going
to happen.

Does anyone know how to override the .net prefix (ctl..), so I can set
the ID of an element with a consistent value?

Code is:

---/ snip /---

<div id="myDiv" runat="server">
<ul>
<li><a href="default.aspx">Home</a></li>
<li><a href="Item1.aspx">Item 1</a></li>
</ul>
</div>

---/ snip /---

string scriptName =
Request.ServerVariables["SCRIPT_NAME"].ToLower(); // get current
script name
string newID = scriptName.SubString(0, scriptname.IndexOf(".")); //
remove extension - home or item1

myDiv.ID = newID; // sets it to ctl0_home or ctl00_home, ctl0_item1 or
ctl00_item1

TIA

[Ignacio Machin \( .NET/ C# MVP \)]

Hi,

"Dunc" <du**********@gmail.comwrote in message
news:11**********************@n59g2000hsh.googlegr oups.com...

I've got a c# app, and in the HTML in front I have a <divtag around
some navigation controls, and I want to dynamically change it's ID so
the CSS kicks in and highlights the currently selected option.

I'm not sure what the control's ID has to do with the CSS being used. The
Css of a controls is set using CssClass, not ID

Problem is - when you set an ID, it prefixes it with ctl0_ on IIS 5.1
(Windows XP - our dev machines) and ctl00_ on IIS 6.0 (Windows 2003
server - the production machine)

The obvious answer is to create two versions of style stylesheet - one
for dev, one for production. The problem with this is trying to
explain to management why we'd need to modify the CSS outside of
source control every time we deploy it; in short, it's just not going
to happen.

That is not a good solution , what happen if after an upgrade (of either the
framework or IIS ) the controls are named differentely?

[Dunc]

You're right - it's not a great idea, but it's the only one I can
think of. The reason I need an ID tag as opposed to just setting a
CssClass is the element also needs to be referenced by some
JavaScript.

Thanks for the feedback, though - got any other thoughts?

Dunc

---/ snip /---

On Mar 21, 2:46 pm, "Ignacio Machin \( .NET/ C# MVP \)" <machin TA
laceupsolutions.comwrote:

Hi,

"Dunc" <[e-mail] in message

news:11**********************@n59g2000hsh.googlegr oups.com...

I've got a c# app, and in the HTML in front I have a <divtag around
some navigation controls, and I want to dynamically change it's ID so
the CSS kicks in and highlights the currently selected option.

I'm not sure what the control's ID has to do with the CSS being used. The
Css of a controls is set using CssClass, not ID

Problem is - when you set an ID, it prefixes it with ctl0_ on IIS 5.1
(Windows XP - our dev machines) and ctl00_ on IIS 6.0 (Windows 2003
server - the production machine)
The obvious answer is to create two versions of style stylesheet - one
for dev, one for production. The problem with this is trying to
explain to management why we'd need to modify the CSS outside of
source control every time we deploy it; in short, it's just not going
to happen.

That is not a good solution , what happen if after an upgrade (of either the
framework or IIS ) the controls are named differentely?

[=?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=]

Instead of monkeying around with trying to change the control's mangled id,
why not just change the css class attribute? You can do this server side, or
you can even do it client side via javascript.
Peter
--
Site: http://www.eggheadcafe.com
UnBlog: http://petesbloggerama.blogspot.com
Short urls & more: http://ittyurl.net


"Dunc" wrote:

I've got a c# app, and in the HTML in front I have a <divtag around
some navigation controls, and I want to dynamically change it's ID so
the CSS kicks in and highlights the currently selected option.

Problem is - when you set an ID, it prefixes it with ctl0_ on IIS 5.1
(Windows XP - our dev machines) and ctl00_ on IIS 6.0 (Windows 2003
server - the production machine)

The obvious answer is to create two versions of style stylesheet - one
for dev, one for production. The problem with this is trying to
explain to management why we'd need to modify the CSS outside of
source control every time we deploy it; in short, it's just not going
to happen.

Does anyone know how to override the .net prefix (ctl..), so I can set
the ID of an element with a consistent value?

Code is:

---/ snip /---

<div id="myDiv" runat="server">
<ul>
<li><a href="default.aspx">Home</a></li>
<li><a href="Item1.aspx">Item 1</a></li>
</ul>
</div>

---/ snip /---

string scriptName =
Request.ServerVariables["SCRIPT_NAME"].ToLower(); // get current
script name
string newID = scriptName.SubString(0, scriptname.IndexOf(".")); //
remove extension - home or item1

myDiv.ID = newID; // sets it to ctl0_home or ctl00_home, ctl0_item1 or
ctl00_item1

TIA

[Ignacio Machin \( .NET/ C# MVP \)]

Hi,

"Dunc" <du**********@gmail.comwrote in message
news:11**********************@n76g2000hsh.googlegr oups.com...

You're right - it's not a great idea, but it's the only one I can
think of. The reason I need an ID tag as opposed to just setting a
CssClass is the element also needs to be referenced by some
JavaScript.

But that is different, it's not the same knowing in the client the ID of a
given control than wanting it to change dynamically.

You can use a variable to hold the assigned clientID of the control, y ou
could do something like:

Controls.Add( new LiteralControl( "<scriptvar myControl = '" +
yourControl.ClientID + "'; </script>:" );

now in the client you can reference it like:

<script>
function DoIt()
{
var control = document.getElementByID( myControl);
control.class = "theCSSClass";
}
</script>