Comment : accéder à des contrôles à partir de JavaScript par ID

Ajoutez le contrôle à une page Web ou un contrôle utilisateur.

Affectez à la propriété ClientIDMode du contrôle une des valeurs suivantes :

• AutoID. Utilisez cette valeur lorsque vous avez déjà un script client que vous souhaitez utiliser et le script suppose que les valeurs ClientID seront générées à l'aide de l'algorithme utilisé dans .NET Framework version 3.5 et les versions antérieures. La valeur de la propriété ClientID est générée en concaténant la propriété ClientID du conteneur d'attribution de noms parent d'un contrôle et la propriété ID du contrôle. Lorsque cet algorithme est utilisé dans un scénario de liaison de données, une valeur incrémentant est insérée après la valeur ClientID du contrôle parent et avant la valeur ID du contrôle. Chaque segment est séparé par un trait de soulignement (_).

  Remarque

  Pour utiliser le paramètre AutoID, il n'est pas généralement nécessaire de définir explicitement la propriété ClientIDMode. La valeur par défaut pour une page Web est AutoID et la valeur par défaut pour un contrôle dans une page est Inherit. Par conséquent, si vous ne définissez pas explicitement la propriété ClientIDMode du contrôle parent ou la page, un contrôle héritera automatiquement du paramètre AutoID. Pour plus d'informations, consultez Identification du contrôle serveur Web ASP.NET.

• Static. Utilisez cette valeur pour que la propriété ClientID contienne la valeur que vous définissez pour la propriété ID. Ce paramètre peut être utilisé dans un contrôle utilisateur Web pour vérifier que les valeurs ClientID des contrôles que contient le contrôle utilisateur Web sont identiques indépendamment de l'emplacement du contrôle utilisateur dans une page Web. Pour plus d'informations, consultez Procédure pas à pas : simplification de l'accès aux contrôles situés dans des contrôles utilisateur Web à partir de JavaScript.

• Predictable. Utilisez cette valeur lorsque le contrôle est à l'intérieur d'un contrôle lié aux données qui contient une propriété ClientIDRowSuffix (par exemple, ListView ou GridView) et que vous souhaitez pouvoir accéder aux instances spécifiques du contrôle dans le script client en utilisant une valeur de clé de la base de données. Pour plus d'informations, consultez Procédure pas à pas : simplification de l'accès aux contrôles liés aux données à partir de JavaScript.

• Inherit. Utilisez cette valeur lorsque vous souhaitez utiliser la valeur ClientIDMode définie pour le conteneur parent du contrôle.

Si vous avez affecté à la propriété ClientIDMode la valeur Predictable, affectez à la propriété ClientIDRowSuffix le nom du champ de données que vous souhaitez utiliser pour identifier uniquement chaque instance du contrôle. Pour le contrôle GridView, vous pouvez entrer plusieurs noms de champ séparés par des virgules.

Si vous ne définissez pas la propriété ClientIDRowSuffix, ASP.NET utilise un numéro séquentiel comme suffixe ClientID. Celui-ci est semblable à l'algorithme utilisé pour AutoID, sauf que le nombre est placé à la fin de l'ID généré au lieu d'être placé avant l'ID du contrôle. De plus, le numéro séquentiel apparaît sans préfixe ctrl (par exemple, ClientID serait Container_Control_25 au lieu de Container_ctrl25_Control).

Dans le script client, utilisez la méthode document.getElementById et passez-la à la valeur ClientID qui sera générée par l'algorithme que vous avez sélectionné.

L'exemple suivant décrit un contrôle utilisateur qui contient un contrôle Label dont la propriété ClientIDMode a pour valeur Static. Le contrôle utilisateur contient également un script client qui accède au contrôle par son ID. Étant donné que la propriété ClientIDMode a la valeur Static, ce contrôle utilisateur peut être utilisé dans tout contrôle conteneur et avoir la même valeur pour la propriété ClientID.

<%@ Control AutoEventWireup="true" %>

<script type="text/javascript">
  var seasonalSports = new Array("None selected",
                                 "Tennis",
                                 "Volleyball",
                                 "Baseball",
                                 "Skiing");

  function DisplaySport(x) {
      document.getElementById("SelectedSport").innerHTML
      = seasonalSports[x];
  }    
</script>

<asp:DropDownList ID="DropDownList1" runat="server" 
                  onchange="DisplaySport(this.selectedIndex);">
  <asp:ListItem Value="Select a season"></asp:ListItem>
  <asp:ListItem Value="Spring"></asp:ListItem>
  <asp:ListItem Value="Summer"></asp:ListItem>
  <asp:ListItem Value="Autumn"></asp:ListItem>
  <asp:ListItem Value="Winter"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static">
</asp:Label>