ID vs UniqueID vs ClientID vs UniqueClientID vs StaticClientID?

Okay, I’m pretty confused about the IDs of dynamically created controls.

Public Class TestClass
    Inherits Panel
    Implements INamingContainer

    Function TestClassInit() Handles Me.Init

        Dim pnlMainPanel As New Panel
        Me.Controls.Add(pnlMainPanel)

        Dim pnlTest1 As New Panel
        pnlMainPanel.Controls.Add(pnlTest1)

        pnlTest1.ClientIDMode = UI.ClientIDMode.Inherit ' DEFAULT
        'pnlTest1.ID = "ctl01"
        'pnlTest1.UniqueID = "ctl00$MainPanel$ctl01"
        'pnlTest1.ClientID = "MainPanel_ctl01"
        'pnlTest1.UniqueClientID = "ctl00_MainPanel_ctl01"
        'pnlTest1.StaticClientID = ""

        pnlTest1.ClientIDMode = UI.ClientIDMode.Predictable
        'pnlTest1.ClientID = "MainPanel_ctl01" (no change)

        pnlTest1.ClientIDMode = UI.ClientIDMode.AutoID
        'pnlTest1.ClientID = "ctl00_MainPanel_ctl01"

        pnlTest1.ClientIDMode = UI.ClientIDMode.Static
        'pnlTest1.ClientID = ""

    End Function
End Class

Why the 5 different IDs??

When should you use the different ID modes?

(I read the MSDN docs, but they were, as usual, not particularly illuminating.)

If I don’t care what the ID is, and just want to add a control & give its ID to a dynamically added AJAX extender, which mode/ID combo should I use?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

• The ID is the serverside ID that you use in your code.
• The UniqueId corresponds to the “name” attribute of the generated HTML element.
• The ClientID corresponds to the “id” attribute of the generated html element. So it depends which attribute you need (name is sent with form post, id is used for DOM manipulation).
• Not sure what the uniqueclientid is 🙂

ASP.Net 4 adds clientIdMode which allows you to force the id attribute to match the serverside id (and thus be more predictable) if you set it to “static”.

Method 2

Use the ClientID property.

ClientIDMode is there to support the ability to 100% set the actual ID used by the control..or not. Your choice. Basically it aids in writing javascript code.

Method 3

The ClientIDMode was added to ASP.NET 4 to allow control if you want it. It is particularly useful for client side libraries such as jQuery. ASP.NET’s magic hinges on the uniqueness of controls. If you decided to use Static make sure they are unique, as you may face some unexpected runtime errors down the road.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0