Blog de Nicolas Esprit

Un article de Nicolas Esprit    Pas de commentaires

Nous allons voir dans ce billet une autre amélioration notable introduite par la nouvelle version d’ASP.NET, il s’agit du rendu HTML. Celui-ci a été peaufiné afin de produire du HTML plus propre, plus léger (tout en nous affranchissant des inconvénients des anciennes versions à savoir la possibilité de gérer les ID des contrôles, mais ceci fera l’objet d’un autre billet).

[b]ASP.NET 2.0: Le respect bancal des normes[/b]

XHTML est une recommandation du W3C depuis 2001 et CSS, qui est en évolution constante, est utilisé partout. Avec la multitude de Browser disponibles et la croissance de l’utilisation de ceux-ci (encore plus avec l’arrivée prochaine du Ballot Screen), il est devenu plus que nécessaire de respecter ces normes et de pouvoir contrôler le code HTML généré.

Malheureusement, ASP.NET 1.1 ne produisait pas de HTML conforme à toutes les normes. ASP.NET 2.0 a introduit un nouveau paramètre dans le fichier Web.config appelé xhtmlConformance qui déterminait la façon dont les contrôles serveurs devaient être rendus au format HTML. Par défaut, les contrôles rendaient le balisage HTML compatible avec la norme XHTML 1.0 Transitional. Il était également possible de changer ce réglage pour rendre le rendu compatible avec le balisage XHTML 1.0 Strict ou avec la version suivante : 1.1 (Legacy).

Malheureusement, pour le mode Legacy, les sites ne fonctionnaient pas avec ASP.NET AJAX. Et pour les deux autres modes : Strict et Transitional, bien que techniquement conformes à la norme XHTML 1.0, ils pourraient être décrits comme non conformes avec la norme CSS. On peut citer par exemple les menus qui étaient générés sous forme de tableaux plutôt que des listes, ou encore les propriétés CSS (comme border=0) qui étaient ajoutées lors du rendu HTML de la page à divers éléments sans possibilité pour nous de les enlever.

L’introduction des contrôles ListView et DataPager dans ASP.NET 3.5 ainsi que des CSS Control Adapters a changé la donne quelque peu. Mais c’est seulement une refonte du namespace System.Web qui permettra de rendre les applications CSS-friendly. Et bien bonne nouvelle : le rendu HTML propre, respectueux des normes, a été l’un des principaux objectifs pour ASP.NET 4.0

[b]ControlRenderingCompatibilityVersion [/b]

Comme xhtmlConformance en ASP.NET 2.0, un nouveau paramètre est maintenant disponible dans le fichier Web.config pour contrôler le rendu HTML des contrôles : ControlRenderingCompatibilityVersion.

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="false" targetFramework="4.0" />
    <pages controlRenderingCompatibilityVersion="3.5" />
  </system.web>
</configuration> 

La propriété ControlRenderingCompatibilityVersion peut prendre deux valeurs. Réglez-la à “3.5” (valeur par défaut pour les sites migrés à partir de ASP.NET 3.5) et tous les contrôles serveurs seront générés en HTML comme ils le faisaient dans ASP.NET 3.5. Réglez-la à “4.0” (valeur par défaut pour les nouvelles applications Web dans Visual Studio 2010) et les impacts seront les suivants :

• xhtmlConformance est réglé sur Stric (donc XHTML 1.0)
• Les menus sont rendus sous forme de listes (et non de table comme précédemment)
• Les propriétés comme border=0, ajoutées malgré nous lors du rendu, sont définitivement supprimées du HTML généré.
• Le rendu des contrôles basés sur des templates peut maintenant être contrôlé avec la propriété RenderOuterTable (exemple : les contrôles comme FormView, Login, ChangePassword ou encore PasswordRecovery).

Pour illustrer cela, regardons un exemple plus détaillé de ces changements sur le contrôle ASP.NET Menu. Examinons un menu très simple avec deux items. Voici sa déclaration dans le markup de notre page :

