asp:repeater控件使用-阿里云开发者社区

asp:repeater控件使用

2017-11-15 1278

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

repeater.aspx:


 
 

  
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %> 

  
   

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <title>创建一个基本的Repeater控件</title> 

  
  <style type="text/css"> 

  
  *{padding:0;margin:0;} 

  
  .section1,.section2 

  
  { 

  
      padding:10px 0; 

  
      color:#369;  

  
  } 

  
  .section2 

  
  { 

  
      background-color:#f0f6f9; 

  
  } 

  
  </style> 

  
  </head> 

  
  <body> 

  
  <asp:repeater  

  
      id="repDepts"  

  
      runat="server"  

  
  > 

  
      <headertemplate> 

  
          <h3>下面是所有雇员的一个列表:</h3> 

  
      </headertemplate> 

  
      <itemtemplate> 

  
          <div class="section1"> 

  
          <%# "<b>部门:</b> " 

  
              + DataBinder.Eval(Container.DataItem, "ID") 

  
              + " - "  

  
              + DataBinder.Eval(Container.DataItem, "FirstName")  

  
          %> 

  
          </div> 

  
      </itemtemplate> 

  
      <alternatingitemtemplate> 

  
          <div class="section2"> 

  
          <%# "<b>部门:</b> " 

  
              + DataBinder.Eval(Container.DataItem, "ID") 

  
              + " - "  

  
              + DataBinder.Eval(Container.DataItem, "FirstName")  

  
          %> 

  
          </div> 

  
      </alternatingitemtemplate> 

  
      <separatortemplate> 

  
          <div>--------------------------------------------------</div> 

  
      </separatortemplate> 

  
      <footertemplate> 

  
          <div id="lstFoot">全部记录都已显示.</div> 

  
      </footertemplate>     

  
  </asp:repeater> 

  
  </body> 

  
  </html>

repeater.aspx.cs:


 
 

  
  using System; 

  
  using System.Data; 

  
  using System.Data.OleDb; 

  
   

  
  namespace MyWebservice 

  
  { 

  
      public partial class repeater : System.Web.UI.Page 

  
      { 

  
          protected void Page_Load(object sender, EventArgs e) 

  
          { 

  
              if(!IsPostBack) 

  
              { 

  
                  OleDbConnection DBConn = new OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA SOURCE=" + Server.MapPath("App_Data/EmployeeDatabase.mdb")); 

  
                  OleDbDataAdapter DBCommand = new OleDbDataAdapter("Select ID, FirstName From Employee Order By FirstName", DBConn); 

  
                  DataSet ds=new DataSet(); 

  
                  DBCommand.Fill(ds, "Employee"); 

  
                  repDepts.DataSource = ds.Tables["Employee"].DefaultView; 

  
                  repDepts.DataBind(); 

  
              } 

  
          } 

  
      } 

  
  }

图片:

参考:

http://www.java2s.com/Code/ASP/ADO.net-Database/BinddatatoaspRepeaterwithitemtemplatealternatingitemtemplateseparatortemplateandfootertemplate.htm

当然了可以很轻松的实现导航菜单的结构，repeater是个完全基于模板驱动的一个控件，不生成多余代码，完整靠我们自己来布局，非常自由:


 
 

  
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %> 

  
   

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <title>创建一个基本的Repeater控件</title> 

  
  <style type="text/css"> 

  
  *{padding:0;margin:0;} 

  
  ul,li{list-style:none;} 

  
  .hMenu 

  
  { 

  
      background-color:#090; 

  
      overflow:hidden; 

  
      width:500px; 

  
      margin:10px auto; 

  
  } 

  
  .hMenu li 

  
  { 

  
      float:left; 

  
      padding:5px; 

  
  } 

  
  </style> 

  
  </head> 

  
  <body> 

  
  <asp:repeater  

  
      id="repDepts"  

  
      runat="server"  

  
  > 

  
      <headertemplate> 

  
          <ul class="hMenu"> 

  
      </headertemplate> 

  
      <itemtemplate> 

  
          <li> 

  
          <%# DataBinder.Eval(Container.DataItem, "OpName") %> 

  
          </li> 

  
      </itemtemplate> 

  
      <separatortemplate> 

  
          <li>|</li> 

  
      </separatortemplate> 

  
      <footertemplate> 

  
          </ul> 

  
      </footertemplate>     

  
  </asp:repeater> 

  
  </body> 

  
  </html>

