Übersicht über das ListView-Webserversteuerelement

Artikel
10/22/2014

Aktualisiert: November 2007

Mithilfe des ListView-ASP.NET-Steuerelements können Sie eine Bindung zu Datenelementen herstellen, die von einer Datenquelle zurückgegeben werden, und diese anzeigen. Sie können Daten auf Seiten anzeigen. Sie können Elemente einzeln anzeigen, oder Sie können sie gruppieren.

Das ListView-Steuerelement zeigt Daten in einem Format an, das Sie mithilfe von Vorlagen und Stilen definieren können. Dies ist nützlich für Daten in allen sich wiederholenden Strukturen und ähnelt den Steuerelementen DataList und Repeater. Im Gegensatz zu diesen Steuerelementen können Sie es mit dem ListView-Steuerelement Benutzern jedoch ermöglichen, Daten völlig ohne Code zu bearbeiten, einzufügen und zu löschen sowie Seiten zu sortieren und zu "pagen".

Dieses Thema enthält folgende Abschnitte:

Binden von Daten an das ListView-Steuerelement
Erstellen von Vorlagen für das ListView-Steuerelement
Paging von Daten
Sortieren von Daten
Ändern von Daten
Anwenden von Stilen auf ListView-Elemente
Klassenreferenz
Codebeispiele
Zusätzliche Ressourcen

Binden von Daten an das ListView-Steuerelement

Sie können das ListView-Steuerelement wie folgt an Daten binden:

Indem Sie die DataSourceID-Eigenschaft verwenden. Hierbei können Sie das ListView-Steuerelement an ein Datenquellensteuerelement binden, z. B. das SqlDataSource-Steuerelement. Dies ist die empfohlene Vorgehensweise, da so das ListView-Steuerelement die Funktionen des Datenquellensteuerelements nutzen kann. Außerdem werden die integrierten Funktionen zum Sortieren, Pagen, Einfügen, Löschen und Aktualisieren bereitgestellt. Ferner ermöglicht dieser Ansatz die Verwendung von bidirektionalen Bindungsausdrücken. Weitere Informationen zu Datenquellensteuerelementen finden Sie unter Übersicht über Datenquellensteuerelemente.
Indem Sie die DataSource-Eigenschaft verwenden. Hierbei können Sie eine Bindung zu verschiedenen Objekten herstellen, z. B. ADO.NET-Datasets und -Datenreader sowie speicherresidente Strukturen wie Auflistungen. Bei dieser Vorgehensweise müssen Sie den Code für zusätzliche Funktionen wie Sortierung, Paging und Aktualisierung selbst schreiben.

Zurück nach oben

Erstellen von Vorlagen für das ListView-Steuerelement

Elemente, die von einem ListView-Steuerelement angezeigt werden, werden mithilfe von Vorlagen definiert. Dies ähnelt den Steuerelementen DataList und Repeater. Mithilfe des ListView-Steuerelements können Sie Daten als einzelne Elemente oder in Gruppen anzeigen.

Sie definieren das Hauptlayout (Stammlayout) eines ListView-Steuerelements, indem Sie eine LayoutTemplate-Vorlage erstellen. Die LayoutTemplate muss ein Steuerelement enthalten, das als Platzhalter für die Daten fungiert. Beispielsweise kann die Layoutvorlage ein Table-, Panel- oder Label-ASP.NET-Steuerelement enthalten. (Sie kann außerdem table-, div- oder span-HTML-Elemente enthalten, die über ein runat-Attribut verfügen, das auf "server" gesetzt ist.) Diese Steuerelemente enthalten die Ausgabe für die einzelnen Elemente, wie dies von der ItemTemplate-Vorlage definiert wird. Dabei kann eine Gruppierung nach dem Inhalt erfolgen, der von der GroupTemplate-Vorlage definiert wird.

Sie definieren den Inhalt für einzelne Elemente in der ItemTemplate-Vorlage. Diese Vorlage enthält normalerweise Steuerelemente, die über eine Datenbindung an Datenspalten oder andere einzelne Datenelemente verfügen.

Gruppieren von Elementen

