ListView控件與DataPager控件詳解

簡介：

VS2008提供的新控件中只有ListView與DataPaper兩個控件。ListView是一個很強大的控件，他可以實現其它數據控件可以實現的任意功能。而且ListView也前所未有的靈活。通過定義它的模板我們幾乎可以實現任意一種數據展現方式。ListView提供了默認的5種展現樣式Grid、Tiled、Bulleted List、Flow和SigleRow。下面五張圖分別爲這五種樣式的最終效果。

Grid

BulletedList

DefaultTiled

Flow

入門：

要真正瞭解ListView最好是能自己試驗下。下面演示一下如何使用拖拽方式使用這兩個控件。有開發經驗的同志可以直接跳過這部分。

1、 新建一個web項目或web站點

2、 使用Ctrl+N創建一個新的WebForm

3、 雙擊工具箱面板中的ListView控件在頁面上添加一個ListView。

4、使用右鍵通過快捷菜單的Show Smart Tag打開Smart Tag窗口。

5、選擇一個數據源，參見第二篇。

6、使用Smart Tag配置List View。

7、 選擇Layout、Style、Options與分頁方式。

8、 使用Shift+F5瀏覽頁面內容。

進階：

ListView之所以功能強大並且靈活其主要功勞是他的模板列與之前出現的模板有本質的不同。在ListView中佈局定義與數據綁定分開在不同的模板中，然後再根據佈局使用綁定的數據元素替換佈局元素的方式來展現數據。例如：

Code
 <table ID="itemPlaceholderContainer" runat="server" border="1">

 <tr>

 <th colspan="6">Customers</th>

 </tr>

 <tr runat="server">

 <th runat="server">

                                        CompanyName</th>

 <th runat="server">

                                        ContactName</th>

 <th runat="server">

                                        ContactTitle</th>

 <th runat="server">

                                        Address</th>

 <th runat="server">

                                        City</th>

 <th runat="server">

                                        CustomerID</th>

 </tr>

 <tr ID="itemPlaceholder" runat="server">

 </tr>

 </table>

其顯示樣式跟標準Table完全一樣。

其中<tr ID="itemPlaceholder" runat="server"></tr>是必不可少的元素，由它來指定重複替換的元素。這樣的方式使得我們定義佈局更方便自由。靈活也就是理所當然的了。

現在來詳細看看ListView的模板。

（以下ListView的模板部分內容翻譯自MSDN）

l LayoutTemplate：指定用來定義ListView控件佈局的根模板。它包括佔位符對象，例如：table row (tr), div, 或 span 元素. 這個元素將被定義在ItemTemple模板或GroupTemple模板中的內容替換。也可以包含一個DataPager對象。

l ItemTemplate：爲 TemplateField 對象中的項指定要顯示的內容。

l ItemSeparatorTemplate：在 TemplateField 對象中的項之間指定要顯示的內容。

l GroupTemplate：爲分組佈局指定內容。它包括佔位符對象，例如：table row (tr), div, 或 span 元素.這個元素將被定義在ItemTemple模板或EmptyItemTemplate模板中的內容替換。

l GroupSeparatorTemplate：爲分組項之間指定要顯示的內容。

l EmptyItemTemplate：指定使用GroupTemplate時的空項內容。例如，如果GroupItemCount屬性設置爲5，並且數據源返回的總數爲8，ListView控件最後一行將有3項根據ItemTemple顯示，兩項根據EmptyTemplate顯示。

l EmptyDataTemplate：指定數據源爲空時的內容。

l SelectedItemTemplate：爲選中項指定顯示內容。

l AlternatingItemTemplate：爲交替項指定要顯示的內容。

l EditItemTemplate：爲編輯項指定要顯示的內容。當數據進行編輯時EditItemTemplate將替換ItemTemple的數據。

l InsertItemTemplate：爲插入項指定要顯示的內容。當數據進行編輯時InsertItemTemplate將替換ItemTemple的數據。

ListView的顯示樣式：

LayoutTemplate

