Condividi tramite

Controllo server Web DataList

Visualizza gli elementi di un'origine dati utilizzando diversi modelli. Modificando i modelli che creano i diversi componenti del controllo DataList, ad esempio ItemTemplate e HeaderTemplate, è possibile personalizzarne l'aspetto e i contenuti.

<asp:DataListid="DataList1"     CellPadding="pixels"     CellSpacing="pixels"     DataKeyField="DataSourceKeyField"     DataSource='<%databindingexpression%>'     ExtractTemplateRows="True|False"     GridLines="None|Horizontal|Vertical|Both"     RepeatColumns="ColumnCount"     RepeatDirection="Vertical|Horizontal"     RepeatLayout="Flow|Table"     ShowFooter="True|False"     ShowHeader="True|False"     OnCancelCommand="OnCancelCommandMethod"     OnDeleteCommand="OnDeleteCommandMethod"     OnEditCommand="OnEditCommandMethod"     OnItemCommand="OnItemCommandMethod"     OnItemCreated="OnItemCreatedMethod"     OnUpdateCommand="OnUpdateCommandMethod"     runat="server">   <AlternatingItemStyle ForeColor="Blue"/>
   <EditItemStyle BackColor="Yellow"/>   <FooterStyle BorderColor="Gray"/>   <HeaderStyle BorderColor="Gray"/>   <ItemStyle Font-Bold="True"/>   <PagerStyle Font-Name="Ariel"/>   <SelectedItemStyle BackColor="Blue"/>   <HeaderTemplate>      Header template HTML   </HeaderTemplate>   <ItemTemplate>      Item template HTML   </ItemTemplate>   <AlternatingItemTemplate>      Alternating item template HTML   </AlternatingItemTemplate>   <EditItemTemplate>      Edited item template HTML   </EditItemTemplate>   <SelectedItemTemplate>      Selected item template HTML   </SelectedItemTemplate>   <SeparatorTemplate>      Separator template HTML   </SeparatorTemplate>   <FooterTemplate>      Footer template HTML   </FooterTemplate></asp:DataList>

Osservazioni

È possibile modificare il layout e il contenuto del controllo tramite la definizione di modelli. Nella tabella seguente sono elencati i diversi modelli per il controllo DataList.

AlternatingItemTemplate È simile all'elemento ItemTemplate, ma nel controllo DataList viene eseguito il rendering a righe alterne. È possibile specificare un aspetto diverso per l'elemento AlternatingItemTemplate, impostandone le proprietà di stile.
EditItemTemplate Layout di un elemento in modalità di modifica. Il modello contiene in genere controlli di modifica, ad esempio i controlli TextBox. Il modello EditItemTemplate viene richiamato per una riga del controllo DataList quando EditItemIndex è impostato sul numero ordinale di quella riga.
FooterTemplate Testo e controlli di cui eseguire il rendering nel piè di pagina del controllo DataList.

Il modello FooterTemplate non può essere associato a dati.
HeaderTemplate Testo e controlli di cui eseguire il rendering nell'intestazione del controllo DataList.

Il modello HeaderTemplate non può essere associato a dati.
ItemTemplate Elementi di cui eseguire il rendering una volta per ogni riga inclusa nell'origine dati.
SelectedItemTemplate Elementi di cui eseguire il rendering quando l'utente seleziona un elemento nel controllo DataList. Viene generalmente utilizzato per espandere il numero dei campi dati visualizzati e per evidenziare la riga.
SeparatorTemplate Elementi di cui eseguire il rendering tra ciascun elemento.

Il modello SeparatorTemplate non può essere associato a dati.

Specificando uno stile per le diverse parti del controllo DataList, è possibile personalizzarne l'aspetto. Nella tabella seguente sono elencate le diverse proprietà di stile per il controllo dell'aspetto delle diverse parti del controllo DataList.