Sie können Elemente in einem ListView-Steuerelement bei Bedarf gruppieren, indem Sie die GroupTemplate-Vorlage verwenden. Normalerweise gruppieren Sie Elemente, um ein gekacheltes Tabellenlayout zu erstellen. In einem gekachelten Tabellenlayout werden die Elemente in einer Zeile so oft wiederholt, wie dies in der GroupItemCount-Eigenschaft angegeben ist. Um ein gekacheltes Tabellenlayout zu erstellen, kann die Layoutvorlage ein Table-ASP.NET-Steuerelement oder ein table-HTML-Element enthalten, dessen runat-Attribut auf "server" gesetzt ist. Die Gruppenvorlage kann dann ein TableRow-ASP.NET-Steuerelement (oder ein tr-HTML-Element) enthalten. Die Elementvorlage kann einzelne Steuerelemente enthalten, die sich innerhalb eines TableCell-ASP.NET-Steuerelements (oder eines td-HTML-Elements) befinden.

Sie können die EditItemTemplate-Vorlage verwenden, um eine datengebundene Benutzeroberfläche bereitzustellen, über die Benutzer vorhandene Datenelemente bearbeiten können. Mithilfe der InsertItemTemplate-Vorlage können Sie eine datengebundene Benutzeroberfläche definieren, über die Benutzer neue Datenelemente hinzufügen können. Weitere Informationen finden Sie unter Ändern von Daten weiter unten in diesem Thema.

Verfügbare Vorlagen

In der folgenden Tabelle sind alle Vorlagen aufgeführt, die zusammen mit dem ListView-Steuerelement verwendet werden können.

LayoutTemplate
Identifiziert die Stammvorlage, die das Hauptlayout des Steuerelements definiert. Die Vorlage enthält ein Platzhalterobjekt, z. B. eine Tabellenzeile (tr), oder das Element div oder span. Dieses Element wird durch den Inhalt ersetzt, der in der ItemTemplate-Vorlage oder in der GroupTemplate-Vorlage definiert ist. Außerdem kann ein DataPager-Objekt enthalten sein.
ItemTemplate
Identifiziert den datengebundenen Inhalt, der für die einzelnen Elemente angezeigt werden soll.
ItemSeparatorTemplate
Identifiziert den Inhalt, der zwischen einzelnen Elementen gerendert werden soll.
GroupTemplate
Identifiziert den Inhalt für das Gruppenlayout. Die Vorlage enthält ein Platzhalterobjekt, z. B. die Zelle einer Tabelle (td), div oder span, das durch den Inhalt ersetzt wird, der in den anderen Vorlagen definiert ist, z. B. in den Vorlagen ItemTemplate und EmptyItemTemplate.
GroupSeparatorTemplate
Identifiziert den Inhalt, der zwischen Gruppen von Elementen gerendert werden soll.
EmptyItemTemplate
Identifiziert den Inhalt, der bei Verwendung einer GroupTemplate-Vorlage für ein leeres Element gerendert werden soll. Wenn die GroupItemCount-Eigenschaft beispielsweise auf 5 festgelegt ist und die von der Datenquelle zurückgegebene Gesamtzahl von Elementen 8 beträgt, enthält die letzte Zeile der Daten, die vom ListView-Steuerelement angezeigt werden, drei Elemente, die von der ItemTemplate-Vorlage angegeben werden, sowie zwei Elemente, die von der EmptyItemTemplate-Vorlage angegeben werden.
EmptyDataTemplate
Identifiziert den Inhalt, der gerendert werden soll, wenn die Datenquelle keine Daten zurückgibt.
SelectedItemTemplate
Identifiziert den Inhalt, der für das ausgewählte Datenelement gerendert werden soll, um das ausgewählte Element von den anderen angezeigten Elementen zu unterscheiden.
AlternatingItemTemplate
Identifiziert den Inhalt, der für abwechselnde Elemente gerendert werden soll, damit aufeinanderfolgende Elemente leichter unterschieden werden können.
EditItemTemplate
Identifiziert den Inhalt, der beim Bearbeiten eines Elements gerendert werden soll. Die EditItemTemplate-Vorlage wird anstelle der ItemTemplate-Vorlage für das bearbeitete Datenelement gerendert.
InsertItemTemplate
Identifiziert den Inhalt, der beim Einfügen eines Elements gerendert werden soll. Die InsertItemTemplate-Vorlage wird anstelle einer ItemTemplate-Vorlage entweder am Anfang oder am Ende der Elemente gerendert, die vom ListView-Steuerelement angezeigt werden. Sie können angeben, an welcher Stelle die InsertItemTemplate-Vorlage gerendert werden soll, indem Sie die InsertItemPosition-Eigenschaft des ListView-Steuerelements verwenden.

