在ASP.NET 3.5中使用新的ListView控制項

ASP.NET中新的ListView控制項為顯示和CURD資料庫操作提供了基於模板的布局，使之成為一項極好的方式，建立以資料為中心的Web應用程式。

當你編寫以使用者為中心的應用程式時，總需要某種形式的資料集，起碼來說，你需要從一個資料來源如關聯式資料庫或XML檔案檢索資料，在顯示給使用者之前先要進行格式化，儘管ASP.NET之前的版本就提供了以資料為中心的顯示控制項如GridView，這些控制項缺乏專業Web開發人員需要的可自訂和可擴充特性，為瞭解決這個問題，ASP.NET3.5提供了一個新的控制項ListView，它提供了非常優秀的自訂和擴充特性，使用這些特性，你可以以任何格式顯示資料，使用模板和樣式，同時用最少的代碼執行CURD（建立、讀取、更新、刪除）操作。

本文主要集中於使用新的ListView控制項時資料訪問步驟，同時還包括進階特性如編輯資料和處理事件。

ListView控制項入門

ASP.NET提供的大部分資料繫結控制項都是使用額外的標記自動封裝顯示資料，舉例來說，GridView控制項在一個HTML表格（

在前面的代碼中，LayoutTemplate標記內的

）中顯示它的資料，每條記錄顯示一行（ ），每個欄位顯示為一個儲存格（ 標記的ID是設定項目預留位置（itemPlaceHolder），它告訴ListView通過

），雖然你可以使用TemplateField組件自訂GridView的外觀，但GridView的輸出仍然是限制在一個table組件中的，但有時候你想要完全控制由資料繫結控制項產生的HTML標記的外觀，這正是ListView控制項的優勢，ListView控制項不是使用額外的標記來封裝它的輸出內容，而是靠你指定的精確的HTML描述，使用ListView控制項內建的模板就可以指定精確的標記，表1列出了ListView控制項支援的模板。 模板 用途 AlternatingItemTemplate 交替項目模板 用不同的標記顯示交替的項目，便於查看者區別連續不斷的項目 EditItemTemplate 編輯項目模板 控制編輯時的項目顯示 EmptyDataTemplate 空資料範本 控制ListView資料來源返回空資料時的顯示 EmptyItemTemplate 空項目模板 控制空項目的顯示 GroupSeparatorTemplate 組分隔模板 控制項目組內容的顯示 GroupTemplate 組模板 為內容指定一個容器物件，如一個表行、div或span組件 InsertItemTemplate 插入項目模板 使用者插入項目時為其指定內容 ItemSeparatorTemplate 項目分隔模板 控制項目之間內容的顯示 ItemTemplate 項目模板 控制項目內容的顯示 LayoutTemplate 布局模板 指定定義容器物件的根組件，如一個table、div或span組件，它們封裝ItemTemplate或GroupTemplate定義的內容。 SelectedItemTemplate 已選擇項目模板 指定當前選中的項目內容的顯示 最關鍵的兩個模板是LayoutTemplate和ItemTemplate，正如名字暗示的那樣，LayoutTemplate為ListView控制項指定了總的標記，而ItemTemplate指定的標記用於顯示每個綁定的記錄，例如：下面的代碼顯示了在ListView中由HTML table控制的一串項目。

你已經看到LisView控制項支援的多個模板了，下一步是要建立一個簡單的web網站，名字就叫做ListViewExample（你可以從http://assets.devx.com/sourcecode/38579_tt_mainsource.zip下載該網站的範例程式碼），建立好web網站後，選擇Web網站?添加新項目，添加一個新的ASP.NET頁面，名字命名為SimpleListView.aspx（見清單1），這個頁面將使用ListView控制項從AdventureWorks樣本資料庫中的Product表顯示產品資料。

清單1.ListView控制項樣本清單

內的ItemTemplate產生的內容要放到什麼地方，這就是為什麼你需要單獨定義LayoutTemplate和ItemTemplate模板的原因。

PreviousPageText="" />

Product ID : Text='' />

Name : Text='' />

Product Number : runat="server" Text='' />                                              

     

-------------------------------------------------------- 
------------------

There are no products!

   
DataSourceMode="DataSet"
ConnectionString=""
SelectCommand="SELECT ProductID,Name,ProductNumber,
Color,ListPrice FROM Production.Product">

在清單1中，SqlDataSource通過設定ConnectionString 和SelectCommand 屬性控制從AdventureWorks資料庫的Product表中檢索資料，ConnectionString屬性通過一個ASP.NET運算式從web.config檔案擷取連接字串，在我的測試機上，連接字串定義在web.config中，如：

connectionString="server=localhost;uid=sa;
pwd=thiru;database=AdventureWorks;"/>

設定好SqlDataSource屬性後，下一步是通過ListView控制項顯示資料，下面是在LayoutTemplate模板中的標記：

style="width:460px">

