共用方式為


ListView Web 伺服器控制項概觀

更新:2007 年 11 月

ASP.NET ListView 控制項能讓您繫結從資料來源傳回的資料項目,並加以顯示。您可以在頁面中顯示資料。可以個別顯示項目,或是將它們加以群組。

ListView 控制項會以您使用範本和樣式定義的格式來顯示資料。它跟 DataListRepeater 控制項很相似,很適合用來處理結構重複的資料。但跟這些控制項不同的是,使用 ListView 控制項,您就可以讓使用者編輯、插入與刪除資料,並對資料進行排序與分頁,所有作業都不需要透過程式碼進行。

這個主題包含:

  • 將資料繫結至 ListView 控制項

  • 建立 ListView 控制項的範本

  • 分頁資料

  • 排序資料

  • 修改資料

  • 在 ListView 項目中套用樣式

  • 類別參考

  • 程式碼範例

  • 其他資源

將資料繫結至 ListView 控制項

您可以透過下列方式,將 ListView 控制項繫結至資料:

  • 藉由使用 DataSourceID 屬性。這麼做可讓您將 ListView 控制項繫結至資料來源控制項,例如 SqlDataSource 控制項。建議您採用這種方式,因為它能讓 ListView 控制項充分運用資料來源控制項的功能。這種方式同時可對排序、分頁、插入、刪除與更新作業提供內建的功能。這種方式同時可讓您使用雙向的繫結運算式。如需資料來源控制項的詳細資訊,請參閱資料來源控制項概觀

  • 藉由使用 DataSource 屬性。這麼做可讓您繫結至不同的物件,其中包含 ADO.NET 資料集與資料讀取器以及記憶體內的結構 (例如集合)。這種方式會要求您撰寫其他所有功能的程式碼,例如排序、分頁和更新。

回到頁首

建立 ListView 控制項的範本

DataListRepeater 控制項類似的是,透過 ListView 控制項顯示的項目會由範本來定義。ListView 控制項可讓您將資料顯示為個別的項目或顯示在幾個群組中。

您可以藉由建立 LayoutTemplate 範本來定義 ListView 控制項的主要 (根) 配置。LayoutTemplate 必須包含做為資料預留位置的控制項。例如,配置範本可能包含 ASP.NET TablePanelLabel 控制項 (它同時可能包含 HTML table、div 或 span 項目,其中 runat 屬性已設為 "server")。這些控制項將包含每個由 ItemTemplate 範本所定義之項目的輸出,並在 GroupTemplate 範本所定義的內容中加以群組整理。

您可以在 ItemTemplate 範本中定義個別項目的內容。此範本通常包含透過資料繫結至資料行或其他個別資料項目的控制項。

群組項目

您可以使用 GroupTemplate 範本,選擇性地群組 ListView 控制項中的項目。通常您需要群組項目,以建立並排顯示的資料表配置。在並排顯示的資料表配置中,項目會根據 GroupItemCount 屬性所指定的次數重複出現在資料列中。為了建立可並排顯示的資料表配置,配置範本可能包含 ASP.NET Table 控制項,或者 HTML table 項目可能將其 runat 屬性設為 "server"。接著,群組範本會包含 ASP.NET TableRow 控制項 (或 HTML tr 項目)。項目範本可以包含位於 ASP.NET TableCell 控制項內部的個別控制項 (或 HTML td 項目)。

您可以使用 EditItemTemplate 範本來提供資料繫結 UI,以便使用者修改現有的資料項目。您可以使用 InsertItemTemplate 範本來定義資料繫結 UI,以便使用者加入新的資料項目。如需詳細資訊,請參閱本主題稍後的修改資料。

可用的範本

下表列出可與 ListView 控制項一起使用的所有範本。

建立項目範本

下列範例說明項目範本的基礎結構。

<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>

若要個別顯示項目,請將伺服端控制項加入至 LayoutTemplate 範本,並將控制項的 ID 屬性設為 itemPlaceholder。此控制項只做為其他範本 (通常是 ItemTemplate 範本) 的預留位置使用。因此,此控制項在執行階段將使用其他範本的內容加以取代。

注意事項:

您可以變更 ID 屬性中用來識別項目容器的值,方法是將 ItemPlaceholderID 屬性設為新值。

定義好配置範本之後,可以加入通常包含控制項以顯示資料繫結內容的 ItemTemplate 範本。您可以使用 Eval 方法將控制項繫結至資料來源的值,藉此指定要用來顯示每個項目的標記。如需 Eval 方法的詳細資訊,請參閱資料繫結運算式概觀

