Project Description
ASP.NET 4 brings some kind of control over ClientID rendering. Developers can define how exactly ClientID will be rendered but have no possibility to turn it off.

Almost all the time when developer works with Panels, Labels, HyperLinks, Images, Tables and so on, he needs only server ID to interact with control on server side but will never use its ClientID on Client Side. The problem is that this ClientID will be rendered in any case, even if nobody use it. As result - bigger HTML output size with a lot of unnecessary IDs.

This Project allows to turn off ClientID rendering for each control in any ASP.NET 2.0+ Project and reduce output Page Size a lot.
Exception is only for Controls that may cause PostBack. The reason for that - ClientID(UniqueID) is used in PostBack mechanism. Also, interactive controls have high chances to be accessed from Client Side (example: button click by JavaScript code)

Demo: http://show-demos.net/NoClientId

Output HTML example:
with ClientIDs (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>

without ClientIDs:

<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 still have ClientID. This is expected because it's a LinkButton - PostBack Control. PostBack controls should have ClientID to work properly.

Last edited Jun 8, 2011 at 12:41 PM by Lisetsky_Val, version 6