作者：Rick Strahl 翻译：webabcd
原文地址：http://www.west-wind.com/WebLog/posts/127340.aspx
译文地址：http://www.cnblogs.com/webabcd/archive/2007/08/13/853081.html
[源码下载]
介绍
今天，我花了几个小时的时间研究了一下ASP.NET 3.5中的ListView控件和DataPager控件。这两个控件是ASP.NET中新增的、非常受欢迎的控件。 ListView控件集成了DataGrid、DataList、Repeater和GridView控件的所有功能。它可以像Repeater控件那样，让我们在控件内写任何HTML代码。 可以说，ListView就是DataGrid和 Repeater的结合体，它既有Repeater控件的开放式模板，又具有DataGrid控件的编辑特性。这绝对是一个可以引起你兴趣的好东东，因为它给你提供了比DataGird丰富得多的布局手段，同时又具有DataGrid的所有特性。 ListView控件本身并不提供分页功能，但是我们可以通过另一个控件 – DataPager来实现分页的特性。把分页的特性单独放到另一个控件里，会给我们带来很多好处，比如说可以让别的控件使用它，又比如说我们可以把它放在页面的任何地方。实质上，DataPager就是一个扩展ListView分页功能的控件。
ListView控件
ListView是用来显示数据的，它的使用类似于Repeater控件。 ListView控件中有n多模板，出示如下：
·LayoutTemplate
·ItemTemplate
·AlternatingItemTemplate
·SelectedItemTemplate
·EmptyItemTemplate
·EmptyDataTemplate
·ItemSeparatorTemplate
·GroupTemplate
·GroupSeparatorTemplate
·EditItemTemplate
·InsertItemTemplate
它有很多的模板。 其中有许多新增的模板，如GroupTemplate和InsertItemTemplate。现在我们可能还无法了解GroupTemplate是如何工作的（后面会有介绍），但是对于InsertItemTemplate来说，一看就知道它是用于添加记录的（在之前的DataGird中是没有这个模板的）。
继续摸索这个控件后，我发现它可以让你在它的模板内写任何HTML标记或控件，这将给我们带来很大的自由度。
用ListView显示数据
开始，你可以把ListView当作是Repeater来使用，也就是说它是模板驱动型的控件，其中的LayoutTemplate是ListView的一个布局模板。 参考如下示例：
< asp:ListView ID ="lvItems" runat ="server" DataSourceID ="Data" ItemContainerID ="layoutTemplate" DataKeyNames ="Pk" > < Layouttemplate > < div id ="layoutTemplate" runat ="server" /> </ Layouttemplate > < ItemTemplate > < div class ="itemdisplay" > < b > <% # Eval("Sku") %> </ b >< br /> <% # Eval("Abstract") %> </ div > </ ItemTemplate > </ asp:ListView >LayoutTemplate用来决定包裹着详细内容的容器的标记。你可以在布局模板内放置任何控件，不过它必须要是服务端控件（runat=”server”）。另外，你还需要指定ListView控件的ItemContainerID属性，它用来告知ListView在哪个容器下显示详细内容。在上面的例子中，LayoutTemplate其实并没有起到什么作用，因为它只是将ListView显示的详细内容放到了一个<div />标记下而已。 但是，我们也可以用它来显示复杂的布局，如<table />。 请看下面的例子，它就是用<table />来做ListView显示的详细内容的容器的，并且它还有一个固定表头的功能。
< asp:ListView ID ="lvItemsTable" runat ="server" DataSourceID ="Data" ItemContainerID ="layoutTableTemplate" DataKeyNames ="Pk" > < LayoutTemplate > < div class ="blackborder" style ="overflow-y:auto;height:500px;width:800px;" > < table cellpadding ="5" > < thead style ="position:relative;" > < tr class ="gridheader" style ="height:30px;" > < th style ="position:relative" > Sku </ th >< th style ="position:relative" > Abstract </ th > </ tr > </ thead > < tbody id ="layoutTableTemplate" runat ="server" style ="height:470px;overflow:scroll;overflow-x:hidden;" ></ tbody > </ table > </ div > </ LayoutTemplate > < ItemTemplate > < tr style ="height:0px;" > < td valign ="top" > <% # Eval("Sku") %> </ td > < td valign ="top" > <% # Eval("Abstract") %> </ td > </ tr > </ ItemTemplate > </ asp:ListView >请注意一下上面的布局模板，特别是其中的<TBODY />部分。 ItemTemplate会将其内生成的详细内容插入到<TBODY />之中。 增加分页功能
如果你想为ListView增加分页功能的话，那么就需要使用DataPager控件了。这个分页控件是一个独立的控件，你可以把它放到页面的任何位置，然后使其联到你的ListView控件就可以完成分页的工作了。该分页控件所呈现出来的HTML标记为内联（Inline）元素，所以如果你想精确地设置其位置的话，可以参考下面的代码，为其包裹一个<div />标记。
你可以像下面这样设置分页控件，并可以把其放到页面的任何位置。
< div class ="blockheader" style ="padding:10px;text-align: right;" > < asp:DataPager ID ="Pager" runat ="server" PagedControlID ="lvItems" PageSize ="5" > < Fields > < asp:numericpagerfield ButtonCount ="10" NextPageText ="" PreviousPageText ="" /> < asp:nextpreviouspagerfield FirstPageText ="First" LastPageText ="Last" NextPageText ="Next" PreviousPageText ="Previous" /> </ Fields > </ asp:DataPager > </ div >通过上面的代码你会发现，我们可以通过设置DataPager控件的Fields，从而达到手动设置分页布局的目的。 另外还有一个关键点，就是DataPager控件的PagedControlID属性，你需要把它设置为ListView的ID。
当然你也可以把DataPager控件放到布局模板内。
把分页功能作为一个单独的控件分离出来是一个非常好的注意 – 它会让我们有更多的布局和 显示上的自由度。 但是，目前的分页控件还是有其局限性的。它只能结合ListView控件一起工作 – 如果能用在Repeater或GridView上就更好了。另外，它也是要依赖于ViewState的。
还有，现在的DataPager控件没有分页事件，也没有SelectedPageIndex属性。
还有一点需要注意的是，ListView没有内置排序功能。
在ListView中添加和编辑数据
ListView通过EditItemTemplate和InsertItemTemplate来提供编辑数据和添加数据的功能。 这个功能的使用非常类似于GridView的编辑特性的使用，只不过它用的都是自定义模板。
< asp:ListView ID ="lvItems" runat ="server" DataSourceID ="Data" ItemContainerID ="layoutTemplate" DataKeyNames ="Pk" InsertItemPosition ="None" > < Layouttemplate > < div id ="layoutTemplate" runat ="server" /> </ Layouttemplate > < ItemTemplate > < div class ="itemdisplay" > < b > <% # Eval("Sku") %> </ b >< br /> <% # Eval("Abstract") %> </ div > < asp:Button ID ="Button1" runat ="server" CommandName ="Edit" Text ="Edit" /> < asp:Button ID ="Button2" runat ="server" CommandName ="Delete" Text ="Delete" /> </ ItemTemplate > < AlternatingItemTemplate > < div class ="itemdisplayalternate" > < b > <% # Eval("Sku") %> </ b >< br /> <% # Eval("Abstract") %> </ div > < asp:Button ID ="Button1" runat ="server" CommandName ="Edit" Text ="Edit" /> < asp:Button ID ="Button2" runat ="server" CommandName ="Delete" Text ="Delete" /> </ AlternatingItemTemplate > < EditItemTemplate > < div class ="gridalternate" > Sku: < asp:TextBox runat ="server" ID ="txtSku" Text ='<%# Bind("Sku") % > '> </ asp:TextBox > < br /> Abstract: < asp:TextBox runat ="server" id ="txtAbstract" Text ='<%# Bind("Abstract") % > '> </ asp:TextBox > < br /> < asp:Button ID ="Button3" runat ="server" CommandName ="Update" Text ="Update" /> < asp:Button ID ="Button4" runat ="server" CommandName ="Cancel" Text ="Cancel" />< br /> </ div > </ EditItemTemplate > < InsertItemTemplate > < div style ="background:Yellow" > < asp:TextBox runat ="server" ID ="txtSku" Text ='<%# Bind("Sku") % > '> </ asp:TextBox > < br /> < asp:TextBox runat ="server" id ="txtAbstract" Text ='<%# Bind("Abstract") % > '> </ asp:TextBox > < br /> </ div > < asp:Button ID ="Button3" runat ="server" CommandName ="Inser" Text ="Insert" /> < asp:Button ID ="Button4" runat ="server" CommandName ="Cancel" Text ="Cancel" />< br /> </ InsertItemTemplate > </ asp:ListView >在本例中我使用的是SqlDataSource（我比较懒），SqlDataSource中的Insert和Update语句是你必须要提供的。 InsertItemTemplate是ListView中新增的非常受欢迎的模板，我们可以把它的UI设置成与编辑模板相一致。我们还可以通过InsertItemPosition属性来指定插入模板的位置，它可以是FirstItem、LastItem或None。一般来说，应该把它设置为None，然后通过某个按钮来设置插入模板的显示位置（FirstItem或LastItem）。示例代码如下：
protected void btnAddItem_Click( object sender, EventArgs e) { this.lvItems.InsertItemPosition = InsertItemPosition.FirstItem;} protected void lvItems_ItemCommand( object sender, ListViewCommandEventArgs e) { if (e.CommandName == "Update") { TextBox tb = e.Item.FindControl("txtSku") as TextBox; this.lvItems.InsertItemPosition = InsertItemPosition.None; Response.Write(tb.Text); } if (e.CommandName == "Cancel") { this.lvItems.InsertItemPosition = InsertItemPosition.None; } }你可以在OnItemCommand中写上自己的逻辑，使得一旦执行了Update或Cancel命令就设置InsertItemPosition为None。
分组
大概介绍一下，最后生成的HTML代码会先用GroupTemplate分组，然后再以LayoutTemplate做容器包裹起来。
< Layouttemplate > < div id ="groupContainer" runat ="server" > </ div > </ Layouttemplate > < GroupTemplate > < div class ="blockheader" style ="height:23px;padding:7px" > Group Header: </ div > < div id ="layoutTemplate" runat ="server" /> </ GroupTemplate >你可以设置ListView的GroupItemCount属性，来指定每组显示多少条记录。
总结
ListView 是ASP.NET中新增的一个非常酷的控件。在本文中我已经介绍过了，相对于GridView来说它有着更为丰富的布局手段，你可以在它的模板内写任何HTML标记或者控件。如果你使用过Repeater和GridView的话，那么你将会轻松的上手ListView，不过很明显地，你也将要手写更多的HTML标记。但是，它也将会给我们带来更多的布局上的自由度，同时也具有编辑、插入等特性。 这就是ASP.NET 3.5给我们带来的非常棒的控件。
转载于:https://www.cnblogs.com/binyong/archive/2009/05/10/1453640.html
