Asp.net--数据绑定控件ListView

一、绑定控件之ListView

      

        在往下进行前我们下来讨论下Asp.net的特性，对于Asp.net微软为我们封装了众多的控件，将控件拖拽到页面上就可以使用控件进行编程，而且值得称道的是有些封装良好的控件可以可视化的设置，然后就可以直接开发使用，就正如今天要说的ListView控件。

       ListView控件是功能最强大的数据绑定控件，它能够可视化的开发实现数据的基本操作增删改，另外还支持排序和分页，只不过其分页的效果必须配合DataPager控件。这种分页对于小数据量来说还是很高效的，但对于大数量来说它的效率就很低下了。

       优点：支持增、删、改、排序，继承了分页功能，还支持自定义模板。
       缺点：影响程序性能，大数据量分页效率低下。

二、控件使用技巧

       

        ListView是.net封装良好的控件，该控件是从.framework 3.5开始集成的，它的操作能够完全通过设计前台代码的方式来实现，能够通过可视化的设计窗口完成设计，并且在不编写后台代码的基础上完成开发。

       对于下面示例中使用到的数据源我们使用SqlDataSource控件来绑定，在该控件中添加了增删改查语句，并在语句中指定了使用的参数。

1.  <!--在为sql语句添加参数时和sql语句的参数添加方法相同，另外如果想要获取行的主键需要在控件中绑定DataKeyNames另外在控件中添加SelectedValue属性即可-->  
2. <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyBlogConnectionString %>" DeleteCommand="DELETE FROM match WHERE (id=@id)" InsertCommand="INSERT INTO match(name) VALUES (@name)" SelectCommand="SELECT match.* FROM match" UpdateCommand="UPDATE match SET name = @name where id=@id">  
3.             <DeleteParameters>  
4.                 <asp:ControlParameter ControlID="ListView1" Name="id" PropertyName="SelectedValue" />  
5.             </DeleteParameters>  
6.             <InsertParameters>  
7.                 <asp:Parameter Name="name" />  
8.             </InsertParameters>  
9.             <UpdateParameters>  
10.                 <asp:Parameter Name="name" />  
11.                 <asp:ControlParameter ControlID="ListView1" Name="id" PropertyName="SelectedValue" />  
12.             </UpdateParameters>  
13. </asp:SqlDataSource>  

        Note：想要在ListView中实现增删改的功能，方法有两种，其一可通过在SqlDataSource中编写增删改语句；其二是前篇博客中提供的传统方法，在后台代码中编写控制。下面的代码示例采用的是第一种方法来实现的，这种方法能够不编写后台代码直接实现了增删改，.NET封装了具体的实现过程。

       表格的基本样式，使用CSS样式来控制显示表格的样式。

1. <style>  
2.         table {  
3.             border:solid 1px #cccccc;  
4.             width:250px;  
5.         }  
6.             table th {  
7.                 color: #00FFFF;  
8.                 background: #284775;  
9.                 font-weight: normal;  
10.                 padding: 2px;  
11.             }  
12.             table tr {  
13.                 border:solid 1px black;  
14.             }  
15.             td {  
16.                 border:groove 1px #ffd800;  
17.             }  
18.           
19. </style>  

  1、编辑

        在编辑时和DataList控件相同是在EditItemplate模板中定义需要的控件，当单击编辑按钮后将会跳转进入编辑界面。需要说明的是LayoutTemplate模板，在下面的示例中都使用了该模板，它里面的内容应该存放用户自定义的内容，即控件封装的功能以外的其它显示内容。

[html] view plain copy