Erstellen einer Elementvorlage

Das folgende Beispiel zeigt die Grundstruktur einer Elementvorlage.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id="table1"  >
      <tr  id="itemPlaceholder" ></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server>
      <td >
        <%-- Data-bound content. --%>
        <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
      </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

Um Elemente einzeln anzuzeigen, fügen Sie der LayoutTemplate-Vorlage ein serverseitiges Steuerelement hinzu und setzen die ID-Eigenschaft des Steuerelements auf itemPlaceholder. Dieses Steuerelement ist nur ein Platzhalter für die anderen Vorlagen, normalerweise die ItemTemplate-Vorlage. Dieses Steuerelement wird zur Laufzeit dann durch den Inhalt der anderen Vorlagen ersetzt.

Hinweis:
Sie können den Wert der ID-Eigenschaft ändern, die zum Identifizieren des Elementcontainers verwendet wird, indem Sie die ItemPlaceholderID-Eigenschaft auf einen neuen Wert setzen.

Nachdem Sie die Layoutvorlage definiert haben, fügen Sie eine ItemTemplate-Vorlage hinzu, die in der Regel Steuerelemente zum Anzeigen von datengebundenem Inhalt enthält. Sie können Markup angeben, das zum Anzeigen der einzelnen Elemente verwendet wird, indem Sie die Steuerelemente mithilfe der Eval-Methode an Werte aus der Datenquelle binden. Weitere Informationen zur Eval-Methode finden Sie unter Übersicht über Datenbindungsausdrücke.

Sie können zusätzlichen zu rendernden Inhalt bereitstellen, indem Sie die ItemSeparatorTemplate-Vorlage zum Identifizieren des Inhalts verwenden, der zwischen Elementen eingefügt werden soll.

Die folgende Abbildung zeigt ein Layout, das Daten aus der Datenquelle anzeigt, indem pro Element mehrere Tabellenzeilen verwendet werden.

Das folgende Beispiel zeigt, wie Sie das Layout erstellen.

<asp:ListView  ID="EmployeesListView" 
    DataSourceID="EmployeesDataSource" 
    DataKeyNames="EmployeeID">
  <LayoutTemplate>
    <table cellpadding="2"  id="tblEmployees" 
        style="width:460px">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="3">
      <Fields>
        <asp:NumericPagerField
          ButtonCount="5"
          PreviousPageText="<--"
          NextPageText="-->" />
      </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
     <tr >
       <td valign="top" colspan="2" align="center" 
           class="EmployeeName">
         <asp:Label ID="FirstNameLabel"  
           Text='<%#Eval("FirstName") %>' />
         <asp:Label ID="LastNameLabel"  
           Text='<%#Eval("LastName") %>' />
       </td>
     </tr>
     <tr style="height:72px" >
       <td valign="top" class="EmployeeInfo">
         <asp:Label ID="JobTitleLabel"  
             Text='<%#Eval("JobTitle") %>' />
         <br />
         <asp:HyperLink ID="EmailAddressLink"  
             Text='<%#Eval("EmailAddress") %>'  
             href='<%#"mailto:" + Eval("EmailAddress") %>' />
         <br />
         <asp:Label ID="PhoneLabel"  
             Text='<%#Eval("Phone") %>' />
       </td>
       <td valign="top" class="EmployeeAddress">
         <asp:Label ID="AddressLine1Label"  
             Text='<%#Eval("AddressLine1") %>' />
         <br />
         <asp:Panel ID="AddressLine2Panel"  
            Visible='<%#Eval("AddressLine2").ToString() != String.Empty %>'>
         <asp:Label ID="AddressLine2Label"  
            Text='<%#Eval("AddressLine2").ToString()%>'  />
         <br />
         </asp:Panel>
         <asp:Label ID="CityLabel"  
           Text='<%#Eval("City") %>' />,
         <asp:Label ID="StateProvinceNameLabel"  
           Text='<%#Eval("StateProvinceName") %>' />
         <asp:Label ID="PostalCodeLabel"  
           Text='<%#Eval("PostalCode") %>' />
         <br />
         <asp:Label ID="CountryRegionNameLabel"  
           Text='<%#Eval("CountryRegionName") %>' />
       </td>
     </tr>
   </ItemTemplate>
