Can I stop .NET eating IDs?

Question

I'm an Information Architect and JavaScript developer by trade nowadays, but recently I've been getting back into back-end coding again. And, whilst trying to get an HTML prototype integrated and working with our C#-based CMS, I've come to blows with our programmers over the HTML ID attributes being arbitrarily rewritten by .NET for form elements.

I can understand the code-behind reasoning for .NET changing IDs, but the fact you can no longer use IDs when trying to develop e.g. jQuery enhanced interfaces is causing some friction. What can I do to work around this?

I've tried using the class attribute instead, but that's really crappy, not what it's meant for and doesn't get around that problem of .NET effectively changing rendered source on the fly. It also means that CSS is less useful now and less efficient to create and maintain.

Any tips or advice greatly appreciated--anything for a few less sleepless nights...

Answer 1

The short answer is no, with webforms the id can always be rewritten depending on the nesting of the element. You can get access to the id through the ClientID property, so you could set the ids into variables in a script at the end of the page/control then put them into jQuery.

something like this:

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = "<%=ImAButton.ClientId%>";
$("#"+buttonId).bind('click', function() { alert('hi); });
</script>

It's a hack I know, but it will work. (I should note for the un-initiated, I'm using the Prototype $ get by id method there)

Answer 2

One method is to override the ID's manually:

public override string UniqueID
{
  get { return this.ID; }
}
public override string ClientID
{
  get { return this.ID; }
}

Rick Strahl wrote a blog post with some more information on that approach.

Answer 3

Look at ASP.Net MVC - it addresses the over-kill object hierarchies that ASP.Net generates by default.

This site is written in MVC (I think) - look at it's structure. Were I working on a new project right now I would consider it first

If you're stuck with basic ASP.Net then be careful overriding the ClientID and UniqueID - it tends to break many web controls.

The best way I've found is to pass the unreadable ClientID out to the Javascript.

Answer 4

You can extend .net controls and make them return actual id's when related properties are called.

ClientID is the id attribute and UniqueID is the name attribute of html elements. So when you create a textbox like the following and using this instead of the textbox in framework, you make id and name attributes render as the same as the server-side id.

public class MyTextBox : TextBox
{
    public override string ClientID { get { return ID; } }
    public override string UniqueID { get { return ID; } }
}

To use this new user control, basically register this control as you would do for a custom user control (you can do is in web.config so you won't have to do it in all your pages):

<%@ Register Assembly="MyLibrary" NameSpace="MyLibrary.WebControls" TagPrefix="MyPrefix" %>

And use it like you would use a text box:

<MyPrefix:MyTextBox ID="sampleTextBox" runat="server" />