Tuesday, May 27, 2008

La potenza del ListView

. Tuesday, May 27, 2008

Di controlli per l'associazione dati in Asp.Net c'è ne sono di diversi e per ogni esigenza, ma dalla versione 3.5 ne è stato introdotto uno nuovo: ListView.
Il controllo, a differenza per esempio del controllo GridView, non esegue in fase di design nessun rendering, cioè fa parte della schiera dei controlli definiti template-driven.
Tra le prime cose che possiamo notare è la possibilità di definire la porzione di markup generale che verrà restituito in fase di rendering attraverso l'uso del LayoutTemplate.
In altre parole se per esempio vogliamo ottenere un layout a griglia basta definire in LayoutTemplate l'aspetto generale della tabella e in ItemTemplate il markup a livello di riga e cella:

   1: <asp:ListView ID="ListView" runat="server">
   2:   <LayoutTemplate>
   3:     <table border="1">
   4:       <tr>
   5:         <td style="background-color:Gray">Id</td>
   6:         <td style="background-color:Gray">Descrizione</td>
   7:         <td style="background-color:Gray">Note</td>
   8:       </tr>
   9:       <tr>
  10:         <td runat="server" id="itemPlaceholder"></td>
  11:       </tr>
  12:     </table>
  13:   </LayoutTemplate>
  14:   <ItemTemplate>
  15:     <tr>
  16:       <td><%# Eval( "ID")%></td>
  17:       <td><%# Eval( "Description")%></td>
  18:       <td><%# Eval( "Note")%></td>
  19:     </tr>
  20:   </ItemTemplate>
  21: </asp:ListView>


Ecco il risultato:
ListView1 
Ma basta cambiare il codice del LayoutTemplate:


   1: <asp:ListView ID="ListView" runat="server">
   2:   <LayoutTemplate>
   3:     <table border="0">

   4:       <tr>
   5:         <td colspan="2"><hr /></td>
   6:       </tr>
   7:       <tr>
   8:         <td runat="server" id="itemPlaceholder"></td>
   9:       </tr>
  10:       <tr>
  11:         <td colspan="2"><hr /></td>
  12:       </tr>
  13:     </table>
  14:   </LayoutTemplate>
  15:   <ItemTemplate>
  16:     <tr>
  17:       <td style="background-color:Gray">Id</td>
  18:       <td><%#Eval("Id")%></td>
  19:     </tr>
  20:     <tr>
  21:       <td style="background-color:Gray">Descrizione</td>
  22:       <td><%#Eval("Description")%></td>
  23:     </tr>
  24:     <tr>
  25:       <td style="background-color:Gray">Note</td>
  26:       <td><%#Eval("Note")%></td>
  27:     </tr>
  28:   </ItemTemplate>
  29: </asp:ListView>

e il risultato cambia radicalmente:
ListView2 
Il legame tra il LayoutTemplate e ItemTemplate viene determinato grazie all'uso di un controllo runat server che presenta come id il valore itemPlaceholder ( volendo è possibile modificarlo).
Altra funzionalità che merita di essere sicuramente menzionata è quella di raggruppare i dati in un layout tabellare affiancato utilizzando un GroupTemplate:

   1: <asp:ListView ID="ListView" runat="server" GroupItemCount="2">
   2:   <GroupTemplate >

   3:     <tr>
   4:       <td runat="server" ID="itemPlaceholder"></td>
   5:     </tr>
   6:   </GroupTemplate>
   7:   <LayoutTemplate>
   8:     <table border="1">
   9:       <tr>
  10:         <td ID="groupPlaceholder" runat="server"></td>
  11:       </tr>
  12:     </table>
  13:   </LayoutTemplate>
  14:   <ItemTemplate>
  15:     <td style="background-color:Gray"><%#Eval("Id")%><br />
  16:       <%#Eval("Description")%><br />
  17:       <%#Eval("Note")%>
  18:     </td>
  19:   </ItemTemplate>
  20: </asp:ListView>

ListView3 
All'interno di GroupTemplate definiamo il controllo con id itemPlaceholder mentre in LayoutTemplate un controllo con id groupPlaceholder in cui verrà inserito il contenuto del GroupTemplate.
In definitiva si tratta di un controllo estremamente versatile a cui dobbiamo aggiungere la possibilità di effettuare ordinamenti e paginazione dati.

0 commenti:

Post a Comment