</asp:ListView>

Erstellen einer Gruppenvorlage

Das folgende Beispiel zeigt, wie Sie eine Gruppenvorlage erstellen.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table  id="table1">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="tableRow">
      <td  id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td >
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Um Elemente in Gruppen anzuzeigen, verwenden Sie in der LayoutTemplate-Vorlage ein Serversteuerelement, das als Platzhalter für die Gruppe dient. Sie können z. B. ein TableRow-Steuerelement verwenden. Sie setzen die ID-Eigenschaft des Platzhaltersteuerelements auf groupPlaceholder. Zur Laufzeit wird dieses Platzhaltersteuerelement durch den Inhalt der GroupTemplate-Vorlage ersetzt.

Anschließend fügen Sie ein Platzhaltersteuerelement hinzu und setzen seine ID-Eigenschaft auf itemPlaceholder. Dieses Steuerelement ist nur ein Platzhalter für die anderen Vorlagen, normalerweise die ItemTemplate-Vorlage. Dieses Steuerelement wird zur Laufzeit dann durch den Inhalt der anderen Vorlagen ersetzt. Der Inhalt wird so oft als Element wiederholt, wie dies in der GroupItemCount-Eigenschaft des ListView-Steuerelements angegeben ist.

Zuletzt fügen Sie eine ItemTemplate-Vorlage mit dem datengebundenen Inhalt hinzu, der für die einzelnen Elemente im enthaltenden Steuerelement angezeigt werden soll.

Hinweis:
Sie können den Wert der ID-Eigenschaft ändern, die zum Identifizieren des Gruppenplatzhalters verwendet wird, indem Sie die GroupPlaceholderID-Eigenschaft auf einen neuen Wert setzen.

Sie können die ItemSeparatorTemplate-Vorlage verwenden, um zwischen Elementen ein Trennzeichen zu verwenden. Sie können zwischen Gruppen ein Trennzeichen angeben, indem Sie die GroupSeparatorTemplate-Eigenschaft verwenden.

Die folgende Abbildung zeigt ein Layout, das pro Zeile mehrere Elemente aus der Datenquelle anzeigt.

Das folgende Beispiel zeigt, wie Sie das Layout erstellen.

<asp:ListView  ID="ProductsListView"
    GroupItemCount="3"
    DataSourceID="ProductsSqlDataSource" DataKeyNames="ProductID">
  <LayoutTemplate>
    <table cellpadding="2" 
           id="tblProducts" style="height:320px">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager"
                   PageSize="9">
       <Fields>
         <asp:NumericPagerField ButtonCount="3"
              PreviousPageText="<--"
              NextPageText="-->" />
       </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="productRow"
        style="height:80px">
      <td  id="itemPlaceholder">
      </td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td valign="top" align="center" style="width:100" >
      <asp:Image ID="ProductImage" 
           ImageUrl='<%#"~/images/thumbnails/" + 
               Eval("ThumbnailPhotoFileName") %>'
           Height="49" /><br />
      <asp:HyperLink ID="ProductLink" 
           Target="_blank" Text='<% #Eval("Name")%>'
           href='<%#"ShowProduct.aspx?ProductID=" + 
              Eval("ProductID") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Zurück nach oben

Paging von Daten