要使用LayoutTemplate只需要在<asp:ListView>中增加<LayoutTemplate></LayoutTemplate>標記，再在LayoutTemplate使用表示樣式的Html就可。

下面看幾個例子：

如何實現下面的顯示樣式呢？

其實也很簡單，我們只需要在LayoutTemplate中加入如下Html代碼：

<LayoutTemplate>

 <table runat="server" border="1" >

 <tr ID="itemPlaceholderContainer" runat="server">

 <td ID="itemPlaceholder" runat="server">

 </td>

 </tr>

 </table>

</LayoutTemplate>

<td ID="itemPlaceholder" runat="server"></td>也就代表了我們對td元素進行重複替換。

那麼我們又如何實現的每頁只顯示3項數據信息的呢？這就要看DataPager了，在LayoutTemplate內加入分頁控件。

 <LayoutTemplate>

 <table runat="server" border="1" >

 <tr ID="itemPlaceholderContainer" runat="server">

 <td ID="itemPlaceholder" runat="server">

 </td>

 </tr>

 </table>

 <asp:DataPager ID="DataPager1" runat="server" PageSize="3">

 <Fields>

 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"

                                        ShowLastPageButton="True" />

 </Fields>

 </asp:DataPager>

 </LayoutTemplate>

我們設置了PageSize="3"也就是說每頁有6項。關於DataPager我們稍後再說，下面對ListView的講解講先略過對分頁的說明。

再看這樣的佈局方式：

對HTML代碼瞭解比較深的應該應經想到了這是一個ul樣式，對的，正是如此。來看看具體的LayoutTemplate內部的html。

 <ul ID="itemPlaceholderContainer" runat="server">

 <li ID="itemPlaceholder" runat="server" />

 </ul>

是不是非常簡單呢？你要不要也試試這兩個？

題目1：

題目2：

GroupTemplate

來看這幅圖：

似乎沒辦法來完成了，不錯只是前面的方法的確是無法來完成了，現在就要使用GroupTemplate了。我們來看看是如何完成的。

首先我們將LayoutTemplate內部的被替換元素的ID“itemPlaceholderContainer”換成“groupPlaceholderContainer”，這樣來告知替換元素爲組替換。

 <LayoutTemplate>

 <table ID="groupPlaceholderContainer" runat="server" border="1">

 <tr ID="groupPlaceholder" runat="server">

 </tr>

 </table>

 </LayoutTemplate>

然後我們再爲ListView添加一個GroupTemplate元素，如下：

 <GroupTemplate>

 <tr ID="itemPlaceholderContainer" runat="server">

 <td ID="itemPlaceholder" runat="server">

 </td>

 </tr>

 </GroupTemplate>

讀過了上面的LayoutTemplate模板的教程應該可以明白這段的意思了吧。通過itemPlaceholderContainer知道這是一段要被替換的元素，而且是根據tr進行行替換。然後再配合LayoutTemplate形成分組。

我們是如何來定義每行的列數的呢？只需要在ListView裏添加一個屬性定義
<asp:ListView ID="ListView1" runat="server" DataKeyNames="CategoryID" DataSourceID="LinqDataSource1" GroupItemCount="3">

我們這裏設置GroupItemCount屬性的值爲3，也就代表我們的每個Group裏面包含的3項。

那麼我們又如何實現的每頁只有兩行呢？有朋友應該猜出來了，是DataPager了，對只需要在LayoutTemplate內加入分頁控件，並將其PageSize設爲6就可以了。

EmptyDataTemplate

這個模板是用來替換當數據源爲空時候的顯示佈局的，比如：
<EmptyDataTemplate>
No data was returned.
</EmptyDataTemplate>
其結果就是如果用來替換LayoutTemplate的數據源爲空，那麼將顯示這麼一句話No data was returned. 在EmptyDataTemplate我們也可以向LayoutTemplate使用複雜的Html。

EmptyItemTemplate

EmptyItemTemplate是用來替換空數據項的。比如
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
意思就是如果如果Item數據爲空將使用一個替換一個空的td來保持table的完整。

DataPageControl

