1 <style type="text/css"> 2 html { 3 background-color:Silver 4 } 5 .content { 6 width:600px; 7 border:soild 1px black; 8 background-color:White; 9 } 10 .movies { 11 border-collapse:collapse; 12 } 13 .movies th,.movies td { 14 padding:10px; 15 border-bottom:1px solid black; 16 } 17 .alternating { 18 background-color:#eeeeee; 19 } 20 </style> 21 22 <div class="content"> 23 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> 24 <HeaderTemplate> <!-- 显示头部 --> 25 <table class="movies"> <!-- table头部声明--> 26 <tr> 27 <th>Movie Title</th> 28 <th>Movie Director</th> 29 <th>Box Office Totals</th> 30 </tr> 31 </HeaderTemplate> 32 <ItemTemplate> <!-- 数据行 --> 33 <tr> 34 <td><%#Eval("Title") %></td> 35 <td><%#Eval("Director") %></td> 36 <td><%#Eval("BoxOfficeTotals","{0:c}") %></td> <!-- 格式化为货币形式 --> 37 </tr> 38 </ItemTemplate> 39 <AlternatingItemTemplate> <!-- 交错行 --> 40 <tr class="alternating"> 41 <td><%#Eval("Title") %></td> 42 <td><%#Eval("Director") %></td> 43 <td><%#Eval("BoxOfficeTotals","{0:c}") %></td> 44 </tr> 45 </AlternatingItemTemplate> 46 <FooterTemplate> <!-- 脚注行 --> 47 </table> <!-- table尾 --> 48 </FooterTemplate> 49 </asp:Repeater> 50 </div>
1 <asp:Repeater id="rptMovies" DataSourceID="srcMovies" Runat="server" 2 OnItemCommand="rptMovies_ItemCommand" OnItemDataBound="rptMovies_ItemDataBound" OnDataBinding="rptMovies_DataBinding"> 3 <HeaderTemplate> 4 <table class="movies"> 5 <tr> <th>Title</th><th>Director</th><th>In Theaters</th> </tr> 6 </HeaderTemplate> 7 <ItemTemplate> 8 <tr> 9 <td><asp:TextBox id="txtTitle" Text=‘<%#Eval("Title")%>‘ Runat="server" /></td> 10 <td><asp:TextBox id="txtDirector" Text=‘<%#Eval("Director")%>‘ Runat="server" /></td> 11 <td><asp:CheckBox id="chkInTheaters" Checked=‘<%#Eval("InTheaters")%>‘Runat="server" /></td> 12 <td><asp:LinkButton id="lnkUpdate" CommandName="Update" Text="Update" Runat="server" /> 13 | <asp:LinkButton id="lnkDelete" CommandName="Delete" Text="Delete" 14 OnClientClick="return confirm(‘Are you sure?‘);" Runat="server" /></td> 15 </tr> 16 </ItemTemplate> 17 <FooterTemplate> 18 <tr> 19 <td><asp:TextBox id="txtTitle" Runat="server" /></td> 20 <td><asp:TextBox id="txtDirector" Runat="server" /></td> 21 <td><asp:CheckBox id="chkInTheaters" Runat="server" /></td> 22 <td><asp:LinkButton id="lnkInsert" CommandName="Insert" Text="Insert" Runat="server" /></td> 23 </tr> 24 </table> 25 </FooterTemplate> 26 </asp:Repeater> 27 28 <asp:SqlDataSource id="srcMovies" ConnectionString="<%$ ConnectionStrings:Movies %>" 29 SelectCommand="SELECT Id,Title,Director,InTheaters FROM Movies" 30 UpdateCommand="UPDATE Movies SET [email protected],[email protected],[email protected] WHERE [email protected]" 31 InsertCommand="INSERT Movies(Title,Director,InTheaters) VALUES(@Title,@Director,@InTheaters)" 32 DeleteCommand="DELETE Movies WHERE [email protected]" Runat="server"> 33 <UpdateParameters> 34 <asp:Parameter Name="Id" /> 35 <asp:Parameter Name="Title" /> 36 <asp:Parameter Name="Director" /> 37 <asp:Parameter Name="InTheaters" /> 38 </UpdateParameters> 39 <InsertParameters> 40 <asp:Parameter Name="Title" /> 41 <asp:Parameter Name="Director" /> 42 <asp:Parameter Name="InTheaters" /> 43 </InsertParameters> 44 <DeleteParameters> 45 <asp:Parameter Name="Id" /> 46 </DeleteParameters> 47 </asp:SqlDataSource>
转自http://www.cnblogs.com/shipfi/archive/2009/10/19/1585703.html
Repeater控件和DataList控件,可以用来一次显示一组数据项。比如,可以用它们显示一个数据表中的所有行。
Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式。DataList控件也由模板驱动,和Repeater不同的是,DataList默认输出是HTML表格,DataList将数据源中的记录输出为HTML表格一个个的单元格。
1. Repeater控件显示数据
要使用Repeater控件显示数据,必须创建ItemTemplate。如下所示:
例1:使用ItemTemplate显示数据
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <div class="movies"> <h1><%#Eval("Title") %></h1> </div> <b>Directed by:</b><%#Eval("Director") %> <br /> <b>Description:</b><%#Eval("Description") %> </ItemTemplate> </asp:Repeater>
以上代码,通过浏览器可以看到,.net不会改变里面的结构,模板里面怎么排列,数据显示也怎么样显示。
它的HTML如下所示:
1 <div class="movies"> 2 <h1>史密斯行动</h1> 3 </div> 4 <b>Directed by:</b>Doug Liman 5 <br /> 6 <b>Description:</b>约翰(布拉德?皮特 Brad Pitt 饰)和 7 <div class="movies"> 8 <h1>暴力街区</h1> 9 </div> 10 <b>Directed by:</b>Luc Besson 11 <br /> 12 <b>Description:</b>卧虎藏龙而又凌乱不堪的13区…
所以,Repeater的灵活性就在这个上面,完全可以自由发挥,想怎么显示就怎么显示。
例如,都可以把它放在Javascript代码中
1 <script type="text/javascript"> 2 photos.push(‘Photos/1.jpg‘); 3 photos.push(‘Photos/2.jpg‘); 4 photos.push(‘Photos/3.jpg‘); 5 photos.push(‘Photos/4.jpg‘); 6 … 7 </script>
以上,photos是一个Javscript数组对象。Repeater生成的数据,最后就像以下这样:
1 <script type="text/javascript"> 2 photos.push(‘Photos/1.jpg‘); 3 photos.push(‘Photos/2.jpg‘); 4 photos.push(‘Photos/3.jpg‘); 5 photos.push(‘Photos/4.jpg‘); 6 … 7 </script>
2. Repeater中使用模板
Repeater支持以下5种模板
● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】
● AlternatingItemTemplate : 对交替数据项进行格式设置
● SeparatorTemplate : 对分隔符进行格式设置
● HeaderTemplate : 对页眉进行格式设置
● FooterTemplate : 对页脚进行格式设置
以上,英文中使用了Formats item from datasource这样的话,就说明Repeater控件主要是用来对数据进行Format的,控制数据怎么样排列,怎么样显示。
Repeater必须使用的是Itemtemplate,其它的类型模板按需添加。
例2:以下通过CSS控制,显示了一个比较不错的列表项:
以上,显示的样式如下所示:
3. Repeater控件的事件处理
Repeater控件有以下事件:
● DataBinding : Repeater控件绑定到数据源时触发
● ItemCommand : Repeater控件中的子控件触发事件时触发
● ItemCreated : 创建Repeater每个项目时触发
● ItemDataBound : Repeater控件的每个项目绑定数据时触发
例3:使用Repeater控件的事件支持编辑、更新、删除
=== 后台代码 ===
1 <script runat=”server”> 2 // The name of the primary key column 3 string DataKeyName = "Id"; 4 5 /// 把每个列的ID存储在ViewState["Keys"]对象中,ViewState["Keys"]是一个HashTable对象。 6 Hashtable Keys 7 { 8 get 9 { 10 if (ViewState["Keys"] == null) 11 ViewState["Keys"] = new Hashtable(); 12 return (Hashtable)ViewState["Keys"]; 13 } 14 } 15 16 /// Repeater控件绑定到数据源时触发 17 /// 每次更新,删除,增加后,都会触发这个事件,Keys中的值都会被清除。 18 /// 在ItemDataBound事件发生时,被新的值填充 19 protected void rptMovies_DataBinding(object sender, EventArgs e) 20 { 21 Keys.Clear(); 22 } 23 24 /// 每个项目绑定数据时触发 25 protected void rptMovies_ItemDataBound(object sender, RepeaterItemEventArgs e) 26 { 27 // 如果是数据列,把ID列取出来,加入到ViewState["Keys"]中 28 // DataBinder.Eval是在运行时计算数据绑定表达式。这样的用法要记住. 29 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==ListItemType.AlternatingItem) 30 { 31 Keys.Add(e.Item.ItemIndex, DataBinder.Eval(e.Item.DataItem, "Id")); 32 } 33 } 34 35 /// 当点击Update,Insert,Delete按钮时触发 36 protected void rptMovies_ItemCommand(object source, RepeaterCommandEventArgs e) 37 { 38 switch (e.CommandName) 39 { 40 case "Update": 41 UpdateMovie(e); 42 break; 43 case "Insert": 44 InsertMovie(e); 45 break; 46 case "Delete": 47 DeleteMovie(e); 48 break; 49 } 50 } 51 /// Update a movie record 52 protected void UpdateMovie(RepeaterCommandEventArgs e) 53 { 54 // 从一个数据项中获得相应的控件 55 TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle"); 56 TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector"); 57 CheckBox chkInTheaters = (CheckBox)e.Item.FindControl("chkInTheaters"); 58 // 填充sqlDataSource的UpdateParameters值 59 srcMovies.UpdateParameters["Id"].DefaultValue = 60 Keys[e.Item.ItemIndex].ToString(); 61 srcMovies.UpdateParameters["Title"].DefaultValue = txtTitle.Text; 62 srcMovies.UpdateParameters["Director"].DefaultValue = txtDirector.Text; 63 srcMovies.UpdateParameters["InTheaters"].DefaultValue = 64 chkInTheaters.Checked.ToString(); 65 // 进行Update 66 srcMovies.Update(); 67 } 68 69 /// Insert a movie record 70 protected void InsertMovie(RepeaterCommandEventArgs e) 71 { 72 // 从一个数据项中获得相应的控件 73 TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle"); 74 TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector"); 75 CheckBox chkInTheaters = (CheckBox)e.Item.FindControl("chkInTheaters"); 76 // 填充sqlDataSource的InsertParameters值 77 srcMovies.InsertParameters["Title"].DefaultValue = txtTitle.Text; 78 srcMovies.InsertParameters["Director"].DefaultValue = txtDirector.Text; 79 srcMovies.InsertParameters["InTheaters"].DefaultValue = 80 chkInTheaters.Checked.ToString(); 81 // Fire the InsertCommand 82 srcMovies.Insert(); 83 } 84 85 /// Delete a movie record 86 protected void DeleteMovie(RepeaterCommandEventArgs e) 87 { 88 // 设置sqlDataSource的DeleteParameters值 89 srcMovies.DeleteParameters["Id"].DefaultValue = Keys[e.Item.ItemIndex].ToString(); 90 // Fire the DeleteCommand 91 srcMovies.Delete(); 92 } 93 </script>
=== 前台页面 ===
1 <asp:Repeater id="rptMovies" DataSourceID="srcMovies" Runat="server" 2 OnItemCommand="rptMovies_ItemCommand" OnItemDataBound="rptMovies_ItemDataBound" OnDataBinding="rptMovies_DataBinding"> 3 <HeaderTemplate> 4 <table class="movies"> 5 <tr> <th>Title</th><th>Director</th><th>In Theaters</th> </tr> 6 </HeaderTemplate> 7 <ItemTemplate> 8 <tr> 9 <td><asp:TextBox id="txtTitle" Text=‘<%#Eval("Title")%>‘ Runat="server" /></td> 10 <td><asp:TextBox id="txtDirector" Text=‘<%#Eval("Director")%>‘ Runat="server" /></td> 11 <td><asp:CheckBox id="chkInTheaters" Checked=‘<%#Eval("InTheaters")%>‘Runat="server" /></td> 12 <td><asp:LinkButton id="lnkUpdate" CommandName="Update" Text="Update" Runat="server" /> 13 | <asp:LinkButton id="lnkDelete" CommandName="Delete" Text="Delete" 14 OnClientClick="return confirm(‘Are you sure?‘);" Runat="server" /></td> 15 </tr> 16 </ItemTemplate> 17 <FooterTemplate> 18 <tr> 19 <td><asp:TextBox id="txtTitle" Runat="server" /></td> 20 <td><asp:TextBox id="txtDirector" Runat="server" /></td> 21 <td><asp:CheckBox id="chkInTheaters" Runat="server" /></td> 22 <td><asp:LinkButton id="lnkInsert" CommandName="Insert" Text="Insert" Runat="server" /></td> 23 </tr> 24 </table> 25 </FooterTemplate> 26 </asp:Repeater> 27 28 <asp:SqlDataSource id="srcMovies" ConnectionString="<%$ ConnectionStrings:Movies %>" 29 SelectCommand="SELECT Id,Title,Director,InTheaters FROM Movies" 30 UpdateCommand="UPDATE Movies SET [email protected],[email protected],[email protected] WHERE [email protected]" 31 InsertCommand="INSERT Movies(Title,Director,InTheaters) VALUES(@Title,@Director,@InTheaters)" 32 DeleteCommand="DELETE Movies WHERE [email protected]" Runat="server"> 33 <UpdateParameters> 34 <asp:Parameter Name="Id" /> 35 <asp:Parameter Name="Title" /> 36 <asp:Parameter Name="Director" /> 37 <asp:Parameter Name="InTheaters" /> 38 </UpdateParameters> 39 <InsertParameters> 40 <asp:Parameter Name="Title" /> 41 <asp:Parameter Name="Director" /> 42 <asp:Parameter Name="InTheaters" /> 43 </InsertParameters> 44 <DeleteParameters> 45 <asp:Parameter Name="Id" /> 46 </DeleteParameters> 47 </asp:SqlDataSource>