【ASP.NET】ItemDataBound之repeater 和 listview

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

listview ItemDataBound

例1：在listview中显示数据库中的信息，数据库截图如下：

实现效果：年龄大于30的一行背景设置为红色；效果如图所示：

首先在主界面添加一个ObjectDataSource，然后添加listview控件，数据源选择ObjectDataSource。（也可以添加SqlDataSource但是笔者发现如果用SqlDataSource不可以在控件中实现数据的增删改查）

然后添加listview控件，选择自己喜欢的样式和布局，启用编辑，插入，删除，分页；在前台会自动的生成一些代码：

View Code

  1         <asp:ListView ID="ListView1" runat="server" DataKeyNames="sno" 
  2             DataSourceID="ObjectDataSource1" InsertItemPosition="LastItem" 
  3             onitemdatabound="ListView1_ItemDataBound">
  4             <AlternatingItemTemplate>
  5                 <tr runat="server" id="trRow">
  6                     <td>
  7                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
  8                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
  9                     </td>
 10                     <td>
 11                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
 12                     </td>
 13                     <td>
 14                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
 15                     </td>
 16                     <td>
 17                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
 18                     </td>
 19                     <td>
 20                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
 21                     </td>
 22                     <td>
 23                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
 24                     </td>
 25                 </tr>
 26             </AlternatingItemTemplate>
 27             <EditItemTemplate>
 28                 <tr style="background-color: #FFCC66;color: #000080;">
 29                     <td>
 30                         <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
 31                         <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
 32                     </td>
 33                     <td>
 34                         <asp:Label ID="snoLabel1" runat="server" Text='<%# Eval("sno") %>' />
 35                     </td>
 36                     <td>
 37                         <asp:TextBox ID="snameTextBox" runat="server" Text='<%# Bind("sname") %>' />
 38                     </td>
 39                     <td>
 40                         <asp:TextBox ID="ssexTextBox" runat="server" Text='<%# Bind("ssex") %>' />
 41                     </td>
 42                     <td>
 43                         <asp:TextBox ID="sageTextBox" runat="server" Text='<%# Bind("sage") %>' />
 44                     </td>
 45                     <td>
 46                         <asp:TextBox ID="saddressTextBox" runat="server" 
 47                             Text='<%# Bind("saddress") %>' />
 48                     </td>
 49                 </tr>
 50             </EditItemTemplate>
 51             <EmptyDataTemplate>
 52                 <table runat="server" 
 53                     style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
 54                     <tr>
 55                         <td>
 56                             未返回数据。</td>
 57                     </tr>
 58                 </table>
 59             </EmptyDataTemplate>
 60             <InsertItemTemplate>
 61                 <tr style="">
 62                     <td>
 63                         <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
 64                         <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
 65                     </td>
 66                     <td>
 67                         <asp:TextBox ID="snoTextBox" runat="server" Text='<%# Bind("sno") %>' />
 68                     </td>
 69                     <td>
 70                         <asp:TextBox ID="snameTextBox" runat="server" Text='<%# Bind("sname") %>' />
 71                     </td>
 72                     <td>
 73                         <asp:TextBox ID="ssexTextBox" runat="server" Text='<%# Bind("ssex") %>' />
 74                     </td>
 75                     <td>
 76                         <asp:TextBox ID="sageTextBox" runat="server" Text='<%# Bind("sage") %>' />
 77                     </td>
 78                     <td>
 79                         <asp:TextBox ID="saddressTextBox" runat="server" 
 80                             Text='<%# Bind("saddress") %>' />
 81                     </td>
 82                 </tr>
 83             </InsertItemTemplate>
 84             <ItemTemplate>
 85                 <tr runat="server" id="trRow" >
 86                     <td>
 87                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
 88                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
 89                     </td>
 90                     <td>
 91                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
 92                     </td>
 93                     <td>
 94                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
 95                     </td>
 96                     <td>
 97                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
 98                     </td>
 99                     <td>
100                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
101                     </td>
102                     <td>
103                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
104                     </td>
105                 </tr>
106             </ItemTemplate>
107             <LayoutTemplate>
108                 <table runat="server">
109                     <tr runat="server">
110                         <td runat="server">
111                             <table ID="itemPlaceholderContainer" runat="server" border="1" 
112                                 style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
113                                 <tr runat="server" style="background-color: #FFFBD6;color: #333333;">
114                                     <th runat="server">
115                                     </th>
116                                     <th runat="server">
117                                         学号</th>
118                                     <th runat="server">
119                                         姓名</th>
120                                     <th runat="server">
121                                         性别</th>
122                                     <th runat="server">
123                                         年龄</th>
124                                     <th runat="server">
125                                         籍贯</th>
126                                 </tr>
127                                 <tr ID="itemPlaceholder" runat="server">
128                                 </tr>
129                             </table>
130                         </td>
131                     </tr>
132                     <tr runat="server">
133                         <td runat="server" 
134                             style="text-align: center;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;">
135                             <asp:DataPager ID="DataPager1" runat="server">
136                                 <Fields>
137                                     <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
138                                         ShowLastPageButton="True" />
139                                 </Fields>
140                             </asp:DataPager>
141                         </td>
142                     </tr>
143                 </table>
144             </LayoutTemplate>
145             <SelectedItemTemplate>
146                 <tr style="background-color: #FFCC66;font-weight: bold;color: #000080;">
147                     <td>
148                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
149                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
150                     </td>
151                     <td>
152                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
153                     </td>
154                     <td>
155                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
156                     </td>
157                     <td>
158                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
159                     </td>
160                     <td>
161                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
162                     </td>
163                     <td>
164                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
165                     </td>
166                 </tr>
167             </SelectedItemTemplate>
168             
169         </asp:ListView>