要使用DataPageControl用來向實現了IPageableItemContainer接口的控件提供分頁。比如ListView控件。

雖然Visual Studio 2008中實現了IPageableItemContainer的控件只有ListView。不過也不要因爲如此就覺得它是雞肋，我們可以通過自己實現IPageableItemContainer自定義自己的控件，然後再用DataPageControl分頁，這個我們以後會再提到。

要在ListView中使用DataPageControl只需要在LayoutTemplate模板中加入DataPager控件，如LayoutTemplate介紹中的第一個例子。

我們來看看DataPageControl默認兩種分頁方式Next/Previous與Numeric。

Next/Previous樣式：

Next/Previous

實現代碼：

 <asp:DataPager ID="DataPager1" runat="server">

 <Fields>

 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"

                    ShowLastPageButton="True" />

 </Fields>

 </asp:DataPager>

Numeric樣式：

Numeric

實現代碼：

 <asp:DataPager ID="DataPager1" runat="server">

 <Fields>

 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"

                    ShowNextPageButton="False" ShowPreviousPageButton="False" />

 <asp:NumericPagerField />

 <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"

                    ShowNextPageButton="False" ShowPreviousPageButton="False" />

 </Fields>

 </asp:DataPager>

除了這兩個方式之外我們還可以自定義它，首先向DataPager中的Fields中添加TemplatePagerField，再在TemplatePagerField中添加PagerTemplate，在PagerTemplate中我們可以添加任意服務器控件，來擴展我們的功能。然後通過定義TemplatePagerField的OnPagerCommand事件來實現我們的功能。

下面的例子我們向分頁控件中添加了一個button來實現展開全部數據的功能。

 <asp:DataPager ID="DataPager1" runat="server" PageSize="3">

 <Fields> <asp:TemplatePagerField OnPagerCommand="ButtonExpandAll_Click">

 <PagerTemplate>

 <asp:Button ID="ButtonExpandAll" runat="server" Text="Expand All"/>

 </PagerTemplate>

 </asp:TemplatePagerField>

 </Fields>

 </asp:DataPager>

除此之外我們還要在C#代碼中實現ButtonExpandAll_Click事件。

ListView的操作

我們可以創建模板來爲ListView控件提供編輯、插入、刪除一條數據項的操作。

要使用戶可以編輯數據，我們可以向ListView添加一個EditItemTemplate模板。當選定項切換到編輯模式的時候ListView控件使用EditItemTemplate模板來顯示此項。該模板在用戶編輯時應該包含綁定了數據的可輸入控件。例如，TextBox控件。

要使用戶可以編輯數據，我們可以向ListView添加一個InsertItemTemplate模板。與EditItemTemplate控件一樣，該模板包含綁定了數據的可輸入控件。通過指定InsertItemPosition 屬性InsertItemTemplate模板可以選擇顯示在開頭或者結尾部分。

我們可以向ItemTemplate、SelectedItemTemplate與AlternatingItemTemplate模板添加一個編輯按鈕來使用戶可以切換到編輯模式。在EditItemTemplate模板中我們可以添加更新按鈕來使用戶可以保存數據。同樣也可以添加一個取消按鈕來使用戶可以不保存數據切換回顯示模式。

我們可以通過爲按鈕設置CommandName屬性來定義一個動作。下面列出了ListView控件內建的ComandName屬性名稱。

Select

         爲選中的項顯示SelectedItemTemplate模板中的內容。

Insert

       在InsertItemTemplate模板中，保存被指定的數據綁定控件。

Edit

       使ListView可以進入編輯模式，並顯示EditItemTemplate中的項。

Update

       在EditItemTemplate模板中，使被綁定的控件可以保存到數據源。

Delete

       刪除數據項。

Cancel

       取消當前的動作。或清空InsertItemTemplate中的控件值。

插入：

使用InsertItemTemplate模板在ListView中自定義插入界面來實現數據的插入。InsertItemTemplate一般包含一些爲用戶提供新記錄輸入的可輸入控件。並且通常它也包含實現插入或取消操作的按鈕控件。