<asp:Menu runat="server" ID="testMenu">
  <Items>
    <asp:MenuItem Text="Menu Item 1" NavigateUrl="#"></asp:MenuItem>
    <asp:MenuItem Text="Menu Item 2" NavigateUrl="#"></asp:MenuItem>
  </Items>
</asp:Menu>

Avec ControlRenderingCompatibilityVersion fixée à 3.5, le contrôle généré nécessite plus de 50KB de fichiers de script à télécharger par le client (en deux temps qui plus est !) et le code HTML suivant est généré :

<body>
  <div>
  <a href="#testMenu_SkipLink">
    <img alt="Skip Navigation Links" width="0" height="0" style="border-width:0px;"
      src="/CleanHtml/WebResource.axd?d=y4UEb5xFzNnwyKsjxERYdw2&amp;t=634013486901596851" />
  </a>
  <table id="testMenu" class="testMenu_2" cellpadding="0" cellspacing="0" border="0">
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)"
      onkeyup="Menu_Key(this)" id="testMenun0">
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="white-space:nowrap;width:100%;">
              <a class="testMenu_1" href="#">Menu Item 1</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)"
      onkeyup="Menu_Key(this)" id="testMenun0">
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="white-space:nowrap;width:100%;">
              <a class="testMenu_1" href="#">Menu Item 2</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <a id="testMenu_SkipLink"></a>
  </div>
  <script type="text/javascript"> 
     //<![CDATA[
     var testMenu_Data = new Object();
     testMenu_Data.disappearAfter = 500;
     testMenu_Data.horizontalOffset = 0;
     testMenu_Data.verticalOffset = 0;            //]]>    </script>
</body>

Avec ControlRenderingCompatibilityVersion fixée à 4.0, il n’est plus nécessaire de télécharger deux scripts par le client mais un seul (une version complètement remaniée du script du menu) et dont la taille approche les 30KB et non plus 50KB. Le code HTML généré est bien plus léger que précédemment et sous forme de liste :

<body>
  <div>
    <a href="#testMenu_SkipLink">
    <img alt="Skip Navigation Links" width="0" height="0" style="border-width:0px;"
      src="/CleanHtml/WebResource.axd?d=y4UEb5xFzNnwyKsjxERYdw2&amp;t=634013486901596851" />
    </a>
    <div id="testMenu">
    <ul class="level1">
      <li><a class="level1" href="#">Menu Item 1</a></li>
      <li><a class="level1" href="#">Menu Item 2</a></li>
    </ul>
    </div>
    <a id="testMenu_SkipLink"></a>
  </div>
  <script type='text/javascript'>      new Sys.WebForms.Menu({
     element: 'testMenu',
     disappearAfter: 500,
     orientation: 'vertical',
     tabIndex: 0,
     disabled: false });

   </script>
</body>

Comme vous pouvez le voir, non seulement le rendu HTML est conforme aux normes, mais la taille des scripts à télécharger est bien moindre ! A noter l’ajout de la property RenderingMode qui vous permettra de spécifier si le menu doit être rendu comme un tableau ou comme une liste.

Un autre exemple concret concernant cette simplification est le contrôle serveur Image pour lequel ASP.NET 3.5 ajoute lors du rendu la propriété CSS border=0 sans nous demander notre avis. Ainsi pour la déclaration de contrôle suivante dans le markup :

<asp:Image runat="server" ID="imgLogo" ImageUrl="~/logo.jpg" />

On obtiendra ce code HTML avec ControlRenderingCompatibilityVersion fixée à 3.5.

<img id="imgLogo" src="logo.jpg" style="border-width:0px;" />

Tandis que si elle est fixée à 4.0, il n’y a pas rajout parasite :

<img id="imgLogo" src="logo.jpg" />

Pour conclure, ASP.NET 4.0 réalise un grand nettoyage dans le rendu HTML des contrôles serveurs, et rend également les pages CSS-friendly. Le nouveau paramètre dans le fichier Web.config appelé ControlRenderingCompatibilityVersion permet d’indiquer si les contrôles serveurs doivent être rendus comme avec ASP.NET 3.5 ou bien utiliser la version plus légère et conforme aux normes avec ASP.NET4.0.