Click here to Skip to main content
12,897,381 members (54,186 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 8 Jun 2011

Disable ClientID for any control on ASP.NET Page

, 13 Jun 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Disable ClientID for any control on ASP.NET Page
"ASP.NET without ClientID's" Project:[^]

Demo of rendering without ClientIDs:[^]

ASP.NET 4 introduced new property for controls - ClientIDMode.
So developers (starting from ASP.NET 4) can control how ClientID attribute will be rendered.

Probably the main thing that was missed from view - in a lot of cases, developers don't use ClientID at all on Client Side!
All these Labels, Panels, HyperLinks and so on - we need their IDs only on server side to interact with them. It's really a rare situation when we access some label by id on client side.

Technically, only controls that may cause PostBack always need ClientID. For all other controls, it should be optional - but it's not. Currently ASP.NET renders ID for every control that has client side representation. As a result - each page has more heavy HTML output because of unused ClientIDs.

So here is the trick now to turn off/remove ClientIDs:
The only thing we need is to have control over each control render. ControlAdapter is a good choice for this.

  • Visit my project and download sources.

  • In your project, add ASP.NET specific folder "App_Browsers". (Right click on Web Project -> Add -> Add ASP.NET Folder -> App_Browsers)

  • From downloaded sources, place NoIdAdapter.browser into App_Browsers folder and include it to project. Place NoIdAdapter.cs somewhere in your project and include it too.

That's it!
Now you can add attribute noid="True" to any control in a page and this control will have no id attribute on client side.
The usage is very simple, just check.

IMPORTANT: Controls that may do PostBacks (controls that implement interfaces IPostBackDataHandler and IPostBackEventHandler) will ignore noid attribute. This is expected because ClientID is very important for PostBack controls.

Example of rendering with IDs (Standard ASP.NET output):
<div id="repeater_ctl00_mainPanel" class="panel">
  <div id="repeater_ctl00_childPanel">
    <div id="repeater_ctl00_oneMorePanel">
      <span id="repeater_ctl00_someLabel">Top Label</span><br />
        <a id="repeater_ctl00_hyperLink" href="">
        <img id="repeater_ctl00_someImage" src="/img/img.png" style="border-width:0px;" /><br />
        <table id="repeater_ctl00_table" border="0">
          <tr id="repeater_ctl00_headerRow">
            <th id="repeater_ctl00_headerCell">
              <span id="repeater_ctl00_label">Test</span>
        <a id="repeater_ctl00_button" href="javascript:__doPostBack(&#39;repeater$ctl00$button&#39;,&#39;&#39;)">LinkButton</a></a>

Example of rendering when noid is set to "True":
<div class="panel">
      <span>Top Label</span><br />
      <a href="">
        <img src="/img/img.png" style="border-width:0px;" /><br />
        <table border="0">
        <a id="repeater_ctl01_button" href="javascript:__doPostBack(&#39;repeater$ctl01$button&#39;,&#39;&#39;)">LinkButton</a>

As you can see, repeater_ctl01_button element still has ClientID. This is expected because it's a LinkButton - PostBack Control.

Source code:
NoIdAdapter.browser (please check latest version here[^] )
  <browser refID="Default">
      <adapter controlType="System.Web.UI.WebControls.WebControl" adapterType="NoId.Adapter" />
      <adapter controlType="System.Web.UI.HtmlControls.HtmlControl" adapterType="NoId.Adapter" />

NoIdAdapter.cs (please check latest version here[^])
using System.Web.UI;
using System.Web.UI.Adapters;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
namespace NoId
    public class Adapter : ControlAdapter
        protected override void BeginRender(HtmlTextWriter writer)
            if (Control is Table || !(Control is IPostBackDataHandler || Control is IPostBackEventHandler))
                AttributeCollection attr = null;
                if (Control is WebControl)
                    attr = ((WebControl)Control).Attributes;
                else if (Control is HtmlControl)
                    attr = ((HtmlControl)Control).Attributes;
                if (attr != null)
                    string noId = attr["noid"];
                    if (noId == "true" || noId == "True")
                        Control.ID = null;
                    if (!string.IsNullOrEmpty(noId))


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Lisetsky Val
Team Leader EPAM
Ukraine Ukraine
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralRe: I've added bug for this issue with Calendar to Microsoft Con... Pin
Lisetsky Val1-Feb-12 0:59
memberLisetsky Val1-Feb-12 0:59 
GeneralRe: Thanks for binging up problem with Adapters and ASP.NET Cale... Pin
Lisetsky Val25-Jan-12 22:37
memberLisetsky Val25-Jan-12 22:37 
GeneralRe: [Quote]Summary for myself - never ever use this buggy contro... Pin
Stefnux25-Jan-12 10:13
memberStefnux25-Jan-12 10:13 
GeneralRe: This is forces me to dig this more. Actually, congratulation... Pin
Lisetsky Val24-Jan-12 23:29
memberLisetsky Val24-Jan-12 23:29 
GeneralRe: Well, I saw your code and that looks normal to me. Strange ... Pin
Stefnux24-Jan-12 1:08
memberStefnux24-Jan-12 1:08 
GeneralGreat solution for older projects! Unfortunatly, this doesn'... Pin
Stefnux23-Jan-12 22:34
memberStefnux23-Jan-12 22:34 
GeneralRe: Calendar is IPostBackEventHandler. We cannot remove ID attri... Pin
Lisetsky Val23-Jan-12 23:21
memberLisetsky Val23-Jan-12 23:21 
GeneralTank u so much. Pin
nasercs14-Jun-11 19:14
membernasercs14-Jun-11 19:14 
GeneralReason for my vote of 5 Neat idea, elegant implementation. Pin
AspDotNetDev13-Jun-11 20:03
protectorAspDotNetDev13-Jun-11 20:03 
GeneralNeat idea! I have one request. Can you post the code (for th... Pin
AspDotNetDev13-Jun-11 8:02
protectorAspDotNetDev13-Jun-11 8:02 
GeneralRe: Ok. Pin
Lisetsky Val13-Jun-11 19:42
memberLisetsky Val13-Jun-11 19:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170424.1 | Last Updated 14 Jun 2011
Article Copyright 2011 by Lisetsky Val
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid