Proprietà Control.ClientID (System.Web.UI)

Quando viene eseguito il rendering di un controllo server Web come elemento HTML, l'attributo id dell'elemento HTML viene impostato sul valore della proprietà ClientID. Il valore della proprietà ClientID viene spesso utilizzato per accedere all'elemento HTML nello script client tramite il metodo document.getElementById. L'ID viene spesso utilizzato anche nelle regole CSS per specificare elementi a cui applicare stili. Ad esempio, la regola di stile CSS seguente seleziona tutti gli elementi span che dispongono del valore di attributo id pari a ProductIDLabel e imposta l'attributo background-color su white:

span#ProductIDLabel { background-color: white; }

ASP.NET fornisce svariati algoritmi sulla generazione del valore della proprietà ClientID. Per selezionare quale algoritmo utilizzare per un controllo, impostare la relativa proprietà ClientIDMode. Gli algoritmi vengono identificati dai valori dell'enumerazione ClientIDMode elencati nella tabella seguente.

Il valore predefinito di ClientIDMode per una pagina è Predictable. Il valore predefinito di ClientIDMode per un controllo è Inherit. Poiché l'impostazione predefinita per i controlli è Inherit, la modalità di generazione predefinita è Predictable. Se tuttavia si utilizza Visual Studio per convertire un progetto Web da una versione precedente ad ASP.NET 4, in Visual Studio verrà impostato automaticamente l'attributo AutoID nel file Web.config.

Per ulteriori informazioni, vedere Identificazione dei controlli server Web ASP.NET.

Negli esempi seguenti viene mostrato un controllo utente Web all'interno di una pagina contenuto per una pagina master. Il controllo utente contiene un controllo DropDownList e un controllo Label. Il testo visualizzato nel controllo Label è determinato dal valore selezionato dall'utente nel controllo DropDownList. Il valore del testo viene impostato tramite script client in modo che la pagina Web non debba eseguire il postback nel server per impostare questo valore. Per ottenere un riferimento all'elemento HTML di cui viene eseguito il rendering per il controllo Label nello script client, è necessario conoscere il valore della proprietà ClientID del controllo. Tuttavia, poiché è possibile inserire il controllo utente dovunque in una pagina Web, è impossibile sapere in anticipo quali contenitori di denominazione conterranno i controlli. Per assicurarsi che il valore ClientID corrisponda al valore ID, il codice imposta il valore ClientIDMode su Static.

Nell'esempio riportato di seguito viene illustrato il controllo utente.

<%@ 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>

Nel seguente esempio viene illustrata la pagina contenuto che contiene il controllo utente.

<%@ Page Title="" MasterPageFile="~/Seasons.master" AutoEventWireup="true" %>

<%@ Register Src="Seasons.ascx" TagName="Seasons" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <uc1:Seasons ID="Seasons1" runat="server" />
</asp:Content>

Nell'esempio seguente viene illustrata la pagina master che contiene la pagina contenuto.

<%@ Master AutoEventWireup="true" %>

<!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></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

.NET Framework

Windows 7, Windows Vista SP1 o versione successiva, Windows XP SP3, Windows XP SP2 x64 Edition, Windows Server 2008 (componenti di base del server non supportati), Windows Server 2008 R2 (componenti di base del server supportati con SP1 o versione successiva), Windows Server 2003 SP2

Riferimenti

Altre risorse