當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

【转】 ASP.NET 3.5中使用新的ListView控件

發(fā)布時間：2025/4/16 asp.net 29 豆豆

生活随笔收集整理的這篇文章主要介紹了【转】 ASP.NET 3.5中使用新的ListView控件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

????　ASP.NET中新的ListView控件為顯示和CURD數(shù)據(jù)庫操作提供了基于模板的布局，使之成為一項極好的方式，建立以數(shù)據(jù)為中心的Web應(yīng)用程序。
　
　　當你編寫以用戶為中心的應(yīng)用程序時，總需要某種形式的數(shù)據(jù)集，起碼來說，你需要從一個數(shù)據(jù)源如關(guān)系數(shù)據(jù)庫或XML文件檢索數(shù)據(jù)，在顯示給用戶之前先要進行格式化，盡管ASP.NET之前的版本就提供了以數(shù)據(jù)為中心的顯示控件如GridView，這些控件缺乏專業(yè)Web開發(fā)人員需要的可自定義和可擴展特性，為了解決這個問題，ASP.NET3.5提供了一個新的控件ListView，它提供了非常優(yōu)秀的自定義和擴展特性，使用這些特性，你可以以任何格式顯示數(shù)據(jù)，使用模板和樣式，同時用最少的代碼執(zhí)行CURD（創(chuàng)建、讀取、更新、刪除）操作。
　
　　本文主要集中于使用新的ListView控件時數(shù)據(jù)訪問步驟，同時還包括高級特性如編輯數(shù)據(jù)和處理事件。

ListView控件入門

???????? ASP.NET提供的大部分數(shù)據(jù)綁定控件都是使用額外的標記自動封裝顯示數(shù)據(jù)，舉例來說，GridView控件在一個HTML表格（<table>）中顯示它的數(shù)據(jù)，每條記錄顯示一行（<tr>），每個字段顯示為一個單元格（<td>），雖然你可以使用TemplateField組件自定義GridView的外觀，但GridView的輸出仍然是限制在一個table組件中的，但有時候你想要完全控制由數(shù)據(jù)綁定控件產(chǎn)生的HTML標記的外觀，這正是ListView控件的優(yōu)勢，ListView控件不是使用額外的標記來封裝它的輸出內(nèi)容，而是靠你指定的精確的HTML描述，使用ListView控件內(nèi)置的模板就可以指定精確的標記，表1列出了ListView控件支持的模板。

模板

用途

AlternatingItemTemplate

交替項目模板

用不同的標記顯示交替的項目，便于查看者區(qū)別連續(xù)不斷的項目

EditItemTemplate

編輯項目模板

控制編輯時的項目顯示

EmptyDataTemplate

空數(shù)據(jù)模板

控制ListView數(shù)據(jù)源返回空數(shù)據(jù)時的顯示

EmptyItemTemplate

空項目模板

控制空項目的顯示

GroupSeparatorTemplate

組分隔模板

控制項目組內(nèi)容的顯示

GroupTemplate

組模板

為內(nèi)容指定一個容器對象，如一個表行、div或span組件

InsertItemTemplate

插入項目模板

用戶插入項目時為其指定內(nèi)容

ItemSeparatorTemplate

項目分隔模板

控制項目之間內(nèi)容的顯示

ItemTemplate

項目模板

控制項目內(nèi)容的顯示

LayoutTemplate

布局模板

指定定義容器對象的根組件，如一個table、div或span組件，它們包裝ItemTemplate或GroupTemplate定義的內(nèi)容。

SelectedItemTemplate

已選擇項目模板

指定當前選中的項目內(nèi)容的顯示

最關(guān)鍵的兩個模板是LayoutTemplate和ItemTemplate，正如名字暗示的那樣，LayoutTemplate為ListView控件指定了總的標記，

而ItemTemplate指定的標記用于顯示每個綁定的記錄，例如：下面的代碼顯示了在ListView中由HTML table控制的一串項目。

?<asp:ListView ID="..." runat="server" DataSourceID="...">
<LayoutTemplate>
<table …….>
<tr runat="server" ID="itemPlaceholder"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Name") %></td>
</tr>
</ItemTemplate>
</asp:ListView>

在前面的代碼中，LayoutTemplate標記內(nèi)的<tr>標記的ID是設(shè)置項目占位符（itemPlaceHolder），它告訴ListView通過<table>內(nèi)的ItemTemplate產(chǎn)生的內(nèi)容要放到什么地方，這就是為什么你需要單獨定義LayoutTemplate和ItemTemplate模板的原因。

一個簡單的數(shù)據(jù)綁定的例子