Proprietà di stile Descrizione Classe di stile
AlternatingItemStyle Stile di elementi alternati. TableItemStyle
EditItemStyle Stile dell'elemento in corso di modifica. TableItemStyle
FooterStyle Stile del piè di pagina al termine dell'elenco (se presente). TableItemStyle
HeaderStyle Stile dell'intestazione all'inizio dell'elenco (se presente). TableItemStyle
ItemStyle Stile di singoli elementi. Style
SelectedItemStyle Stile dell'elemento selezionato. TableItemStyle
SeparatorStyle Stile del separatore tra ogni elemento. TableItemStyle

Nota   Il controllo DataList è diverso dal controllo Repeater, poiché supporta il rendering direzionale tramite le proprietà RepeatColumns e RepeatDirection e l'opzione di eseguire il rendering in una tabella HTML.

L'insieme Items contiene i membri associati a dati del controllo DataList. L'insieme viene compilato quando viene richiamato il metodo DataBind per il controllo DataList. L'eventuale intestazione viene aggiunta per prima, seguita da un oggetto Item per ogni riga di dati. Se esiste un modello SeparatorTemplate, oggetti Separators vengono creati e aggiunti tra ogni elemento, ma non all'insieme Items.

Quando tutti gli elementi per le righe sono stati creati in DataSource, viene aggiunto l'oggetto Footer al controllo, ma non all'insieme Items. Infine, il controllo genera l'evento ItemCreated per ogni elemento, inclusi l'intestazione, il piè di pagina e i separatori. A differenza di molti insiemi, l'insieme Items non espone metodi Add o Remove. Tuttavia, se si fornisce un gestore per l'evento ItemCreated, è possibile modificare i contenuti di un elemento.

Attenzione   Il testo non viene codificato in formato HTML prima di essere visualizzato nel controllo DataList. È pertanto possibile incorporare script all'interno dei tag HTML presenti nel testo. Se i valori del controllo provengono dall'input dell'utente, assicurarsi di convalidare tali valori per evitare problemi di protezione.

Per informazioni dettagliate sulle proprietà e sugli eventi del controllo server Web DataList vedere la documentazione di Classe DataList.

Esempio

Nell'esempio seguente viene mostrato come utilizzare il controllo DataList per visualizzare gli elementi nell'origine dati.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>
   <script runat="server">
 
      Function CreateDataSource() As ICollection

         Dim dt As New DataTable()
         Dim dr As DataRow
        
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
        
         Dim i As Integer

         For i = 0 To 9
            dr = dt.NewRow()
            dr(0) = "Item " & i.ToString()
            dt.Rows.Add(dr)
         Next i
          
         Dim dv As New DataView(dt)
         Return dv

      End Function 'CreateDataSource

      Sub Page_Load(sender As Object, e As EventArgs)

         If Not IsPostBack Then
            DataList1.DataSource = CreateDataSource()
            DataList1.DataBind()
         End If

      End Sub 'Page_Load


      Sub Button1_Click(sender As Object, e As EventArgs)
        
         If DropDown1.SelectedIndex = 0 Then
            DataList1.RepeatDirection = RepeatDirection.Horizontal
         Else
            DataList1.RepeatDirection = RepeatDirection.Vertical
         End If 

         If DropDown2.SelectedIndex = 0 Then
            DataList1.RepeatLayout = RepeatLayout.Table
         Else
            DataList1.RepeatLayout = RepeatLayout.Flow
         End If 

         DataList1.RepeatColumns = DropDown3.SelectedIndex + 1
        
         If Check1.Checked = True And DataList1.RepeatLayout = RepeatLayout.Table Then
            DataList1.BorderWidth = Unit.Pixel(1)
            DataList1.GridLines = GridLines.Both
         Else
            DataList1.BorderWidth = Unit.Pixel(0)
            DataList1.GridLines = GridLines.None
         End If

      End Sub 'Button1_Click
 
   </script>
 
