5

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

9 Answers 9

10

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 %>
0
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.

3

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

1
  • OMG thank god - this anti-feature breaks my mind in half with apoplexy - shame their fix is as clunky as it is, but it's a start
    – annakata
    Jan 29, 2009 at 15:31
2

I think you forgot the single quotes:

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

Should be:

document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
1
<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>
1

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();
1
  • Why would you have him do something that unmaintainable? Jan 29, 2009 at 2:22
1

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>
1

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.