1. <asp:ListView ID="ListView1" runat="server" DataMember="DefaultView" DataSourceID="SqlDataSource1">  
2.             <AlternatingItemTemplate>  
3.                 <tr style="background-color:#cccccc;">  
4.                     <td>  
5.                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />  
6.                     </td>  
7.                     <td>  
8.                         <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />  
9.                     </td>  
10.                     <td>  
11.                         <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />  
12.                     </td>  
13.                 </tr>  
14.             </AlternatingItemTemplate>  
15.             <EditItemTemplate>  
16.                 <tr style="">  
17.                     <td>  
18.                         <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />  
19.                         <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />  
20.                     </td>  
21.                     <td>  
22.                         <asp:Label ID="idLabel1" runat="server" Text='<%# Eval("id") %>' />  
23.                     </td>  
24.                     <td>  
25.                         <asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />  
26.                     </td>  
27.                 </tr>  
28.             </EditItemTemplate>  
29.           
30.             <ItemTemplate>  
31.                 <tr style="">  
32.                     <td>  
33.                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />  
34.                     </td>  
35.                     <td>  
36.                         <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />  
37.                     </td>  
38.                     <td>  
39.                         <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />  
40.                     </td>  
41.                 </tr>  
42.             </ItemTemplate>  
43.             <LayoutTemplate>  
44.                 <table runat="server" cellpadding="0" cellspacing="0">  
45.                     <tr runat="server">  
46.                         <td runat="server">  
47.                             <table id="itemPlaceholderContainer" runat="server" border="0" style="">  
48.                                 <tr runat="server" style="">  
49.                                     <th runat="server"></th>  
50.                                     <th runat="server">id</th>  
51.                                     <th runat="server">name</th>  
52.                                 </tr>  
53.                                 <tr id="itemPlaceholder" runat="server">  
54.                                 </tr>  
55.                             </table>  
56.                         </td>  
57.                     </tr>  
58.                     <tr runat="server">  
59.                         <td runat="server" style="">  
60.                         </td>  
61.                     </tr>  
62.                 </table>  
63.   
64.             </LayoutTemplate>  
65. </asp:ListView>  

          通过上面的前台代码在不编写后台代码的情况下能够轻松实现编辑的功能，开发简单。代码的效果图如下：

   2、删除和插入

        删除的实现时是在Itemplate模板中添加的删除命令来实现的，需要我们体现设计ListView控件的DatakeyNames属性指定控件的主键值，这样在SqlDataSource中使用的属性@id才能生效。

[html] view plain copy

1. <asp:ListView ID="ListView1" runat="server" DataMember="DefaultView" DataSourceID="SqlDataSource1" DataKeyNames="id" InsertItemPosition="LastItem">  
2.     <AlternatingItemTemplate>  
3.         <tr style="">  
4.             <td>  
5.                 <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />  
6.             </td>  
7.             <td>  
8.                 <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />  
9.             </td>  
10.             <td>  
11.                 <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />  
12.             </td>  
13.         </tr>  
14.     </AlternatingItemTemplate>  
15.     <InsertItemTemplate>  
16.         <tr style="">  
17.             <td>  
18.                 <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />  
19.                 <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />  
20.             </td>  
21.             <td> </td>  
22.             <td>  
23.                 <asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />  
24.             </td>  
25.         </tr>  
26.     </InsertItemTemplate>  
27.     <ItemTemplate>  
28.         <tr style="">  
29.             <td>  
30.                 <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />  
31.             </td>  
32.             <td>  
33.                 <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />  
34.             </td>  
35.             <td>  
36.                 <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />  
37.             </td>  
38.         </tr>  
39.     </ItemTemplate>  
40.     <LayoutTemplate>  
41.         <table runat="server">  
42.             <tr runat="server">  
43.                 <td runat="server">  
44.                     <table id="itemPlaceholderContainer" runat="server" border="0" style="">  
45.                         <tr runat="server" style="">  
46.                             <th runat="server"></th>  
47.                             <th runat="server">id</th>  
48.                             <th runat="server">name</th>  
49.                         </tr>  
50.                         <tr runat="server" id="itemPlaceholder">  
51.                         </tr>  
52.                     </table>  
53.                 </td>  
54.             </tr>  
55.             <tr runat="server">  
56.                 <td runat="server" style="">  
57.                 </td>  
58.             </tr>  
59.         </table>  
60.     </LayoutTemplate>  
61. </asp:ListView>  

       示例图：

  3、分页和排序

        分页是在LayoutTemplate模板中添加的DataPager控件来实现的，所以可以通过修改DataPager的属性值来指定显示的导航的样式。
        DataPager的Fields字项里来添加分页的标签，其中NextPreviousPagerField 控制按钮的导航，通过设置它的属性来显示第一页、上一页等的导航按钮，另外可通过设置NumericPagerField 来指定页数导航。

[html] view plain copy