也可以实现table表格：


 
 

  
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %> 

  
   

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <title>创建一个基本的Repeater控件</title> 

  
  <style type="text/css"> 

  
  *{padding:0;margin:0;} 

  
  #myTable 

  
  { 

  
       

  
  } 

  
  #myTable th,#myTable td 

  
  { 

  
      border:1px solid #c00;    

  
  } 

  
  #myTable th 

  
  {   background-color:#fc0;} 

  
  #myTable .altCell 

  
  {   background-color:#fff0f0;color:#c00;} 

  
  </style> 

  
  </head> 

  
  <body> 

  
  <asp:repeater  

  
      id="repDepts"  

  
      runat="server"  

  
  > 

  
      <headertemplate> 

  
          <table id="myTable"> 

  
          <thead> 

  
          <tr> 

  
              <th>标识</th><th>号码</th><th>名称</th> 

  
          </tr> 

  
          </thead> 

  
          <tbody> 

  
          <tr> 

  
      </headertemplate> 

  
      <itemtemplate> 

  
          <td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
      </itemtemplate> 

  
      <AlternatingItemTemplate> 

  
          <td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
      </AlternatingItemTemplate> 

  
      <separatortemplate> 

  
          </tr><tr> 

  
      </separatortemplate> 

  
      <footertemplate>        </tr> 




  


  


  


  
          </tbody> 

  


  


  


  
   

  


  


  


  
         </table> 

  


  


  


  
      </footertemplate>     

  


  


  


  
  </asp:repeater> 

  


  


  


  
  </body> 

  


  


  


  
  </html>

当然交替也可以这样简单些:


 
 

  
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %> 

  
   

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
  <title>创建一个基本的Repeater控件</title> 

  
  <style type="text/css"> 

  
  *{padding:0;margin:0;} 

  
  #myTable 

  
  { 

  
       

  
  } 

  
  #myTable th,#myTable td 

  
  { 

  
      border:1px solid #c00;    

  
  } 

  
  #myTable th 

  
  {   background-color:#fc0;} 

  
  #myTable .altRow 

  
  {   background-color:#fff0f0;color:#c00;} 

  
  </style> 

  
  </head> 

  
  <body> 

  
  <asp:repeater  

  
      id="repDepts"  

  
      runat="server"  

  
  > 

  
      <headertemplate> 

  
          <table id="myTable"> 

  
          <thead> 

  
          <tr> 

  
              <th>标识</th><th>号码</th><th>名称</th> 

  
          </tr> 

  
          </thead> 

  
          <tbody> 

  
      </headertemplate> 

  
      <itemtemplate> 

  
          <tr> 

  
              <td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
          </tr> 

  
      </itemtemplate> 

  
      <AlternatingItemTemplate> 

  
          <tr class="altRow"> 

  
              <td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
          </tr> 

  
      </AlternatingItemTemplate> 

  
      <footertemplate> 

  
          </tbody> 

  
         </table> 

  
      </footertemplate>     

  
  </asp:repeater> 

  
  </body> 

  
  </html>

我们可以在每一行的开始加上序号，如下所示:

模板修改如下:


 
 

  
  <itemtemplate> 

  
      <tr> 

  
          <td><%# i++ %></td><td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
      </tr> 

  
  </itemtemplate> 

  
  <AlternatingItemTemplate> 

  
      <tr class="altRow"> 

  
          <td><%# i++ %></td><td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td> 

  
      </tr> 

  
  </AlternatingItemTemplate>

后置类中添加如下的保护变量，以便派生的页面可以访问到变量i:


 
 

  
  protected  int i = 1;

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/362079，如需转载请自行联系原作者

asp:repeater控件使用

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

asp:repeater控件使用

热门文章

最新文章

相关电子书