你已經(jīng)看到LisView控件支持的多個模板了，下一步是要創(chuàng)建一個簡單的web站點，名字就叫做ListViewExample（你可以從http://assets.devx.com/sourcecode/38579_tt_mainsource.zip下載該站點的示例代碼），創(chuàng)建好web站點后，選擇Web站點?添加新項目，添加一個新的ASP.NET頁面，名字命名為SimpleListView.aspx（見清單1），這個頁面將使用ListView控件從AdventureWorks示例數(shù)據(jù)庫中的Product表顯示產(chǎn)品數(shù)據(jù)。

清單1.ListView控件示例清單

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Simple Data Binding Example using ListView control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView runat="server" ID="productsView"
DataSourceID="productSource" DataKeyNames="ProductID">
<LayoutTemplate>
<table cellpadding="2" runat="server" id="tblProducts"
style="width:460px">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<asp:DataPager runat="server" ID="DataPager" PageSize="3">
<Fields>
<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--" NextPageText="-->" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" style="height:72px" runat="server">
<td valign="top" class="ProductInfo">
Product ID : <asp:Label ID="lblProductID" runat="server"
Text='<%#Eval("ProductID") %>' />
<br />
Name : <asp:Label ID="lblName" runat="server"
Text='<%#Eval("Name") %>' />
<br />
Product Number : <asp:Label ID="lblProductNumber"
runat="server" Text='<%#Eval("ProductNumber") %>' />??????????????????????????????????????????????
</td>?????
</tr>
</ItemTemplate>
<ItemSeparatorTemplate>
<tr id="separator" style="height:10px" runat="server">
<td>--------------------------------------------------------?
------------------</td>
</tr>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
There are no products!
</EmptyDataTemplate>
</asp:ListView>???
<asp:SqlDataSource id="productSource" runat="server"
DataSourceMode="DataSet"
ConnectionString="<%$ ConnectionStrings:AdventureWorks%>"
SelectCommand="SELECT ProductID,Name,ProductNumber,
Color,ListPrice FROM Production.Product">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

在清單1中，SqlDataSource通過設(shè)置ConnectionString 和SelectCommand 屬性控制從AdventureWorks數(shù)據(jù)庫的Product表中檢索數(shù)據(jù)，ConnectionString屬性通過一個ASP.NET表達式從web.config文件獲取連接字符串，在我的測試機上，連接字符串定義在web.config中，如：

設(shè)置好SqlDataSource屬性后，下一步是通過ListView控件顯示數(shù)據(jù)，下面是在LayoutTemplate模板中的標記：

LayoutTemplate模板定義了ListView控件輸出內(nèi)容的容器，除了在ListView控件頂層定義了table外，LayoutTemplate模板還定義了<asp:DataPager>，它為ListView控件提供了分頁功能，DataPager讓你可以為任何數(shù)

據(jù)綁定控件實現(xiàn)IpageableItemContainer進行數(shù)據(jù)分頁并顯示導(dǎo)航控制。

有兩種方法使數(shù)據(jù)分頁（DataPager）和數(shù)據(jù)綁定（data-bound）聯(lián)合使用：

1、設(shè)置DataPager 的PagedControlID屬性為data-bound的名字。
2、將DataPager置于data-bound層次體系之下，對于ListView控件，你可以將DataPager置于LayoutTemplate組件內(nèi)。

設(shè)置DataPager的PageSize屬性，它控制每頁顯示的數(shù)據(jù)行數(shù)，你也可以在頁面提交到服務(wù)器時通過設(shè)置QueryStringField屬性實現(xiàn)。

在DataPager內(nèi)，你指定NumericPageField模板，它可以讓用戶輸入一個頁號，然后按照頁號進行跳轉(zhuǎn)，如：

<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--"
NextPageText="-->" />

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

圖1.ListView示例：通過數(shù)據(jù)綁定ListView控件到SqlDataSource控件檢索Product表中部分數(shù)據(jù)產(chǎn)生的輸出

用ListView控件編輯數(shù)據(jù)

正如你所看到的，使用ListView控件顯示數(shù)據(jù)相對要直接得多，但你還可以讓用戶在ListView中直接編輯數(shù)據(jù)，添加一個新頁面ListViewEditExample.aspx，它的代碼如清單2所示。

清單2.編輯ListView

