• ASP.NET 3.5中的ListView控件和DataPager控件


    今天,我花了几个小时的时间研究了一下ASP.NET 3.5中的ListView控件和DataPager控件。 这两个控件是ASP.NET中新增的、非常受欢迎的控件。 ListView控件集成了DataGridDataListRepeaterGridView控件的所有功能。 它可以像Repeater控件那样,让我们在控件内写任何HTML代码。
    可以说,ListView就是DataGridRepeater的结合体,它既有Repeater控件的开放式模板,又具有DataGrid控件的编辑特性。 这绝对是一个可以引起你兴趣的好东东,因为它给你提供了比DataGird丰富得多的布局手段,同时又具有DataGrid的所有特性。 ListView控件本身并不提供分页功能,但是我们可以通过另一个控件 – DataPager来实现分页的特性。 把分页的特性单独放到另一个控件里,会给我们带来很多好处,比如说可以让别的控件使用它,又比如说我们可以把它放在页面的任何地方。 实质上,DataPager就是一个扩展ListView分页功能的控件。
    ListView控件
    ListView是用来显示数据的,它的使用类似于Repeater控件。 ListView控件中有n多模板,出示如下:
        ·LayoutTemplate 
        ·ItemTemplate 
        ·AlternatingItemTemplate 
        ·SelectedItemTemplate 
        ·EmptyItemTemplate 
        ·EmptyDataTemplate 
        ·ItemSeparatorTemplate 
        ·GroupTemplate 
        ·GroupSeparatorTemplate 
        ·EditItemTemplate 
        ·InsertItemTemplate
    它有很多的模板。 其中有许多新增的模板,如GroupTemplateInsertItemTemplate。 现在我们可能还无法了解GroupTemplate是如何工作的(后面会有介绍),但是对于InsertItemTemplate来说,一看就知道它是用于添加记录的(在之前的DataGird中是没有这个模板的)。
    继续摸索这个控件后,我发现它可以让你在它的模板内写任何HTML标记或控件,这将给我们带来很大的自由度。
    ListView显示数据
    开始,你可以把ListView当作是Repeater来使用,也就是说它是模板驱动型的控件,其中的LayoutTemplateListView的一个布局模板。 参考如下示例:

    <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;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属性,你需要把它设置为ListViewID
    当然你也可以把DataPager控件放到布局模板内。
    把分页功能作为一个单独的控件分离出来是一个非常好的注意 – 它会让我们有更多的布局和 显示上的自由度。 但是,目前的分页控件还是有其局限性的。 它只能结合ListView控件一起工作 – 如果能用在RepeaterGridView上就更好了。 另外,它也是要依赖于ViewState的。
    还有,现在的DataPager控件没有分页事件,也没有SelectedPageIndex属性。
    还有一点需要注意的是,ListView没有内置排序功能。
    ListView中添加和编辑数据
    ListView通过EditItemTemplateInsertItemTemplate来提供编辑数据和添加数据的功能。 这个功能的使用非常类似于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中的InsertUpdate语句是你必须要提供的。 InsertItemTemplateListView中新增的非常受欢迎的模板,我们可以把它的UI设置成与编辑模板相一致。 我们还可以通过InsertItemPosition属性来指定插入模板的位置,它可以是FirstItemLastItemNone。 一般来说,应该把它设置为None,然后通过某个按钮来设置插入模板的显示位置(FirstItemLastItem)。示例代码如下:

    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中写上自己的逻辑,使得一旦执行了UpdateCancel命令就设置InsertItemPositionNone
    分组
    大概介绍一下,最后生成的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> 


    你可以设置ListViewGroupItemCount属性,来指定每组显示多少条记录。

    总结
    ListViewASP.NET中新增的一个非常酷的控件。 在本文中我已经介绍过了,相对于GridView来说它有着更为丰富的布局手段,你可以在它的模板内写任何HTML标记或者控件。 如果你使用过RepeaterGridView的话,那么你将会轻松的上手ListView,不过很明显地,你也将要手写更多的HTML标记。 但是,它也将会给我们带来更多的布局上的自由度,同时也具有编辑、插入等特性。 这就是ASP.NET 3.5给我们带来的非常棒的控件。

  • 相关阅读:
    算法题汇集
    C# WinForm MDI左右分栏 多文档
    DDoS和CC攻击的区别
    搭建java程序写的博客Jpress
    U盘图标DIY方法
    磁盘空间不够用?教你一键清理电脑重复文件Duplicate File Finder
    给WordPress文章页URL赋予.html后缀
    使用七牛云和PicGo搭建图床
    wordpress好用的Markdown插件WP Editor.MD
    虚拟主机、VPS、云服务器三者的区别
  • 原文地址:https://www.cnblogs.com/cpine/p/1552010.html
Copyright © 2020-2023  润新知