id and name attributes of HTML elements manipulated by ASP.NET

Question

I have a problem in my C# ASP.NET application, where the id and name tags are modified at runtime with a prefix "MainView_" and "MainView$" respectively. So my code:

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>

becomes:

<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>

getElementID() returns null because the name has changed. Can anyone tell me why this occurs and if there is a way to possibly disable it from changing the id and name values. Thanks!

-Sephrial

Answer 1

I think this would help you...

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
// -->
</script>

This is the part that does the trick

<%= OKToContinueCheckInButton.ClientID %>

Answer 2

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(<%=OKToContinueCheckInButton.ClientID %>).click();
// -->
</script>

Answer 3

This is a fundamental part of the way the Asp .Net Forms model work.

The IDs are changed so that you don't have to worry about keeping IDs unique across user controls, custom controls, repeaters etc.

You can use Cyril's method. I also find JQuery suits this model very well to because you can easily reference controls by their class or position in the document.

Answer 4

Write your script from the code behind. Register it as a start up script, and use the client ID of the object.

System.Text.StringBuilder script = new System.Text.StringBuilder();
script.Append("var answer = confirm('Some Warning');");
script.Append("if (answer)");

// The client ID will be what is put in the browser so it will find it.
script.AppendFormat("document.getElementById('{0}').click();", this.btnSomeButton.ClientID);

// Hook this up to the button
this.btnSomeButton.OnClientClick = script.ToString();

Answer 5

You must use the ClientID Property like this:

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(<%=OKToContinueCheckInButton.ClientID%>).click();
// -->
</script>

Answer 6

The good news is ASP.Net 4.0 will solve this issue.

http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Answer 7

Thanks for all of your responses, I think I understand why the values are replaced. However, when I attempted the solutions above, it gives an error because it produces the following HTML with a '_' instead of a '$'. I was using, document.getElementById(<%= OKToContinueCheckInButton.ClientID %>).click();

<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(MainView_OKToContinueCheckInButton).click();
// -->
</script>

Answer 8

I think you forgot the single quotes:

document.getElementById(<%= OKToContinueCheckInButton.ClientID %>).click();

Should be:

document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();

Answer 9

If you are willing to use jQuery, this is not a problem at all, and you wont have to worry about changing names. By using the $= (ends with) selector, this will be noe problem:

if (answer)
  $("a[id$='MainView_OKToContinueCheckInButton']:first").click();

jQuery selectors are very easy to work with