Optimisation des ID genere par ASP.net
Par défaut lorsque l'on créer une nouvelle MasterPage dans Visual Studio 2005 cela nous génère ce code :
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
Si l'on fait une simple Content page qui contient seulement une TextBox :
<%@ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBoxNom" runat="server" />
</asp:Content>
Le code HTML généré pour la TextBox est :
<input name="ctl00$ContentPlaceHolder1$TextBoxNom" type="text" id="ctl00_ContentPlaceHolder1_TextBoxNom" />
Quelque chose me gène dans ce code ! La taille des attributs id et name est énorme, surtout que l'attribut name va également être envoyé lors des requêtes POST. Si votre page contient plusieurs dizaines de champs, vous pouvez vite vous retrouvez avec plusieurs kilo-octets à uploadé seulement à cause d'un id beaucoup trop long.
Mais pourquoi ASP.net nous génère des ID aussi long ? En fait lorsqu'ASP.net génère le code HTML d'un contrôle, il renseigne la propriété HTML ID à partir de sa propriété ClientID, cette propriété ClientID est constituée du ClientID de son namingContainer. Le namingContainer d'un contrôle est son premier parent qui implémente l'interface INamingContainer. Alors comment faire pour réduire le code HTML généré et ainsi économiser quelques octets d'upload et de download ? il faut renommer
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
en
<asp:contentplaceholder id="C" runat="server">
</asp:contentplaceholder>
Mais à quoi correspond le "ctl00 " de l'ID "ctl00$ContentPlaceHolder1$TextBoxNom" ? Il s'agit de l'ID d'un contrôle pour lequel on a pas explicitement renseigné d'ID, dans ce cas si l'ID est null ou vide, ASP.net va automatiquement généré un ID. Ce contrôle d'ID "ctl00" correspond au contrôle MasterPage, il nous faut modifier l'ID de ce contrôle via le code-behind de la MasterPage :
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Init(object sender, EventArgs e)
{
// permet de modifier l'id de la masterPage est ainsi généré des id HTML plus court
this.ID = "m";
}
}
le code HTML ainsi généré devient donc :
<input name="m$C$tbNom" type="text" id="m_C_tbNom" />
Cette astuce vous fera gagner quelques octets très facilement et en très peu de temps, donc autant en profiter. Plus généralement lorsque vous avez des contrôles container, comme des UserControl ou des Panels, évitez de mettre des ID à rallonges, vous serez vite étonné à quel point cela peut allonger votre code HTML ...