Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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 ...

Posted: samedi 10 février 2007 01:24 par cyril
Classé sous : , , ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

pifou25 a dit :

bonjour,

ça me pose des problèmes, cette histoire, pour les ClientId que j'utilise dans le code-behind de la page fille (pour écrire un onclic en dynamique en particulier) car à ce moment la le ID de ma masterpage est encore ctl00 et plus tard je le modifie à "m". c'est le drame car mes appels JS sont ko du coup.

# mai 15, 2008 18:02

minsou a dit :

En effet, j'ai également un problème sur les gridview (pas pour le content place holder mais pour le this.ID dans les master pages). et notamment le deleteCommand qui ne passe plus les identifiants à mes méthodes de suppression.

# janvier 11, 2009 12:41

minsou a dit :

autant pour moi la modification était faites dans le page_load et non dans le page_init, ce qui explique le problème ....

# janvier 11, 2009 12:45
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01