Controllo List
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 è 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