<body>
 
   <form runat="server">

      <h3>DataList Example</h3>
 
      <asp:DataList id="DataList1" runat="server"
           BorderColor="black"
           CellPadding="3"
           Font-Name="Verdana"
           Font-Size="8pt">

         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>

         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>

         <HeaderTemplate>
            Items
         </HeaderTemplate>
               
         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
         </ItemTemplate>
 
      </asp:DataList>
      <p>
      <hr noshade align="left" width="300px">
      RepeatDirection:
      <asp:DropDownList id=DropDown1 runat="server">
         <asp:ListItem>Horizontal</asp:ListItem>
         <asp:ListItem>Vertical</asp:ListItem>
      </asp:DropDownList><br>
      RepeatLayout:
      <asp:DropDownList id=DropDown2 runat="server">
         <asp:ListItem>Table</asp:ListItem>
         <asp:ListItem>Flow</asp:ListItem>
      </asp:DropDownList><br>
      RepeatColumns:
      <asp:DropDownList id=DropDown3 runat="server">
         <asp:ListItem>1</asp:ListItem>
         <asp:ListItem>2</asp:ListItem>
         <asp:ListItem>3</asp:ListItem>
         <asp:ListItem>4</asp:ListItem>
         <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList><br>
      Show Borders: 
      <asp:CheckBox id=Check1 runat="server" /><p>
      <asp:LinkButton id=Button1 
           Text="Refresh DataList" 
           OnClick="Button1_Click" 
           runat="server"/>
   </form>
 
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
   <script runat="server">

      ICollection CreateDataSource() 
      {
         DataTable dt = new DataTable();
         DataRow dr;

         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         for (int i = 0; i < 10; i++) 
         {
            dr = dt.NewRow();
            dr[0] = "Item " + i.ToString();
            dt.Rows.Add(dr);
         }

         DataView dv = new DataView(dt);
         return dv;
      }

      void Page_Load(Object Sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
            DataList1.DataSource = CreateDataSource();
            DataList1.DataBind();
         }
      }

      void Button1_Click(Object Sender, EventArgs e) 
      {

         if (DropDown1.SelectedIndex == 0)
            DataList1.RepeatDirection = RepeatDirection.Horizontal;
         else
            DataList1.RepeatDirection = RepeatDirection.Vertical;
         if (DropDown2.SelectedIndex == 0)
            DataList1.RepeatLayout = RepeatLayout.Table;
         else
            DataList1.RepeatLayout = RepeatLayout.Flow;
         DataList1.RepeatColumns=DropDown3.SelectedIndex+1;
         if ((Check1.Checked ==true) && 
            (DataList1.RepeatLayout == RepeatLayout.Table)) 
         {
            DataList1.BorderWidth = Unit.Pixel(1);
            DataList1.GridLines = GridLines.Both;
         }    
         else  
         {
            DataList1.BorderWidth = Unit.Pixel(0);
            DataList1.GridLines = GridLines.None;
         }    
      }    

   </script>

<body>

   <form runat="server">
      <h3>DataList Sample</h3>

         <asp:DataList id="DataList1"
              BorderColor="black"
              CellPadding="3"
              Font-Name="Verdana"
              Font-Size="8pt"
              runat="server">

            <HeaderStyle BackColor="#aaaadd"/>
            <AlternatingItemStyle BackColor="Gainsboro"/>

            <HeaderTemplate>
               Items
            </HeaderTemplate>
            <ItemTemplate>
               <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
            </ItemTemplate>

         </asp:DataList>
         <p>
         <hr noshade align="left" width="300px">
         RepeatDirection:
         <asp:DropDownList id=DropDown1 runat="server">
            <asp:ListItem>Horizontal</asp:ListItem>
            <asp:ListItem>Vertical</asp:ListItem>
         </asp:DropDownList><br>
         RepeatLayout:
         <asp:DropDownList id=DropDown2 runat="server">
            <asp:ListItem>Table</asp:ListItem>
            <asp:ListItem>Flow</asp:ListItem>
         </asp:DropDownList><br>
         RepeatColumns:
         <asp:DropDownList id=DropDown3 runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
         </asp:DropDownList><br>
         Show Borders: 
         <asp:CheckBox id=Check1 runat="server" />
         <p>
         <asp:LinkButton id=Button1 
              Text="Refresh DataList" 
              OnClick="Button1_Click" 
              runat="server"/> 
      </font>
   </form>

</body>
</html>

Vedere anche

Controlli server Web | Classe DataList

  • Last updated on