Um Benutzern in einem ListView-Steuerelement das Pagen durch Daten zu ermöglichen, können Sie ein DataPager-Steuerelement verwenden. Das DataPager-Steuerelement kann sich innerhalb der LayoutTemplate-Vorlage oder auf der Seite außerhalb des ListView-Steuerelements befinden. Wenn das DataPager-Steuerelement nicht im ListView-Steuerelement angeordnet ist, müssen Sie die PagedControlID-Eigenschaft auf die ID des ListView-Steuerelements setzen.

Das DataPager-Steuerelement unterstützt die integrierte Pagingbenutzeroberfläche. Sie können das NumericPagerField-Objekt verwenden, mit dessen Hilfe Benutzer eine Seite mit Daten anhand der Seitenzahl auswählen können. Außerdem können Sie das NextPreviousPagerField-Objekt verwenden. Auf diese Weise können Benutzer Seite für Seite durch Datenseiten navigieren oder zur ersten bzw. letzten Datenseite springen. Sie legen die Größe der Datenseiten fest, indem Sie die PageSize-Eigenschaft des DataPager-Steuerelements verwenden. Sie können in einem einzelnen DataPager-Steuerelement ein oder mehrere Pagerfeldobjekte verwenden.

Außerdem können Sie mithilfe des TemplatePagerField-Objekts eine benutzerdefinierte Pagingbenutzeroberfläche erstellen. In der TemplatePagerField-Vorlage können Sie auf das DataPager-Steuerelement verweisen, indem Sie die Container-Eigenschaft verwenden. Diese Eigenschaft ermöglicht den Zugriff auf die Eigenschaften des DataPager-Steuerelements. Diese Eigenschaften umfassen z. B. den Startzeilenindex, die Seitengröße und die Gesamtzahl der Zeilen, die momentan an das ListView-Steuerelement gebunden sind.

Das folgende Beispiel zeigt eine DataPager-Klasse, die in der LayoutTemplate-Vorlage eines ListView-Steuerelements enthalten ist.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id=" table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="5">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <%-- Data-bound content. --%>
    </tr>
  </ItemTemplate>
</asp:ListView>

Die folgende Abbildung zeigt ein Layout, das Links zu Datenseiten anhand der Seitenzahl anzeigt, indem das NumericPagerField-Objekt verwendet wird.

Das folgende Beispiel zeigt, wie Sie das Layout erstellen.

<asp:DataPager  ID="DataPager" PageSize="10">
  <Fields>
    <asp:NumericPagerField ButtonCount="10"
         CurrentPageLabelCssClass="CurrentPage"
         NumericButtonCssClass="PageNumbers"
         NextPreviousButtonCssClass="PageNumbers" NextPageText=" > "
         PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

Die folgende Abbildung zeigt eine Pagingbenutzeroberfläche, die Links zur nächsten, vorherigen und letzten Datenseite anzeigt, indem das NextPreviousPagerField-Objekt verwendet wird. Die Pagingbenutzeroberfläche enthält außerdem benutzerdefinierten Inhalt einer TemplatePagerField-Vorlage, die den aktuellen Elementbereich und die Gesamtzahl an Elementen anzeigt. Die TemplatePagerField-Vorlage enthält ein Textfeld, in dem Benutzer die Nummer eines Elements eingeben können, auf das sie zugreifen möchten. Das angegebene Element wird auf der Seite als erstes Element angezeigt.

Das folgende Beispiel zeigt, wie Sie die Pagingbenutzeroberfläche erstellen.

<asp:DataPager  ID="EmployeesDataPager" PageSize="8">
  <Fields>
    <asp:TemplatePagerField>
      <PagerTemplate>
        &nbsp;
        <asp:TextBox ID="CurrentRowTextBox" 
             AutoPostBack="true"
             Text="<%# Container.StartRowIndex + 1%>" 
             Columns="1" 
             style="text-align:right" 
             OnTextChanged="CurrentRowTextBox_OnTextChanged" />
        to
        <asp:Label ID="PageSizeLabel"  Font-Bold="true"
             Text="<%# Container.StartRowIndex + Container.PageSize > Container.TotalRowCount ? Container.TotalRowCount : Container.StartRowIndex + Container.PageSize %>" />
        of
        <asp:Label ID="TotalRowsLabel"  Font-Bold="true"
             Text="<%# Container.TotalRowCount %>" />
      </PagerTemplate>
    </asp:TemplatePagerField>
    <asp:NextPreviousPagerField 
         ShowFirstPageButton="true" ShowLastPageButton="true"
         FirstPageText="|<< " LastPageText=" >>|"
         NextPageText=" > " PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

