RSS

Rendering of HTML controls in ASP.NET Framework 4

04 Feb

Recently I noticed that ASP.NET Checkboxes were rendering slightly differently since moving to Framework 4.  With pervious frameworks the Checkbox and the text was grayed out when the control was disabled but in Framework 4 only the checkbox was grayed out.

Investigating this further we found that in previous frameworks, when the HTML is rendered a Span tag is created surrounding the individual controls e.g. checkbox and label in our case, and the Disabled attribute is set to ‘disabled’ which encompasses all child controls.

However with Framework 4 the Span did not have a Disabled attibute but rather a CSS class named aspNetDisabled was being applied instead e.g.

<span id=”id1″ class=”aspNetDisabled”>…</span>

With Framework 4 when a control is disabled a default CSS is now applied to the control called ‘aspNetDisabled’ which can render controls slightly different to previous versions of the framework.

However there are a number of ways to override this:

Solution 1

Like I mentioned earlier the aspNetDisabled property is only the default and so can be overridden with your own custom CSS class.

To do this Open the Global.asax file and define your new custom CSS class for the control in question within the Application_start function e.g.

Application_Start within the Global.asax file

Solution 2

aspNetDisabled is just a CSS class like any other and so we can extend it, although this could potentially effect all web controls rather than selected types like in the example above

Extending to aspNetDisabled to make associated control text Gray

Solution 3

In Framework 4 the WebControl.SupportsDisabledAttribute is being returned as False and the default aspNetDisabled class is being applied which as I found out renders disabled checkboxes slightly differently.  If the SupportsDisabledAttribute is True, ASP.NET will use the ‘Disabled’ attribute rather than the Class (aspNetDisabled)

According to Microsoft, if you upgraded your Web Project to ASP.NET 4 Visual Studio will set an Attibute called ‘controlRenderingCompatibilityVersion’ in the Web.Config to an earlier version of the framework.  This will override the rendering algorithms within .Net 4 with the ones from the version you specify.  I have not yet tried this approach but its worth taking into consideration

Hope this helps

Advertisements
 
5 Comments

Posted by on February 4, 2011 in ASP.NET, HTML

 

5 responses to “Rendering of HTML controls in ASP.NET Framework 4

  1. Basavaraj

    May 9, 2011 at 5:16 am

    Thanks, John Langley..

     
  2. mcohen

    November 30, 2011 at 9:43 pm

    John
    I it is not working for me. I don’t understand why. I created CSS rule:

    .aspNetDisabled
    {
    color: Gray;
    font-style: normal;
    text-decoration: none;
    }

    My web.config reads:

    Any ideas? (by the way, Microsoft has made hair pulling changes since moving to 4.0 and very little, and I mean, very little documentation on any of them).

     
    • westcountrydeveloper

      December 1, 2011 at 9:20 am

      Yeah we had the same hair pulling moments here. We updated one of our applications to framework 4.0 a while back. All looked good initially and we rolled out the new version to the customer only to find them ringing us up a day later with fields enabled that shouldn’t be. Obviously not ideal.

      There are a few things you can try but what have you tried so far regarding the solutions above? (e.g. I noticed that you tried solution 2 but with no luck)

      I’ll try putting together a quick sample app later today which demos a sample fix

       
    • westcountrydeveloper

      December 1, 2011 at 2:26 pm

      I’ve just thrown together a simple sample app (which I can send if you need) which is a asp.net form containing a disabled checkbox, in Framework 4.0. As suspected the text is not grayed out.

      I added the .aspNetDiabled override class to the stylesheet and set to Red just to be sure (so when disabled the checkbox text will be red)

      .aspNetDisabled
      {
      color:Red;
      }

      Running the add showed the text Red when the control was disabled so all seems ok. You will need to do a full refresh (ctrl + F5) to make sure this style is applied.

      If this is still not working create a new style in the style sheet e.g.

      .chkBoxStyleOverrideDisabled
      {
      color:Green;
      }

      Then in the Global.asax.cs File, within the Application_start method type the following:

      System.Web.UI.WebControls.CheckBox.DisabledCssClass = “chkBoxStyleOverrideDisabled”;

      Again make sure you do a ctrl+F5 when you reload the page.

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: