• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【ASP.NET】ItemDataBound之repeater 和 listview

原作者: [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";
                }
            }

 

效果如图所示:

如有错误请不吝赐教!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVCRoute的几种配置方法发布时间:2022-07-10
下一篇:
解决ASP.NET的进程帐户没有访问IIS的权限发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap