Controllo List

  • Articolo

Esegue il rendering di un elenco di elementi su un dispositivo mobile. Questo controllo supporta l'impaginazione interna e il rendering basato su modelli mediante gli insiemi di modelli di dispositivo. Per ulteriori informazioni, vedere la documentazione Insiemi di modelli e controlli basati su modelli o Impaginazione.

Modalità statica e modalità interattiva

È possibile impostare questo controllo affinché possa essere utilizzato nelle seguenti modalità:

  • Modalità statica - Il controllo si comporta come un elenco statico. È possibile dichiarare gli elementi dell'elenco statico come elementi figlio dell'elemento.
  • Modalità interattiva - Il controllo esegue il rendering degli elementi come elementi interattivi.

Il comportamento di queste modalità dipende dalla presenza di un gestore eventi. Quando non è presente un gestore eventi, il controllo verrà impostato sulla modalità statica. Quando è presente un gestore eventi, il controllo verrà impostato sulla modalità interattiva. In questa modalità ogni elemento diviene un elemento interattivo che genera un evento quando si fa clic su di esso.

Sintassi dei controlli mobili

Le proprietà necessarie, le impostazioni predefinite e gli elementi dalle funzionalità di codice sono in grassetto.

<mobile:Listrunat="server"
   id="id"
   Font-Name="fontName"
   Font-Size="{NotSet|Normal|Small|Large}"
   Font-Bold="{NotSet|False|True}"
   Font-Italic="{NotSet|False|True}"
   ForeColor="foregroundColor"
   BackColor="backgroundColor"
   Alignment="{NotSet|Left|Center|Right}"
   StyleReference="styleReference"
   Wrapping="{NotSet|Wrap|NoWrap}"

   DataMember="dataMember"
   DataTextField="dataTextField"
   DataValueField="dataValueField"
   Decoration="{None|Bulleted|Numbered}"
   ItemsAsLinks="{False|True}"
   ItemCount="itemCount"
   OnItemDataBind="onItemDataBindHandler"
   OnItemCommand="onItemCommandHandler"
   OnLoadItems="loadItemsHandler">

Place DeviceSpecific/Choice construct here. (optional)
   <DeviceSpecific>
      <Choice Add choice here>
      </Choice>
   </DeviceSpecific>

Place statically declared list items here. (optional)
   <Item Text="Text" Value="Value" />

</mobile:List>

Regole di contenimento

I controlli descritti di seguito possono contenere un controllo List.

Controllo Commenti
System.Web.UI.MobileControls.Form Può contenere un numero indefinito di controlli List.
System.Web.UI.MobileControls.Panel Può contenere un numero indefinito di controlli List.

In un controllo List possono essere contenuti i controlli descritti di seguito.

Controllo Commenti
System.Web.UI.MobileControls.DeviceSpecific In un controllo List possono essere contenuti zero oppure un controllo DeviceSpecific.
System.Web.UI.MobileControls.Item In un controllo Image può essere contenuto un numero indefinito di controlli List.

Modelli di dispositivo

Modello Descrizione
HeaderTemplate Il rendering del modello dell'intestazione viene eseguito all'inizio dell'elenco. In modalità di impaginazione il rendering dell'intestazione viene eseguito su ogni pagina.
FooterTemplate Il rendering del modello del piè di pagina viene eseguito alla fine dell'elenco. In modalità di impaginazione il rendering del piè di pagina viene eseguito su ogni pagina.
ItemTemplate Il rendering del modello degli elementi viene eseguito per ogni elemento dell'elenco.
AlternatingItemTemplate Se definito, viene eseguito il rendering di un modello degli elementi alternati anziché il rendering del modello degli elementi per gli elementi dispari. Il secondo elemento, ad esempio, è un modello alternato, come lo è il quarto elemento e ogni elemento successivo con il numero dispari.
SeparatorTemplate Viene eseguito il rendering del modello separatore tra due elementi.

Comportamento specifico del dispositivo

Linguaggio del dispositivo Descrizione del comportamento
HTML Il rendering dell'elenco per il linguaggio HTML dipende dallo stile impostato nella proprietà Decoration:
  • Se il valore della proprietà Decoration è impostato su None, ogni elemento verrà visualizzato senza alcuno stile.
  • Se il valore della proprietà Decoration è impostato su Bulleted, gli elementi saranno rappresentati come elementi <li>, ovvero elementi dell'elenco, in un elenco <ul>, ovvero un elenco puntato.
  • Se il valore della proprietà Decoration è impostato su Numbered, gli elementi saranno rappresentati come elementi <li> in un elenco <ol>, ovvero un elenco numerato.

Se è definito un evento ItemCommand, il testo dell'elemento verrà racchiuso in un collegamento ipertestuale.

Un controllo basato su modelli esegue il rendering dell'elenco come definito esclusivamente dai modelli.
WML Per gli elenchi statici nel linguaggio WML un elenco viene rappresentato come una serie di righe statiche.

Per gli elenchi interattivi nel linguaggio WML sui dispositivi che utilizzano la tecnologia Openwave un elenco viene rappresentato come un costrutto <select>, consentendo all'utente di utilizzare tasti numerici per fare clic o selezionare gli elementi. È possibile unire nel blocco di selezione altri elementi di interfaccia utente su una card.

Per gli elenchi interattivi su altri dispositivi WML viene eseguito il rendering dell'elenco come una serie di punti di ancoraggio.

Un controllo basato su modelli esegue il rendering dell'elenco come definito esclusivamente dai modelli.

Esempio

Nell'esempio riportato di seguito viene visualizzato un elenco di frutti. Quando si seleziona un frutto, verrà visualizzato il prezzo corrispondente.

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"
    Language="VB" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<script language="vb" runat="server">
protected Sub List_Click(source As Object, e As ListCommandEventArgs)
   Dim selectedFruit as String
   selectedFruit = "You selected " + e.ListItem.Text + _
      " at " + e.ListItem.Value + " per pound."
   PriceLabel.Text = selectedFruit
   ActiveForm = Price
End Sub
</script>

<mobile:Form id="ShowProduce" runat="server" BackColor="Green">
   <mobile:Label runat="server" id="label1">Pick a Fruit!</mobile:Label>
   <mobile:List runat="server" id="ListProduce" 
     OnItemCommand="List_Click" >
      <item Text="Apples" Value="20 cents" />
      <item Text="Apricots" Value="80 cents" />
      <item Text="Bananas" Value="79 cents" />
      <item Text="Grapes" Value="50 cents" />
      <item Text="Oranges" Value="30 cents" />
      <item Text="Peaches" Value="10 cents" /> 
      <item Text="Pears" Value="70 cents" />
      <item Text="Plums" Value="99 cents" />
   </mobile:List>
</mobile:Form>
<mobile:Form id="Price" runat = "server">
   <mobile:Label runat="server" id="PriceLabel"/>
</mobile:Form>
[C#]
<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"
    Language="C#" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<script language="c#" runat="server">
protected void List_Click(Object source, ListCommandEventArgs e)
{
   String selectedFruit = "You selected " + e.ListItem.Text +
      " at " + e.ListItem.Value + " per pound.";
   PriceLabel.Text = selectedFruit;
   ActiveForm = Price;
}
</script>

<mobile:Form id="ShowProduce" runat="server" BackColor="Green">
   <mobile:Label runat="server" id="label1">Pick a Fruit!</mobile:Label>
   <mobile:List runat="server" id="ListProduce" 
     OnItemCommand="List_Click" >
      <item Text="Apples" Value="20 cents" />
      <item Text="Apricots" Value="80 cents" />
      <item Text="Bananas" Value="79 cents" />
      <item Text="Grapes" Value="50 cents" />
      <item Text="Oranges" Value="30 cents" />
      <item Text="Peaches" Value="10 cents" /> 
      <item Text="Pears" Value="70 cents" />
      <item Text="Plums" Value="99 cents" />
   </mobile:List>
</mobile:Form>
<mobile:Form id="Price" runat = "server">
   <mobile:Label runat="server" id="PriceLabel"/>
</mobile:Form>

Vedere anche

Classe List | Membri della classe List | Riferimenti ai controlli