PreviousPageText="" />

LayoutTemplate模板定義了ListView控制項輸出內容的容器，除了在ListView控制項頂層定義了table外，LayoutTemplate模板還定義了，它為ListView控制項提供了分頁功能，DataPager讓你可以為任何資料繫結控制項實現IpageableItemContainer進行資料分頁並顯示導航控制。

有兩種方法使資料分頁（DataPager）和資料繫結（data-bound）聯合使用：

1、設定DataPager 的PagedControlID屬性為data-bound的名字。
2、將DataPager置於data-bound層次體系之下，對於ListView控制項，你可以將DataPager置於LayoutTemplate組件內。

設定DataPager的PageSize屬性，它控制每頁顯示的資料行數，你也可以在頁面提交到伺服器時通過設定QueryStringField屬性實現。

在DataPager內，你指定NumericPageField模板，它可以讓使用者輸入一個頁號，然後按照頁號進行跳轉，如：

PreviousPageText="NextPageText="-->" />

ItemTemplate組件為每個記錄的明細提供了標記。圖1顯示了在瀏覽器中導航到該頁面的輸出。

點擊查看大圖

圖1.ListView樣本：通過資料繫結ListView控制項到SqlDataSource控制項檢索Product表中部分資料產生的輸出

正如你所看到的，使用ListView控制項顯示資料相對要直接得多，但你還可以讓使用者在ListView中直接編輯資料，添加一個新頁面ListViewEditExample.aspx，它的代碼如清單2所示。

清單2.編輯ListView

void deptsView_ItemUpdated(object sender,
ListViewUpdatedEventArgs e)
{
lblResult.Text = e.AffectedRows.ToString() +
" row(s) successfully updated";
}

void deptsView_PagePropertiesChanged(object sender, EventArgs e)
{
//Set the text to empty when navigating to a different page
lblResult.Text = "";
}   

清單2的代碼說明了如何使用EditItemTemplate組件在編輯模式下產生內容，然後通過SqlDataSource更新資料庫。

首先，你設定SqlDataSource的UpdateCommand屬性，這樣SQL語句就會用由使用者指定的最新值執行資料庫更新操作。

ConnectionString=""
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">

接下來，在ItemTemplate組件中，指定編輯項目的串連使用者：

----
---- CommandName="Edit" />

然後，指定EditItemTemplate聲明使用者輸入更新的部門名稱或組名的文字框，以及提交或取消當前操作的使用者串連。

            Text=''
MaxLength="50" />

CommandName="Update" Text="Update" />  CommandName="Cancel" Text="Cancel" />

這裡通過CommandName屬性定義的LinkButton的行為，如表2所示。

表2. LinkButton CommandName屬性值：列出了ListView控制項支援的CommandName屬性值

值

描述

Cancel

取消當前操作

Delete

從資料來源刪除當前選中的項目

Edit

切換ListView到編輯模式，顯示EditItemTemplate組件中指定的內容

Insert

作為一條新記錄將資料儲存到資料來源

Update

用指定的值更新資料來源

在更新結束後，ListView控制項啟用一個OnItemUpdated事件，你可以用它向使用者提供執行的狀態，在清單2的代碼中，ListView控制項處理兩個事件：

1、OnItemUpdated：正如名字所暗示的那樣，這個事件允許你在更新操作完畢後執行一個自訂的程式，在前面的代碼中，這個事件被用於通知使用者影響的記錄條數。
2、OnPagePropertiesChanged：當頁面屬性發生改變時ListView控制項啟用這個事件，前面代碼中使用這個事件清除了在lable標記包括的文本。

如果你導航到該頁面，你會看到2所示的頁面：

點擊查看大圖

圖2.在運轉中編輯ListView：配置ListView控制項為每條記錄顯示一個編輯串連，點擊編輯串連切換到編輯模式

當你點擊了編輯（Edit）超連結後，ListView控制項使用EditItemTemplate顯示文字框，使用者就可以編輯文字框中的內容了，3所示：

點擊查看大圖

圖3.編輯模式：在編輯模式下，EditItemTemplate組件產生文字框，使用者可以在這裡輸入要更新的值

注意在編輯模式下右邊的更新（Update）和取消（Cancel）連結，當你點更新連結就會將所做的改變儲存到資料庫中，代碼使用了OnItemUpdated事件顯示更新操作所影響的行數，4所示：

點擊查看大圖

圖4.影響的記錄：更新結束時，顯示更新操作影響的資料行數

以上就是ListView的全部關鍵特性了，同時你也看到了一個使用ListView控制項的簡單以資料驅動的樣本web頁面，以及更複雜的更新功能，最後，描述了如何使用ListView控制項產生的事件，正如你看到的，ListView控制項擴充了運行時自訂的特性，更加適合你的需要。

註：本文範例程式碼http://assets.devx.com/sourcecode/38579_tt_mainsource.zip