Gestione degli ID lato client in ASP.NET 4.0

di Daniele Bochicchio, in ASP.NET 4.0, ClientID,

In scenari caratterizzati da un intenso uso di Javascript, uno dei problemi più comuni da affrontare in ASP.NET 3.5 è la generazione degli ID dei server control nel markup: essi infatti non sono facilmente predicibili e quindi siamo obbligati a scrivere con frequenza codice simile al seguente:

var value = $('<%=FirstName.ClientID%>').val();

ASP.NET 4.0 introduce una nuova proprietà denominata ClientIDMode, che consente di controllare l'ID generato dai controlli in modo da renderne più agevole l'utilizzo lato client. Essa può assumere i seguenti valori:

  • AutoID: modalità compatibile con ASP.NET 3.5;
  • Predictable: è il valore di default, rimuove il prefisso "ctl00" mantenendo solo la porzione dell'ID relativa alla coppia container/figlio;
  • Static: consente di specificare nel markup l'ID indicato sul controllo stesso;
  • Inherit: eredita il comportamento dal controllo contenitore.

Questa proprietà è definita dalla classe base Control, quindi può esser specificata anche a livello di pagina, nella direttiva @Page:

<%@ Page ClientIDMode="Predictable" %>

Si può inoltre indicare anche a livello di web.config:

<system.web>
  <pages clientIDMode="Predictable" />
</system.web>

Nel caso di controlli di tipo lista, è introdotta anche la proprietà ClientIDRowSuffix, che consente di generare gli ID dei controlli basandosi su un valore assegnato in fase di data binding:

<asp:ListView id="customersView" runat="server" ClientIDRowSuffix="CustomerID">
  <ItemTemplate>
    <div id="customer" runat="server">....</div>
  </ItemTemplate>
</asp:ListView>

In questo caso, il codice prodotto dal controllo sarà generato usando la proprietà CustomerID come base:

<li id="customersView_customer_ALFKI">...</li>
...

Si tratta di un accorgimento grazie al quale diventa più semplice fare riferimento diretto ad un controllo quando si utilizza Javascript: esso infatti ci consente di utilizzare un'informazione reale, in luogo del suffisso basato su indice numerico (customersView_customer_0), previsto come comportamento di default.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi