【ASP.NET】ItemDataBound之repeater 和 listview
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" id="trRow" >这样就可以在后台修改改行的样式；代码如下：
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" id="trRow" >需要注意的一点是，在不同的模板中id可以相同，但是不会发生冲突；修改之后在浏览器中查看就可以达到预期的效果了；
例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"; } }
效果如图所示：
如有错误请不吝赐教！