您可以使用 ItemSeparatorTemplate 範本 (其可識別要在項目之間加入的內容) 來提供要額外呈現的內容。

下列圖例示範每個項目使用多個表格列來顯示資料來源之資料的配置。

下列範例會顯示如何建立配置。

<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>

建立群組範本

下面範例將示範如何建立群組範本。

<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>

若要以群組方式顯示項目,可以在 LayoutTemplate 範本中使用伺服器控制項,做為群組的預留位置。例如,您可能會使用 TableRow 控制項,並將預留位置控制項的 ID 屬性設為 groupPlaceholder。在執行階段,此預留位置控制項將使用 GroupTemplate 範本的內容來取代。

接著您可以加入預留位置控制項,並將其 ID 屬性設為 itemPlaceholder。此控制項只做為其他範本 (通常是 ItemTemplate 範本) 的預留位置使用。因此,此控制項在執行階段將使用其他範本的內容來取代。內容將依照 ListView 控制項的 GroupItemCount 屬性中指定的項目數量來重複顯示。

最後,加入 ItemTemplate 範本,內含要在包含的控制項中顯示之個別項目的資料繫結內容。

注意事項:

您可以將 GroupPlaceholderID 屬性設為新值,藉此變更 ID 屬性中用來識別群組預留位置的值。

您可以使用 ItemSeparatorTemplate 範本,指定項目之間的分隔符號。也可以使用 GroupSeparatorTemplate 屬性,指定群組之間的分隔符號。

下列圖例示範每列顯示資料來源之多個項目的配置。

下列範例會顯示如何建立配置。

<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>

回到頁首

分頁資料

若要讓使用者在 ListView 控制項中分頁資料,可以使用 DataPager 控制項。DataPager 控制項可以位於 LayoutTemplate 範本中,或是位於 ListView 控制項以外的頁面中。如果 DataPager 控制項不是位於 ListView 控制項中,則您必須將 PagedControlID 屬性設為 ListView 控制項的 ID。

DataPager 控制項支援內建的分頁 UI。您可以使用 NumericPagerField 物件讓使用者根據頁碼來選取資料頁面。您也可以使用 NextPreviousPagerField 物件。這麼做可讓使用者在瀏覽資料頁面時一次一頁,或是跳到資料的第一頁或最後一頁。您可以使用 DataPager 控制項的 PageSize 屬性來設定資料頁面的大小。您可以在單一 DataPager 控制項中使用一個或多個頁面巡覽區欄位物件。

您也可以使用 TemplatePagerField 物件來建立自訂分頁 UI。在 TemplatePagerField 範本中,您可以使用 Container 屬性來參考 DataPager 控制項。此屬性可提供對 DataPager 控制項之屬性的存取。這些屬性包含起始資料列索引、頁面大小,以及目前繫結至 ListView 控制項的總列數。

下列範例說明 DataPager 類別 (包含在 ListView 控制項的 LayoutTemplate 範本中)。

<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>

下列圖例示範使用 NumericPagerField 物件,根據頁碼顯示資料頁面連結的配置。

下列範例會顯示如何建立配置。

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

下列圖例示範使用 NextPreviousPagerField 物件,顯示下一個資料頁面、上一個資料頁面、第一個資料頁面,以及最後一個資料頁面之連結的分頁 UI。此分頁 UI 同時包含來自 TemplatePagerField 範本的自訂內容,其中會顯示目前的項目編號範圍與項目總數。TemplatePagerField 範本包含文字方塊,方便使用者輸入要移動的項目數量。指定的項目會顯示為頁面的第一個項目。

下列範例示範如何建立分頁 UI。

<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>

下列範例說明 TextBox 控制項 (包含在 TemplatePagerField 範本中) 之 TextChanged 事件的事件處理常式。處理常式中的程式碼會移動至使用者所指定的資料項目中。

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);
}

回到頁首

排序資料

您可以針對 ListView 控制項中顯示的資料進行排序,方法是將按鈕加入 LayoutTemplate 範本並將按鈕的 CommandName 屬性設為 "Sort" 即可。您可以將按鈕的 CommandArgument 屬性設定為要做為排序依據的資料行名稱。重複按一下 [Sort] 按鈕,可在 AscendingDescending 兩個排序方向之間切換。

