What is the correct setting of ClientIDMode in ASP.Net 4 to get ASP.Net 2.0 rendering.

Question

We have just updated our application from ASP.Net 2.0 to ASP.Net 4.0.

We have included in the web.config in the <system.web> element:

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" />

My understanding is that this is supposed to render the controls the same as .Net 2.0/3.5 would.

However... it's not... here is one example

This is rendered in 2.0:

<input id="grdUserEntity__ctl1_chkSelectAll" type="checkbox"
   name="grdUserEntity:_ctl1:chkSelectAll" onclick="javascript:iSelectAll();" />

This is in 4.0:

<input id="grdUserEntity_ctl01_chkSelectAll" type="checkbox" 
   name="grdUserEntity$ctl01$chkSelectAll" onclick="javascript:iSelectAll();" />

The difference:

2.0 id=grdUserEntity__ctl1_chkSelectAll
4.0 id=grdUserEntity_ctl01_chkSelectAll

According to what I read that config setting will cause ASP.Net 4.0 to render the server controls and client id's identically to the previous version.

What are we doing wrong?

Answer 1

There was a change to how IDs were rendered from ASP.NET 2.0 to ASP.NET 3.5. Since you're going from 2.0 to 4.0, you're still seeing that difference. The change was due to XHTML compliance improvements.

You can try switching back to the 2.0 rendering with the xhtmlCompliance compat setting. Yet another compat setting, yes :) It should work, but honestly, I'm not sure how well tested that old compat setting is in 4.0, and I know it wouldn't be compatible with the UpdatePanel, if you were planning on using that.

Is there a reason why you want to keep the 2.0 rendering? Just fear of regressions, or do you have any known actual regressions?

XHTML setting: http://msdn.microsoft.com/en-us/library/ms178159.aspx

Answer 2

For future readers of this post, you can mitigate compatibility issues by using the <%=objectid.ClientId %> construct in your ASP.NET page.

Example: Suppose you textbox called txtInput (that ASP.NET renders as id=ctl00_cphMainContent_txtInput) that you need to reference in some client-side javascript code. You could reference that object with the following javascript code in your ASP.NET page:

str txtInputObjNm = "<%=txtInput.ClientId %>";

At runtime, it will be automatically translated into the following client-side javascript:

str txtInputObjNm = "ctl00_cphMainContent_txtInput";

If .NET "decides" to change the way the clientid is assigned, your code will still work.

Answer 3

In a 4.0 application pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" will completely mess up styling in the Site.master page. For example, menus will be almost invisible in the designer and will completely lose their styling in the browser. Basically, styling will be lost in the designer.

I found this by setting the target framework from 4.0 to 3.5 and back to 4.0. After this, the styling was convoluted. After comparing all the files to a good app, I finally found this line in web.config. I removed it, and my styling problems disappeared.