Das folgende Beispiel zeigt den Ereignishandler für das TextChanged-Ereignis des TextBox-Steuerelements, das in der TemplatePagerField-Vorlage enthalten ist. Der Code im Handler greift auf das Datenelement zu, das vom Benutzer angegeben wird.

Protected Sub CurrentRowTextBox_OnTextChanged(ByVal sender As Object, _
        ByVal e As EventArgs) 
    Dim t As TextBox = CType(sender, TextBox)
    Dim pager As DataPager = _
        CType(EmployeesListView.FindControl("EmployeesDataPager"), _
        DataPager)
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, _
        pager.PageSize, True)
End Sub

protected void CurrentRowTextBox_OnTextChanged(object sender, 
    EventArgs e)
{
    TextBox t = (TextBox)sender;
    DataPager pager = 
        (DataPager)EmployeesListView.FindControl("EmployeesDataPager");
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, 
         pager.PageSize, true);
}

Zurück nach oben

Sortieren von Daten

Sie können die in einem ListView-Steuerelement angezeigten Daten sortieren, indem Sie der LayoutTemplate-Vorlage eine Schaltfläche hinzufügen und die CommandName-Eigenschaft der Schaltfläche auf "Sortieren" (Sort) setzen. Sie setzen die CommandArgument-Eigenschaft der Schaltfläche auf den Namen der Spalte, nach der Sie sortieren möchten. Wenn Sie mehrfach auf die Schaltfläche zum Sortieren klicken, wechselt die Sortierreihenfolge zwischen Ascending und Descending.

Sie können in der CommandArgument-Eigenschaft der Schaltfläche zum Sortieren mehrere Spaltennamen angeben. Standardmäßig wendet das ListView-Steuerelement die Sortierreihenfolge jedoch auf die gesamte Liste von Spalten an. Aus diesem Grund gilt die Sortierreihenfolge praktisch nur für die letzte Spalte. Wenn CommandArgument z. B. "Nachname, Vorname" enthält, erzeugt das mehrfache Klicken auf die Schaltfläche zum Sortieren einen Sortierausdruck wie "Nachname, Vorname ASC" (aufsteigend) bzw. "Nachname, Vorname DESC" (absteigend).

Das folgende Beispiel zeigt ein ListView-Steuerelement, das eine Schaltfläche zum Sortieren der Daten nach dem Nachnamen enthält.

<asp:ListView  ID="ListView1" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <asp:LinkButton  ID="SortButton" 
         Text="Sort" CommandName="Sort" CommandArgument="LastName" />
    <table  id="table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="20">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <td><asp:Label  ID="FirstNameLabel" 
               Text='<%# Eval("FirstName")' /></td>
      <td><asp:Label  ID="LastNameLabel" 
               Text='<%# Eval("LastName")' /></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

Dynamisches Festlegen des Sortierausdrucks

Sie können eine angepasste Sortierung erstellen, indem Sie den Sortierausdruck eines ListView-Steuerelements dynamisch festlegen. Dazu rufen Sie die Sort-Methode auf oder verwenden das Sorting-Ereignis.

Das folgende Beispiel zeigt einen Handler für das Sorting-Ereignis. Der Code wendet auf alle Spalten der SortExpression-Eigenschaft dieselbe Sortierreihenfolge an.

Protected Sub ContactsListView_Sorting(ByVal sender As Object, _
        ByVal e As ListViewSortEventArgs)

    If (String.IsNullOrEmpty(e.SortExpression)) Then Return

    Dim direction As String = ""
    If Not (ViewState("SortDirection") Is Nothing) Then
        direction = ViewState("SortDirection").ToString()
    End If
    
    If direction = "ASC" Then
        direction = "DESC"
    Else
        direction = "ASC"
    End If

    ViewState("SortDirection") = direction

    Dim sortColumns As String() = e.SortExpression.Split(","c)
    Dim sortExpression As String = sortColumns(0) & " " & direction
    Dim i As Integer
    For i = 1 To sortColumns.Length - 1
        sortExpression += ", " & sortColumns(i) & " " & direction
    Next i
    e.SortExpression = sortExpression
    
  End Sub