<%@ Page Language="C#" %>
<script runat="server">
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 = "";
}???
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Editing Data using ListView Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ContactsListView" DataSourceID="deptSource"
DataKeyNames="DepartmentID" runat="server"
OnItemUpdated="deptsView_ItemUpdated"
OnPagePropertiesChanged="deptsView_PagePropertiesChanged">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1"
runat="server" id="tblProducts">
<tr id="row1" runat="server" class="header">?????????????
<th id="header2" runat="server">Name</th>
<th id="header3" runat="server">Group Name</th>
<th id="header1" runat="server">Action</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
<asp:DataPager runat="server" ID="deptsDataPager"
PageSize="3">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True"
ShowLastPageButton="True" FirstPageText="|<< "
LastPageText=" >>|" NextPageText=" > "
PreviousPageText=" < " />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row2" runat="server">???????????
<td>
<asp:Label ID="lblName" runat="server"
Text='<%#Eval("Name") %>' />
</td>
<td valign="top">
<asp:Label ID="lblGroupName" runat="server"
Text='<%#Eval("GroupName") %>' />
</td>
<td>
<asp:LinkButton ID="btnEdit" runat="server" Text="Edit"
CommandName="Edit" />
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr style="background-color: #ADD8E6">???????????
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>
<br /><br />
<asp:Label runat="server" ID="lblResult" Text=""
Font-Bold="true" />
</div>
</form>
</body>
</html>

清單2的代碼說明了如何使用EditItemTemplate組件在編輯模式下生成內(nèi)容，然后通過SqlDataSource更新數(shù)據(jù)庫。

首先，你設(shè)置SqlDataSource的UpdateCommand屬性，這樣SQL語句就會用由用戶指定的最新值執(zhí)行數(shù)據(jù)庫更新操作。

<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>

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

?<ItemTemplate>
----
----
<asp:LinkButton ID="btnEdit" runat="server" Text="Edit"
CommandName="Edit" />
</td>
</tr>
</ItemTemplate>

然后，指定EditItemTemplate聲明用戶輸入更新的部門名稱或組名的文本框，以及提交或取消當前操作的用戶連接。

<EditItemTe?mplate>
<tr style="background-color: #ADD8E6">???????????
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" />?
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>

歡迎進入.NET社區(qū)論壇，與200萬技術(shù)人員互動交流 >>進入

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

表2. LinkButton CommandName屬性值：列出了ListView控件支持的CommandName屬性值

值

描述

Cancel

取消當前操作

Delete

從數(shù)據(jù)源刪除當前選中的項目

Edit

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

Insert

作為一條新記錄將數(shù)據(jù)保存到數(shù)據(jù)源

Update

用指定的值更新數(shù)據(jù)源

在更新結(jié)束后，ListView控件激活一個OnItemUpdated事件，你可以用它向用戶提供執(zhí)行的狀態(tài)，在清單2的代碼中，ListView控件處理兩個事件：

1、OnItemUpdated：正如名字所暗示的那樣，這個事件允許你在更新操作完畢后執(zhí)行一個自定義的程序，在前面的代碼中，這個事件被用于通知用戶影響的記錄條數(shù)。
2、OnPagePropertiesChanged：當頁面屬性發(fā)生改變時ListView控件激活這個事件，前面代碼中使用這個事件清除了在lable標記包括的文本。

如果你導(dǎo)航到該頁面，你會看到如圖2所示的頁面：

圖2.在運轉(zhuǎn)中編輯ListView：配置ListView控件為每條記錄顯示一個編輯連接，點擊編輯連接切換到編輯模式

當你點擊了編輯（Edit）超鏈接后，ListView控件使用EditItemTemplate顯示文本框，用戶就可以編輯文本框中的內(nèi)容了，如圖3所示：

圖3.編輯模式：在編輯模式下，EditItemTemplate組件產(chǎn)生文本框，用戶可以在這里輸入要更新的值

注意在編輯模式下右邊的更新（Update）和取消（Cancel）鏈接，當你點更新鏈接就會將所做的改變保存到數(shù)據(jù)庫中，代碼使用了OnItemUpdated事件顯示更新操作所影響的行數(shù)，如圖4所示：

圖4.影響的記錄：更新結(jié)束時，顯示更新操作影響的數(shù)據(jù)行數(shù)

以上就是ListView的全部關(guān)鍵特性了，同時你也看到了一個使用ListView控件的簡單以數(shù)據(jù)驅(qū)動的示例web頁面，以及更復(fù)雜的更新功能，最后，描述了如何使用ListView控件產(chǎn)生的事件，正如你看到的，ListView控件擴展了運行時自定義的特性，更加適合你的需要。

轉(zhuǎn)載于:https://www.cnblogs.com/djbone/archive/2008/08/25/1276081.html

總結(jié)

以上是生活随笔為你收集整理的【转】 ASP.NET 3.5中使用新的ListView控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：微软面试智力题
下一篇： asp.net ajax控件工具集 Au