1. <LayoutTemplate>  
2.     <table runat="server">  
3.         <tr runat="server">  
4.             <td runat="server">  
5.                 <table id="itemPlaceholderContainer" runat="server" border="0" style="">  
6.                     <tr runat="server" style="">  
7.                         <th runat="server">id</th>  
8.                         <th runat="server">name</th>  
9.                     </tr>  
10.                     <tr runat="server" id="itemPlaceholder">  
11.                     </tr>  
12.                 </table>  
13.             </td>  
14.         </tr>  
15.         <tr runat="server">  
16.             <td runat="server" style="background-color:#284775;">  
17.                 <asp:DataPager ID="DataPager1" runat="server">  
18.                     <Fields>  
19.                         <asp:NextPreviousPagerField ButtonType="Button"   
20.                             ShowFirstPageButton="True"   
21.                             ShowLastPageButton="True" />  
22.                         <asp:NumericPagerField ButtonType="Button" ButtonCount="3" />  
23.                     </Fields>  
24.                 </asp:DataPager>  
25.             </td>  
26.         </tr>  
27.     </table>  
28.      <!--排序事件，必须放在LayoutTemplate模板中，并且CommandName值为Sort，CommandArgument值为需要排序的数据库字段名称-->  
29.      <asp:Button Text="按id排序" runat="server" CommandName="Sort" CommandArgument="id" />  
30. </LayoutTemplate>  

        另外排序的实现是通过在LayoutTemplate模板中添加asp.net控件来实现的，设置控件CommandName="Sort"，并将CommandArgument赋值为需要排序的数据库字段名称，如下想要对id排序，则CommandArgument="id"。

4、分组

         分组也是ListView控件的一大特色，把数据当做一个个的子集显示到控件上，就好像是分块显示一样，把一部分数据分到一个块中，另一部分分到另一个块中，可通过设置该控件的GroupItemCount来控制数据所分的组数。

     另外在分组时需要在GroupTemplate模板中添加一个ID名称为itemPlaceholder的PlaceHolder控件，然后在LayoutTemplate模板中添加一个ID名称为groupPlaceholder的PlaceHolder控件，这样就能够简单的达到对数据分组的目的。

[html] view plain copy

1. <asp:ListView ID="ListView1"  GroupItemCount="5" runat="server" DataSourceID="SqlDataSource1">  
2.     <GroupTemplate>  
3.         <tr>  
4.             <asp:PlaceHolder runat="server" ID="itemPlaceholder" />                      
5.         </tr>  
6.     </GroupTemplate>  
7.     <GroupSeparatorTemplate>  
8.         <tr id="Tr1" runat="server">  
9.             <td colspan="5"><hr /></td>  
10.         </tr>  
11.     </GroupSeparatorTemplate>  
12.     <LayoutTemplate>  
13.         <table>  
14.             <asp:PlaceHolder ID="groupPlaceholder" runat="server" />  
15.         </table>  
16.     </LayoutTemplate>  
17.     <ItemTemplate>  
18.         <td style="background-color:#ffd800;">  
19.             id:<asp:Label ID="id" runat="server" Text='<%#Eval("id") %>'></asp:Label><br />  
20.             name:<asp:Label ID="Label1" runat="server" Text='<%#Eval("name") %>'></asp:Label><br />  
21.         </td>  
22.                  
23.     </ItemTemplate>  
24. </asp:ListView>  

     分组后的示例图：

三、对比升华

        有关数据绑定的控件已经讨论完成，让我们最后回过头来继续讨论下几种经常使用的数据绑定控件。

         对于数据绑定控件来说Repeater控件是最基础的了，它因为最原始所以受到广大开发人员的喜爱，对有经验程序员来说在开发时往往采用Repeater，因为它使用灵活，稳定，不会产生恶意代码，并且效率高。
         对比几种控件这就不得不说说另外.net平台的厉害之处，针对不同开发程度的人员封装了不同的开发控件，对于菜鸟级别的开发人员来说GridView和ListView应该是他们的首选，因为操作简单，只需要点几个按钮选几个选项就能实现强大的功能。另外对于老程序员来说习惯了编写代码，不敲代码手痒这时候首选当然是Repeater。不多对于学习人员来说还是推荐使用Repeater控件，因为它的功能少，而且灵活，得到学习的机会更多。