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

Answer 1

A much better approach would be to use the ClientIDMode and set it to static. You can even set it for a specific page or globally in the web.config file. Then you never have to deal with this issue again and your JQuery is much cleaner.

Top of page:

<%@ Page Title="" ClientIDMode="Static" Language="C#" CodeBehind="..." Inherits="WebApplication1.WebForm2"  %>

On control only:

<asp:Panel runat="server"  ClientIDMode="Static"></asp:Panel>

Answer 2

You definitely don't want to hard-code the asp.net-generated ID into your CSS, because it can change if you rearrange things on your page in such a way that your control tree changes.

You're right that CSS IDs have their place, so I would ignore the suggestions to just use classes.

The various javascript hacks described here are overkill for a small problem. So is inheriting from a class and overriding the ID property. And it's certainly not helpful to suggest switching to MVC when all you want to do is refactor some CSS.

Just have separate divs and spans that you target with CSS. Don't target the ASP.NET controls directly if you want to use IDs.

  <div id="DataGridContainer">
     <asp:datagrid runat=server id="DataGrid" >
         ......
     <asp:datagrid>
  </div>

Answer 3

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 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" />