Question

I’ve got some (badly written) legacy code that I have to modify but I’m having an odd problem with the prefixing of the controls.

The main page has several include files, including cpct_cost.aspx.
Within that included page is a control EquipmentCost:

<INPUT id="EquipmentCost" type="text" name="EquipmentCost" runat="server" size="10" onchange="TotalCost();" class="bk">

Another page references that control in client side javascript:

function TotalCost()
{
    var a = document.CPCT_FORM.cpct_cost_EquipmentCost.value;

This is throwing a client error because when I run the code locally, the control is being named with a $ instead of an _:

<input name="cpct_cost$EquipmentCost" type="text" id="cpct_cost_EquipmentCost" size="10" onchange="TotalCost();" class="bk" />

And as a result, the client side javascript can’t find the element in question.

The legacy code on the server handles this differently – the control name there is processed as:

<input name="cpct_cost:EquipmentCost" id="cpct_cost_EquipmentCost" type="text" size="10" onchange="TotalCost();" class="bk" />

and this is being processed correctly.

I thought at first it might be a local IIS setting, so I compiled my code and deployed it to the dev server, but the behavior was identical to my local execution.

I’m using what are supposed to be the latest source files, I haven’t changed any project settings, so … is there some way I can force the code from my machine to use the : instead of $? Or … what am I missing?

The project is currently on the proposal list to be completely rearchitected, (so please, no suggestions to redesign the app 😉 ) but in the mean time, I have a short term requirement to implement some minor new functionality in this ugly old beast, and I’ve got to get it done ASAP. What’s frustrating is – I haven’t changed these parts of the code at all, but the behavior is changing anyway.

UPDATE

Apparently the naming prefix used in at least .NET 1.1 is somewhat random, because after several builds, while I was trying various ways to work around this, the controls ended up getting the right name. So now I’m just not changing the code, which sucks because I really hate taking this “freeze it while it’s randomly right” approach.

Answer 1

You could pass in a reference to the input control as a parameter to the JS function, ie:

<INPUT id="EquipmentCost" type="text" name="EquipmentCost" runat="server" size="10" onchange="TotalCost(this);" class="bk">

function TotalCost(txtEquipCost) {
var a = txtEquipCost.value;
}

Then it doesn’t matter what the id is.

EDIT:
If you have more controls, create JS variables on the page, eg:

var txtEquipCost = document.getElementById('<%= YourControl.ClientID %>');
var txtOtherCost = document.getElementById('<%= YourOtherControl.ClientID %>');

Then the onChange function call could be TotalCost(txtEquipCost, txtOtherCost)

EDIT2:
See this question about ClientId and UniqueId which may be useful:
C# asp.net Why is there a difference between ClientID and UniqueID?