protected void EmployeesListView_OnSorting(object sender, 
        ListViewSortEventArgs e)
{
    if (String.IsNullOrEmpty(e.SortExpression)) { return; }
    string direction = "";
    if (ViewState["SortDirection"] != null)
        direction = ViewState["SortDirection"].ToString();

    if (direction == "ASC")
        direction = "DESC";
    else
        direction = "ASC";

    ViewState["SortDirection"] = direction;

    string[] sortColumns = e.SortExpression.Split(',');
    string sortExpression = sortColumns[0] + " " + direction;
    for (int i = 1; i < sortColumns.Length; i++)
        sortExpression += ", " + sortColumns[i] + " " + direction;
    e.SortExpression = sortExpression;
}

Zurück nach oben

Ändern von Daten

Sie können Vorlagen für das ListView-Steuerelement erstellen, mit deren Hilfe Benutzer ein einzelnes Datenelement bearbeiten, einfügen oder löschen können.

Um Benutzern die Bearbeitung eines Datenelements zu ermöglichen, können Sie dem ListView-Steuerelement eine EditItemTemplate-Vorlage hinzufügen. Wenn für ein Element in den Bearbeitungsmodus gewechselt wird, zeigt das ListView-Steuerelement das Element mithilfe der Bearbeitungsvorlage an. Die Vorlage sollte datengebundene Steuerelemente enthalten, mit denen Benutzer Werte bearbeiten können. Die Vorlage kann z. B. Textfelder enthalten, in denen Benutzer vorhandene Werte bearbeiten können.

Um Benutzern das Einfügen eines neuen Elements zu ermöglichen, können Sie dem ListView-Steuerelement eine InsertItemTemplate-Vorlage hinzufügen. Wie bei der Bearbeitungsvorlage auch, sollte die Vorlage zum Einfügen datengebundene Steuerelemente enthalten, die das Eingeben von Daten ermöglichen. Die InsertItemTemplate-Vorlage wird entweder am Anfang oder am Ende der angezeigten Elemente gerendert. Sie können angeben, an welcher Stelle die InsertItemTemplate-Vorlage gerendert werden soll, indem Sie die InsertItemPosition-Eigenschaft des ListView-Steuerelements verwenden.

Normalerweise fügen Sie Vorlagen Schaltflächen hinzu, damit Benutzer angeben können, welche Aktion ausgeführt werden soll. Sie können einer Elementvorlage z. B. eine Schaltfläche zum Löschen hinzufügen, um Benutzern das Löschen des Elements zu ermöglichen.

Ebenso können Sie der Elementvorlage eine Schaltfläche zum Bearbeiten hinzufügen, damit Benutzer in den Bearbeitungsmodus wechseln können. Wenn Sie der EditItemTemplate-Vorlage eine Schaltfläche zum Aktualisieren hinzufügen, können Benutzer ihre Änderungen speichern. Mithilfe einer Schaltfläche zum Abbrechen können Benutzer zurück in den Anzeigemodus wechseln, ohne die Änderungen zu speichern.

Sie definieren die Aktion, die eine Schaltfläche ausführt, indem Sie die CommandName-Eigenschaft der Schaltfläche festlegen. In der folgenden Tabelle sind Werte der CommandName-Eigenschaft aufgeführt, für die das ListView-Steuerelement über integriertes Verhalten verfügt.