当启用编辑，插入，删除，分页后。ObjectDataSource控件中也会自动生成一些代码，因为在插入，编辑，删除的过程中，需要访问数据库，通过ObjectDataSource来进行对数据库的修改。ObjectDataSource自动生成的代码如下：

View Code

 1         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
 2             DeleteMethod="Delete" InsertMethod="Insert" 
 3             OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
 4             TypeName="listviewText.dal.DataSetStudentInfoTableAdapters.studentinfoTableAdapter" 
 5             UpdateMethod="Update">
 6             <DeleteParameters>
 7                 <asp:Parameter Name="Original_sno" Type="Int32" />
 8             </DeleteParameters>
 9             <InsertParameters>
10                 <asp:Parameter Name="sno" Type="Int32" />
11                 <asp:Parameter Name="sname" Type="String" />
12                 <asp:Parameter Name="ssex" Type="String" />
13                 <asp:Parameter Name="sage" Type="Int32" />
14                 <asp:Parameter Name="saddress" Type="String" />
15             </InsertParameters>
16             <UpdateParameters>
17                 <asp:Parameter Name="sname" Type="String" />
18                 <asp:Parameter Name="ssex" Type="String" />
19                 <asp:Parameter Name="sage" Type="Int32" />
20                 <asp:Parameter Name="saddress" Type="String" />
21                 <asp:Parameter Name="Original_sno" Type="Int32" />
22             </UpdateParameters>
23         </asp:ObjectDataSource>

listview自动生成的模板：

AlternatingItemTemplate：编辑隔行显示的效果；
EditItemTemplate：编辑模板；“Text='<%# Bind("sage") %>'”意思为双向绑定，因为编辑的时候需要连接数据库，实现数据的编辑；
InsertItemTemplate：插入数据模板；
ItemTemplate：显示数据模板；
LayoutTemplate：编辑控件头部，尾部的模板；里面有行代码是这样写的：“ <tr ID="itemPlaceholder" runat="server">”在这行代码上面相当于<HeaderTemplate>而下面相当于<FooterTemplate>

接下来找到listview的ItemDataBound事件，双击该事件，编辑代码；

由于我们要实现的功能是年龄大于三十的一行显示红色，所以我们要在后台找到改行，因此我们要把相应的行设置为服务端控件；在listview中有一个ItemTemplate模板，我们要把他的<tr>改成<tr runat="server" >这样就可以在后台修改改行的样式；代码如下：

View Code

            if (e.Item.ItemType == ListViewItemType.DataItem)
            {
                ListViewDataItem lvDateItem = (ListViewDataItem)e.Item;
                DataRowView rowView = (DataRowView)lvDateItem.DataItem;
                var student = (listviewText.dal.DataSetStudentInfo.studentinfoRow)rowView.Row;
                if (student.sage > 30)
                {
                    HtmlTableRow trRow = (HtmlTableRow)e.Item.FindControl("trRow");
                    trRow.Attributes["class"] = "warning";
                }
            }

此代码中设置了trRow的额外属性，即css样式；前台的css样式代码如下：

View Code

1     <style type="text/css">
2         .warning{background-color:Red}
3        
4     </style>

然后在浏览器中查看发现竟然不能达到预想的效果，仔细研究才发现原来listview中有一个模板——AlternatingItemTemplate，我们需要在此模板中修改他的<tr>为<tr runat="server" >修改之后在浏览器中查看就可以达到预期的效果了；

例2：在repeater中实现上例的效果：使用相同的数据库；

前面的操作都相同，先添加ObjectDataSource控件，再添加repeater控件，前台代码如下：

View Code

后台代码如下：

View Code

            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
            {
                DataRowView studentView = (DataRowView)e.Item.DataItem;
                var studentRow = (RepeaterText.dal.DataSetStudentInfo.studentinfoRow)studentView.Row;
                if (studentRow.sage > 30)
                {
                    HtmlTableRow trrow = (HtmlTableRow)e.Item.FindControl("trRow");
                    trrow.Attributes["class"] = "woring";
                }
            }