您可以在 [Sort] 按鈕的 CommandArgument 屬性中指定多個資料行名稱。但是,ListView 控制項會將排序方向套用至整個資料行清單。因此,只有清單中的最後一個資料行套用排序方向。例如,如果 CommandArgument 包含 "LastName, FirstName",則重複按一下 [Sort] 按鈕會產生諸如 "LastName, FirstName ASC" 或 "LastName, FirstName DESC" 之類的排序運算式。

下列範例說明示範 ListView 控制項,內含依照姓氏來排序資料的 [Sort] 按鈕。

<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>

動態設定排序運算式

您可以動態設定 ListView 控制項的排序運算式,藉此建立自訂的排序。若要這麼做,請呼叫 Sort 方法或處理 Sorting 事件。

下列範例示範 Sorting 事件的處理常式。程式碼會將相同的排序方向套用至 SortExpression 屬性的所有資料行中。

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;
}

回到頁首

修改資料

您可以建立 ListView 控制項的範本,讓使用者編輯、插入或刪除單一資料項目。

若要讓使用者編輯資料項目,可以將 EditItemTemplate 範本加入至 ListView 控制項。當您將項目切換至編輯模式,ListView 控制項就會使用編輯範本來顯示項目。此範本應該會包含資料繫結控制項,以便使用者編輯值。例如,範本可以包含文字方塊,以便使用者編輯現有值。

若要讓使用者插入新的項目,可以將 InsertItemTemplate 範本加入至 ListView 控制項。至於編輯範本,插入範本應該包含資料繫結控制項以啟用資料輸入。InsertItemTemplate 範本會在顯示項目的開頭或結尾處呈現。您可以使用 ListView 控制項的 InsertItemPosition 屬性,指定 InsertItemTemplate 範本的呈現位置。

通常您應該將按鈕加入至範本中,讓使用者指定要採取的動作。例如,您可以將 [刪除] 按鈕加入至項目範本中,讓使用者刪除該項目。

您可以將 [編輯] 按鈕加入至項目範本中,讓使用者切換至編輯模式。在 EditItemTemplate 中則可以加入 [更新] 按鈕,方便使用者儲存變更。也可以加入 [取消] 按鈕,讓使用者在不儲存變更的情況下切換回顯示模式。

您可以設定按鈕的 CommandName 屬性,定義按鈕將採取的動作。下表列出適用 ListView 控制項之內建行為的 CommandName 屬性值。

如需設定為啟用編輯、刪除與插入動作之 ListView 控制項的範例,請參閱逐步解說:使用 ListView Web 伺服器控制項修改資料

回到頁首

在 ListView 項目中套用樣式

ListView 控制項不支援像 BackColorFont 的樣式屬性。若要將樣式套用至 ListView 控制項,您必須針對 ListView 範本內的個別控制項使用階層式樣式表 (CSS) 類別或內嵌樣式項目。

某些物件支援的屬性可讓您針對輸出的項目設定樣式。例如,NumericPagerField 物件包含下列屬性:

回到頁首

類別參考

下表列出與 ListView 控制項相關的重要類別。

類別

描述

ListView

伺服器控制項,會以使用者定義的範本顯示資料來源的值。您可以設定此控制項,讓使用者選取、排序、刪除、編輯或插入資料錄。

ListViewItem

物件,代表 ListView 控制項中的項目。

ListViewDataItem

物件,代表 ListView 控制項中的資料項目。

ListViewItemType

列舉型別 (Enumeration),可識別 ListView 控制項中的項目功能。

DataPager

伺服器控制項,會針對可實作 IPageableItemContainer 介面的控制項 (例如 ListView 控制項) 提供分頁功能。

NumericPagerField

DataPager 欄位,可讓使用者依照頁碼選取資料頁面。

NextPreviousPagerField

DataPager 欄位,可讓使用者在瀏覽資料頁面時一次一頁,或是跳到資料的第一頁或最後一頁。

TemplatePagerField

DataPager 欄位,可讓使用者建立自訂分頁 UI。

回到頁首

程式碼範例

下列章節包含使用 ListView 控制項的程式碼範例。

使用說明和逐步解說主題

逐步解說:使用 ListView Web 伺服器控制項顯示、分頁和排序資料

逐步解說:使用 ListView Web 伺服器控制項修改資料

回到頁首

請參閱

概念

ASP.NET 資料繫結 Web 伺服器控制項概觀

繫結至資料庫

資料來源控制項概觀

其他資源

ASP.NET 全球化和當地語系化

ASP.NET 網頁可及性