Select
Zeigt den Inhalt der SelectedItemTemplate-Vorlage für das markierte Element an.
Insert
Gibt in einer InsertItemTemplate-Vorlage an, dass der Inhalt von datengebundenen Steuerelementen in der Datenquelle gespeichert werden soll.
Edit
Gibt an, dass das ListView-Steuerelement in den Bearbeitungsmodus wechseln und das Element mithilfe der EditItemTemplate-Vorlage anzeigen soll.
Update
Gibt in einer EditItemTemplate-Vorlage an, dass der Inhalt von datengebundenen Steuerelementen in der Datenquelle gespeichert werden soll.
Delete
Löscht das Element aus der Datenquelle.
Cancel
Bricht die aktuelle Aktion ab. Wenn die EditItemTemplate-Vorlage angezeigt wird, wird beim Abbrechen der Aktion die SelectedItemTemplate-Vorlage angezeigt, wenn es sich bei dem Element um das momentan markierte Element handelt. Andernfalls wird die ItemTemplate-Vorlage angezeigt. Wenn die InsertItemTemplate-Vorlage angezeigt wird, wird beim Abbrechen der Aktion eine leere InsertItemTemplate-Vorlage angezeigt.
(Benutzerdefinierter Wert)
Führt standardmäßig keine Aktion aus. Sie können für die CommandName-Eigenschaft einen benutzerdefinierten Wert angeben. Im ItemCommand-Ereignis können Sie den Wert überprüfen und eine entsprechende Aktion ausführen.

Ein Beispiel für ein ListView-Steuerelement, das konfiguriert wurde, um das Bearbeiten, Löschen und Einfügen zu ermöglichen, finden Sie unter Exemplarische Vorgehensweise: Ändern von Daten mit dem ListView-Webserversteuerelement.

Zurück nach oben

Anwenden von Stilen auf ListView-Elemente

Das ListView-Steuerelement unterstützt keine Stileigenschaften wie BackColor und Font. Um Stile auf das ListView-Steuerelement anzuwenden, müssen Sie CSS-Klassen (Cascading Stylesheet) oder Inlinestilelemente für einzelne Steuerelemente in den ListView-Vorlagen verwenden.

Einige Objekte unterstützen Eigenschaften, mit denen Sie Stile auf Elemente der Ausgabe anwenden können. Das NumericPagerField-Objekt enthält z. B. die folgenden Eigenschaften:

Eine NumericButtonCssClass-Eigenschaft, mit deren Hilfe Sie die CSS-Klassennamen für die Schaltflächen angeben können, mit denen Benutzer anhand der Seitenzahl auf Datenseiten zugreifen können.
Eine CurrentPageLabelCssClass-Eigenschaft, mit der Sie den CSS-Klassennamen für die aktuelle Seitenzahl angeben können.
Eine NextPreviousButtonCssClass-Eigenschaft, mit der Sie den CSS-Klassennamen für die Schaltflächen angeben können, mit denen Benutzer zur nächsten bzw. zur vorherigen Gruppe numerischer Schaltflächen wechseln.

Zurück nach oben

Klassenreferenz

In der folgenden Tabelle sind die Hauptklassen des ListView-Steuerelements aufgeführt.

Klasse	Beschreibung
ListView	Ein Serversteuerelement, das die Werte einer Datenquelle mithilfe von benutzerdefinierten Vorlagen anzeigt. Sie können das Steuerelement konfigurieren, um Benutzern das Auswählen, Sortieren, Löschen, Bearbeiten und Einfügen von Datensätzen zu ermöglichen.
ListViewItem	Ein Objekt, das im ListView-Steuerelement ein Element darstellt.
ListViewDataItem	Ein Objekt, das im ListView-Steuerelement ein Datenelement darstellt.
ListViewItemType	Eine Enumeration, die in einem ListView-Steuerelement für die Funktion von Elementen steht.
DataPager	Ein Serversteuerelement, das Pagingfunktionen für Steuerelemente darstellt, die die IPageableItemContainer-Schnittstelle implementieren, z. B. das ListView-Steuerelement.
NumericPagerField	Ein DataPager-Feld, in dem Benutzer eine Datenseite anhand ihrer Seitenzahl auswählen können.
NextPreviousPagerField	Ein DataPager-Feld, mit dessen Hilfe Benutzer Seite für Seite durch die Datenseiten blättern oder zur ersten bzw. letzten Datenseite springen können.
TemplatePagerField	Ein DataPager-Feld, mit dem Benutzer eine benutzerdefinierte Pagingbenutzeroberfläche erstellen können.