Click here to Skip to main content
Click here to Skip to main content

Tagged as

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: http://clientidless.codeplex.com/[^]
 
Demo of rendering without ClientIDs: http://show-demos.net/NoClientId/[^]
 
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 http://clientidless.codeplex.com 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="http://asp.net">
        <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>
            </th>
          </tr>
        </table>
        <a id="repeater_ctl00_button" href="javascript:__doPostBack(&#39;repeater$ctl00$button&#39;,&#39;&#39;)">LinkButton</a></a>
      </div>
    </div>
</div>
 
Example of rendering when noid is set to "True":
<div class="panel">
  <div>
    <div>
      <span>Top Label</span><br />
      <a href="http://asp.net">
        <img src="/img/img.png" style="border-width:0px;" /><br />
        <table border="0">
          <tr>
            <th>
              <span>Test</span>
            </th>
          </tr>
        </table>
        <a id="repeater_ctl01_button" href="javascript:__doPostBack(&#39;repeater$ctl01$button&#39;,&#39;&#39;)">LinkButton</a>
      </a>
    </div>
  </div>
</div>
 
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 http://clientidless.codeplex.com/releases[^] )
<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.WebControl" adapterType="NoId.Adapter" />
      <adapter controlType="System.Web.UI.HtmlControls.HtmlControl" adapterType="NoId.Adapter" />
    </controlAdapters>
  </browser>
</browsers>
 
NoIdAdapter.cs (please check latest version here http://clientidless.codeplex.com/releases[^])
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))
                        attr.Remove("noid");
                }
            }
            base.BeginRender(writer);
        }
    }
}

License

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

Share

About the Author

Lisetsky Val
Team Leader EPAM
Ukraine Ukraine
No Biography provided

Comments and Discussions

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

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

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

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