大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。
代码位置: ExtremeASPNET2008_03.exe (192 KB)
Browse the Code Online
® 2008 一同公布的 ASP.NET 3.5 引入了新的数据绑定控件—ListView。
我知道您正在想什么:为什么 ASP.NET 里还须要还有一个数据绑定控件呢?毕竟。当显示数据收集时,我们已经有超过 10 个控件可供选择,当中包含逐渐不再使用的 DataGrid、新的和改进的 GridView、很可靠和简单的 Repeater、独特和灵活的 DataList、方便的 FormView 及其稍显冗余的同行 DetailsView。
当然。另一维列表控件 BulletedList、ListBox、DropDownList、RadioButtonList 和 CheckBoxList。
ListView 还能够使一些数据绑定任务比使用前几个控件工作起来更加便利,包含 CSS 样式设定、灵活的分页和完好的排序、插入、删除和更新功能。
图 1 所看到的(在本演示样例中,绑定的数据源将显示包括电影标题和发行日期的简单表格)。
图 2 显示了浏览器呈现。
<asp:ListView runat="server" ID="_simpleTableListView"
DataSourceID="_moviesDataSource">
<LayoutTemplate>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("movie_id") %></td>
<td><%# Eval("title") %></td>
<td><%# Eval("release_date", "{0:d}") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
显示在表格中的列表 (单击该图像获得较大视图)
<LayoutTemplate>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
<tr runat="server" ID="itemPlaceholder" />
</tbody>
</table>
</LayoutTemplate>
第一个原因是名称匹配得非常好。并且。该控件并不呈现其自身的 HTML,而是用 ItemTemplate 的内容取代,因此假设控件除在层次结构中保留位置以外无不论什么其他目的,这是更合乎逻辑的选择。
下面是绑定到同样电影数据源的 ListView 演示样例,但这次不是表格,是带有标题和发行日期的电影显示在项目符号列表中(结果列表如图 3 所看到的):
同样列表。不同格式 (单击该图像获得较大视图)
<asp:ListView runat="server"
ID="_simpleTableListView"
DataSourceID="_moviesDataSource">
<LayoutTemplate>
<ul>
<asp:PlaceHolder runat="server"
ID="itemPlaceholder" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li><%# Eval("title") %>,
<%# Eval("release_date", "{0:d}") %> </li>
</ItemTemplate>
</asp:ListView>
实际上 Microsoft 在 2006 年 4 月已公布名为“CSS 控件适配器”的工具包,该工具包为几个全然由 CSS 驱动的控件(包含 GridView)提供了可选呈现机制,帮助纠正该问题(有关具体信息,请參见 2006 年 10 月的“很 ASP.NET”专栏 msdn.microsoft.com/msdnmag/issues/06/10/ExtremeASPNET)。
这些备用呈现机制从未并入完整版其中,所以须要单独安装且缺少设计人员支持。
一种常见的情形是开发者为特定页面手动预先设计。通常包括 HTML 和 CSS。採用传统的 GridView 呈现数据表的特定设计总是非常难保证正确,由于 GridView 类仅提供用于改动 HTML 结果的有限挂接集。
图 4 所看到的的方式显示,并使用由 .htm 和 .css 文件组成的设计,如
图 5中所看到的。
HTML
<div class="PrettyGrid">
<table cellpadding="0" cellspacing="0" summary="">
<thead>
<tr>
<th scope="col"><a href="http://.">ID</a></th>
<th scope="col"><a href="http://.">Title</a></th>
<th scope="col"><a href="http://.">Release date</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Where the Wild Things Are</td>
<td>12/15/2008</td>
</tr>
<!-- ... -->
</tbody>
</table>
<div class="Pagination">
<span>1</span>
<a href="http://.">2</a>
<a href="http://.">3</a>
</div>
</div>
CSS
.PrettyGrid
{
width: 100%;
}
.PrettyGrid div.Pagination,
.PrettyGrid div.Pagination a,
.PrettyGrid div.Pagination span
{
color: #00FFFF;
background: #284775;
font-weight: normal;
padding: 2px;
}
.PrettyGrid table
{
border: solid 1px #CCCCCC;
width: 100%;
}
/*...*/
表格目标设计 (单击该图像获得较大视图)
图 6 所看到的。终于结果将与全然使用 CSS 设定 HTML 样式时全然一致。
仅更新 HTML 或对应的 CSS 就能够非常easy地改动设计。
<asp:ListView ID="_moviesGrid" runat="server" DataKeyNames="movie_id"
DataSourceID="_moviesDataSource">
<LayoutTemplate>
<div class="PrettyGrid">
<table cellpadding="0" cellspacing="0" summary="">
<thead>
<tr>
<th scope="col"><a href="http://.">ID</a ></th>
<th scope="col"><a href="http://.">Title</a></th>
<th scope="col"><a href="http://.">Release date</a></th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</tbody>
</table>
<div class="Pagination">
<span>1</span>
<a href="http://.">2</a>
<a href="http://.">3</a>
</div>
</div>
</LayoutTemplate>
<AlternatingItemTemplate>
<tr class="Alternate">
<td><asp:Label ID="movie_idLabel" runat="server"
Text='<%# Eval("movie_id") %>' /></td>
<td><asp:Label ID="titleLabel" runat="server"
Text='<%# Eval("title") %>' /></td>
<td><asp:Label ID="release_dateLabel" runat="server"
Text='<%# Eval("release_date", "{0:d}") %>' /> </td>
</tr>
</AlternatingItemTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="movie_idLabel" runat="server"
Text='<%# Eval("movie_id") %>' /></td>
<td><asp:Label ID="titleLabel" runat="server"
Text='<%# Eval("title") %>' /></td>
<td><asp:Label ID="release_dateLabel" runat="server"
Text='<%# Eval("release_date", "{0:d}") %>' /> </td>
</tr>
</ItemTemplate>
</asp:ListView>
我们先分页,然后再排序。
分页控件一个常见的应用是在数据网格的顶部和底部提供分页界面,这样用户不必滚动网格就可以导航到下一页——DataPager 能够非常easy做到这一点。
<asp:ListView ID="_moviesGrid"
runat="server" DataKeyNames="movie_id"
DataSourceID="_moviesDataSource">
<LayoutTemplate>
<!-- ... -->
<div class="Pagination">
<asp:DataPager ID="_moviesGridDataPager" runat="server">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</div>
</LayoutTemplate>
</asp:ListView>
还有一种方法是将 DataPager 放在页面的其他位置,并通过将其 PagedControlID 设置为关联 ListView 的 ID 以便与 ListView 关联。
- NumericPagerField 显示 1 2 3… 分页界面。
- NextPreviousPagerField 显示“Next”(下一页)、“Previous”(上一页)、“First”(第一页)和“Last”(最后一页)button在行间往复。
- TemplatePagerField 让您使用 PagerTemplate 定义精确设计和实现分页接口的功能。
public interface IPageableItemContainer
{
event EventHandler<PageEventArgs> TotalRowCountAvailable;
void SetPageProperties(int startRowIndex, int maximumRows,
bool databind);
int MaximumRows { get; }
int StartRowIndex { get; }
}
ListView、DataPager 和 DataSource 之间的关系 (单击该图像获得较大视图)
DataPager 将随后调用 ListView 的 SetPageProperties 方法设置初始行索引和要返回的最大行数。
<asp:DataPager ID="_moviesGridDataPager" runat="server"
QueryStringField="pageNum" >
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
每一个命令都会启动 ListView 中的对应操作——这样假设希望为 ListView 加入排序,那仅仅须要在 LayoutTemplate 中放置一个button(图 8 的演示样例中使用 LinkButton)。将其 CommandName 属性设置为 Sort,并将 CommandArgument 设置为希望数据源进行排序的列名称。在图 8 中。我将曾经网格中每列的静态标题链接改动为可单击的链接,通过单击该链接能够请求 ListView 依据该列对数据进行排序。
<asp:ListView ID="_moviesGrid" runat="server" DataKeyNames="movie_id"
DataSourceID="_moviesDataSource">
<LayoutTemplate>
<div class="PrettyGrid">
<table cellpadding="0" cellspacing="0" summary="">
<thead>
<tr>
<th scope="col">
<asp:LinkButton ID="_movieIdSortLink"
CommandName="Sort" CommandArgument="movie_id"
runat="server">ID</asp:LinkButton>
</th>
<th scope="col">
<asp:LinkButton ID="_titleSortLink"
CommandName="Sort" CommandArgument="title"
runat="server">Title</asp:LinkButton>
</th>
<th scope="col">
<asp:LinkButton ID="_releaseDateSortLink"
CommandName="Sort" CommandArgument="release_date"
runat="server">Release date</asp:LinkButton>
</th>
</tr>
</thead>
<!-- ... -->
</LayoutTemplate>
</asp:ListView>
DataList 是表格格式的控件。它能够在所呈现数据表的每一个单元格中呈现单行数据。
您能够通过设置 RepeatColumns 属性来控制将基础数据集的多少行归入单个表格行中。
图 9 显示了 ListView 中 LayoutTemplate、GroupTemplate 和 ItemTemplate 元素之间的关系。GroupTemplate 能够为基础数据集中每 n 个元素指定外围 HTML,当中 n 的值由 ListView 的 GroupItemCount 属性指定。
ListView 中的模板 (单击该图像获得较大视图)
图 10 中的 ListView 显示了怎样通过将 GroupTemplate 定义为搜索行,并将 ItemTemplate 设为仅布局单元格。以在表格的每一行中显示来自数据库的四个电影。结果如
图 11 所看到的。
<asp:ListView ID="_groupListView" runat="server"
DataKeyNames="movie_id" DataSourceID="_moviesDataSource"
GroupItemCount="4" >
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</tr>
</GroupTemplate>
<LayoutTemplate>
<table>
<asp:PlaceHolder ID="groupPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<td>
movie_id:
<asp:Label ID="_movie_idLabel" runat="server"
Text='<%# Eval("movie_id") %>' /> <br />
title:
<asp:Label ID="_titleLabel" runat="server"
Text='<%# Eval("title") %>' /> <br />
release_date:
<asp:Label ID="_release_dateLabel" runat="server"
Text='<%# Eval("release_date", "{0:d}") %>' /> <br />
<br />
</td>
</ItemTemplate>
</asp:ListView>
结果 Web 页面中的 GroupTemplate 行 (单击该图像获得较大视图)
用于本文的下载代码包括实现了分页和排序功能的演示样例供您參考。
请将您想向 Fritz 询问的问题和提出的意见发送至 xtrmaspt@microsoft.com.
《Essential ASP.NET》和《Essential ASP.NET 2.0》笔者。
要理解这一点笔者,请登录 pluralsight.com/fritz。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117828.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...