向ListView中添加一個InsertItemTemplate模板。通過使用實現了雙向綁定的可輸入控件來建立與字段的關聯。當一條數據被插入以後，ListView控件自動從可輸入控件來獲取字段的值。

要創建實現了內建插入與取消操作的控件，需要向模板中添加一個按鈕。並設置CommandName屬性爲"Cancel"或"Insert"。

我們可以通過設置ListView控件的InsertItemPostion屬性自由的設置插入項的位置。

看一段InsertItemTemplate的例子.

  <InsertItemTemplate>
    <tr runat="server" style="background-color:#D3D3D3">
      <td valign="top">
        <asp:Label runat="server" ID="FirstNameLabel" 
          AssociatedControlID="FirstNameTextBox" Text="First Name"/>
        <asp:TextBox ID="FirstNameTextBox" runat="Server" 
          Text='<%#Bind("FirstName") %>' /><br />
        <asp:Label runat="server" ID="LastNameLabel" 
          AssociatedControlID="LastNameTextBox" Text="Last Name" />
        <asp:TextBox ID="LastNameTextBox" runat="Server" 
          Text='<%#Bind("LastName") %>' /><br />
        <asp:Label runat="server" ID="EmailLabel" 
          AssociatedControlID="EmailTextBox" Text="E-mail" />
        <asp:TextBox ID="EmailTextBox" runat="Server" 
          Text='<%#Bind("EmailAddress") %>' />
      </td>
      <td>
        <asp:LinkButton ID="InsertButton" runat="server" 
          CommandName="Insert" Text="Insert" />
      </td>
    </tr>
  </InsertItemTemplate>

  其中的TextBox控件就是我們所說的雙向綁定控件。
 

編輯：

通過向ItemTemplate、SelectedItemTemplate與AlternatingItemTemplate中添加按鈕，並將按鈕CommandName屬性定義爲"Edit" ，ID定義爲"EditButton"。通過點擊按鈕來啓動編輯狀態。下面是AlternatingItemTemplate中的示例。

            <AlternatingItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
                    </td>
                    //後面的代碼省略

使用EditItemTemplate模板在ListView中自定義數據編輯模式。EditItemTemplate一般包含一些爲用戶提供記錄修改的可輸入控件。並且通常它也包含實現更新或取消操作的按鈕控件。

向ListView中添加一個EditItemTemplate模板。通過使用實現了雙向綁定的可輸入控件來建立與字段的關聯。當一條數據被插入以後，ListView控件自動從可輸入控件來獲取字段的值。

要創建實現了內建更新與取消操作的控件，需要向模板中添加一個按鈕。並設置CommandName屬性爲"Cancel"或" Update "。

EditItemTemplate模板舉例：

        <EditItemTemplate>
          <tr style="background-color: #ADD8E6" runat="server">
            <td>
              <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />&nbsp;
              <asp:LinkButton ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
            </td>
            <td>
              <asp:TextBox ID="FirstNameTextBox" runat="server" Text='<%#Bind("FirstName") %>' 
                MaxLength="50" /><br />
            </td>
            <td>
              <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%#Bind("LastName") %>' 
                MaxLength="50" /><br />
            </td>
          </tr>
        </EditItemTemplate>
      </asp:ListView>

 

刪除：

通過向ItemTemplate、SelectedItemTemplate與AlternatingItemTemplate中添加按鈕，並將按鈕CommandName屬性定義爲" Delete "， ID定義爲" DeleteButton "。通過點擊按鈕來啓動刪除事件。

下面是AlternatingItemTemplate中的示例。

            <AlternatingItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" />
                    </td>
                    //後面的代碼省略

 

深入：使用ListView來顯示父子表關係

實現父子表的關係，嵌套的數據顯示是一種不錯的方法。ListView來實現數據的嵌套可以說是小菜一疊。只需要在ItemTemplate中再放入一個ListView就可以了，或其它的數據控件。

(來源：http://www.cnblogs.com/tianyamoon/archive/2008/01/17/1043690.html)