ClientIDMode Property in ASP.Net


When the ASP.Net page is displayed in the Browser, all the Server Controls will be Rendered as HTML Controls When the Control is rendered it will be assigned with a Unique Control ID. ClientIDMode Property is introduced in ASP.Net 4.0 Indicates how the ClientID should be generated when the Server Control is rendered in the Browser. It helps to generate the cleaner Markup code.

ClientIDMode Property - Overview



When the ASP.Net page is displayed in the Browser, all the Server Controls will be Rendered as HTML Controls. When the Control is rendered it will be assigned with a Unique Control ID. ClientIDMode Property is introduced in ASP.Net 4.0 Indicates how the ClientID should be generated when the Server Control is rendered in the Browser. It helps to generate the cleaner Markup code.

ClientIDMode Property Supports 4 modes

1. AutoIDs
2. Predictable (Default)
3. Static
4. Inherit


1. AutoIDs - Renders the output as in .Net 3.5 [Auto-Generate ct100].

<asp:Label ID="lblMessage" runat="server" Text="Label" ClientIDMode="AutoID"></asp:Label>

Label Control will be rendered as <span> tag and ClientID will be prefixed with "ct100"

<span id="ctl00_MainContent_lblMessage">This is My Page</span>


2.Predictable(Default) - Trims any "ctl00" ID string.

<asp:Label ID="lblMessage" runat="server" Text="Label" ClientIDMode="Predictable"></asp:Label>

Label Control will be rendered as <span> tag and ClientID will not be Prefixed with "ct100"

<span id="MainContent_lblMessage">This is My Page</span>


3.Static - Hands over full ID naming control to the developer.

<asp:Label ID="lblMessage" runat="server" Text="Label" ClientIDMode="Static"></asp:Label>

Label Control will be rendered as <span> tag with Label's ID.

<span id="lblMessage">This is My Page</span>


4.Inherit - Tells the control to defer to the naming behavior mode of the parent container control.

<asp:Label ID="lblMessage" runat="server" Text="Label" ClientIDMode="Inherit"></asp:Label>

Label Control will be rendered as <span> tag with Label's ID.

<span id="MainContent_lblMessage">This is My Page</span>


Setting ClientIDMode Property


ClientIDMode Property can set at 3 different Levels

1. At Control Level

<asp:Label ID="lblMessage" runat="server" Text="Label" ClientIDMode="AutoID"></asp:Label>


2. At Page Level

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" ClientIDMode="AutoID" CodeFile="ClientIDModeDemo.aspx.cs" Inherits="ClientIDModeDemo" %>


3. In Web-Config File

<pages clientIDMode="Static"/>


Comments

Guest Author: 30 Dec 2013

Thanks for good article. But i want to remove "ct100" from name field not from id field. Because of two reason. One is jquery validation and another is form post both works with name field. Please share information for how to remove "ct100" from name field.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: