欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解ASP.NET-----Repeater数据控件的用法总结

程序员文章站 2023-12-30 22:30:58
一、repeater控件的用法流程及实例: 1、首先建立一个网站,新建一个网页index.aspx。 2、添加或者建立app_data数据文件,然后将用到的数据库文件放...

一、repeater控件的用法流程及实例:

1、首先建立一个网站,新建一个网页index.aspx。

2、添加或者建立app_data数据文件,然后将用到的数据库文件放到app_data文件夹中。

3、打开数据库企业管理器,数据库服务器为local(.),然后将app_data文件夹中的数据库附加到数据库服务器中。

4、添加ling to  sql类。

5、打开视图,服务器资源管理器,右击数据库服务器,选择添加连接,然后选择数据库服务器、数据库类型,及数据库表,然后完成。

6、将需要用到的表,全部选中,然后拖动到.dbml为后缀的文件中,然后保存。到这一步,数据表的附加及与网站的连接就完成了。

目标:通过使用repeater数据控件,让数据表中的数据在表格中显示。

1、添加样式文件,然后在样式文件中,书写表格的样式代码。

2、在index.aspx的设计模式下,插入表格,通常插入两行(一行为标题行,一行为内容行),因为repeater控件会自动循环的。然后在源代码界面中,将刚插入的表格的第一行的单元格改为,标题单元格,即将<td>改为<th>。

3、选中表格,然后选择格式,然后选择附加样式表。接下来,需要将源代码中的头部中样式代码删除,将行样式删除,并且书写新建的样式表中的类或这id到表格中。

4、然后,将光标放到table前面,双击repeater控件,这样repeater控件的代码就添加到了table代码的前面,然后分别为repeater控件添加头部模版(<headertemplate></headertemplate>  )、列表模版(<itemtemplate></itemtemplate>)和尾部模版( <footertemplate> </footertemplate>)。

注意:

头部模版放置表格开始及第一行标题行(<table><tr><th></th></tr>);列表模版放置表格第二行(<tr></tr>);尾部模版放置表个结束(</table>)。

插入表格时只需插入两行即可,显示数据时是根据数据库表循环显示的。项目模板,会进行循环显示,放置表格第二行。

5、然后在标题行的单元格中书写将要显示的数据库中字段的别名,在内容行的单元格中书写数据库中的字段名,方式为:

<td><%#eval("数据库字段名") %></td>

核心代码为:

<body>
  <form id="form1" runat="server">
  <div>
  <!--光标放到table前面,双击repeater控件,三个缺一不可-->
    <asp:repeater id="repeater1" runat="server">
    <headertemplate><!--头部模板,放表格开始及第一行标题-->
    <table class="ts"><!--插入表格时只需插入两行即可,显示数据时是根据数据库表循环显示的-->
      <tr>
        <th>
          学号</th>
        <th>
          姓名</th>
        <th>
          性别</th>
        <th>
          籍贯</th>
        <th>
          年龄</th>
      </tr></headertemplate>  
    <itemtemplate><!--项目模板,会进行循环显示,放置表格第二行-->
    <tr>
        <td>
          <%#eval("number") %> <!--html中插入其他代码需要用<% %>括起来,eval("数据库中的字段名")-->
          </td>
        <td>
         <%#eval("name")%> </td>
        <td>
          <%#eval("sex")%> </td>
        <td>
           <%#eval("place")%></td>
        <td>
          <%#eval("age")%> </td>
      </tr>
    </itemtemplate>    
    <footertemplate><!--底部模板-->
    </table>    <!--表格结束部分-->
    </footertemplate>  
    </asp:repeater>
  </div>
  </form>
</body>

注意:

html中插入其他代码需要用<% %>括起来。

6、然后在index.aspx.cs的page_load()事件中绑定数据源。

核心代码为:

public partial class citynumber : system.web.ui.page
{
  dataclassesdatacontext dc = new dataclassesdatacontext();
  protected void page_load(object sender, eventargs e)
  {

    var query = from c in dc.city select c;
    repeater1.datasource = query;
    repeater1.databind();
  }
}

7、运行index.aspx页面即可看到数据库中各字段信息。

二、通过table显示数据库中的字段时,为字段添加超链接。

1、新建两个页面,index.aspx 页面和cities.aspx页面。

index.aspx页面代码:

<body>
  <asp:repeater id="repeater1" runat="server">
  <headertemplate>
  <table class="ts">
    <tr>
      <th>
        省份名称</th>
      <th>
        省份编号</th>
    </tr>
  </headertemplate>
  <itemtemplate>
  <tr>
      <td>
        <a href='cities.aspx?pro=<%#eval("proid") %>' target="_blank"><%#eval("proname") %></a></td><!--添加超链接,超链接放到内容的两边-->
      <td>
      <%#eval("proid")%></td>
    </tr>
  </itemtemplate>
  <footertemplate>
  </table>
  </footertemplate>
  </asp:repeater>
  <form id="form1" runat="server">
  <div>
  </div>
  </form>
</body>

index.aspx.cs中的代码:

public partial class index : system.web.ui.page
{
  dataclassesdatacontext dc = new dataclassesdatacontext();
  protected void page_load(object sender, eventargs e)
  {

    var query = from c in dc.province select c;
    repeater1.datasource = query;
    repeater1.databind();
  }
}

cities.aspx页面中的代码:

<body>
  <form id="form1" runat="server">
  <div>
  
    <asp:gridview id="gridview1" runat="server" cellpadding="4" forecolor="#333333" 
      gridlines="none" width="909px">
      <footerstyle backcolor="#507cd1" font-bold="true" forecolor="white" />
      <rowstyle backcolor="#eff3fb" />
      <pagerstyle backcolor="#2461bf" forecolor="white" horizontalalign="center" />
      <selectedrowstyle backcolor="#d1ddf1" font-bold="true" forecolor="#333333" />
      <headerstyle backcolor="#507cd1" font-bold="true" forecolor="white" />
      <editrowstyle backcolor="#2461bf" />
      <alternatingrowstyle backcolor="white" />
    </asp:gridview>
  
  </div>
  </form>
</body>

cities.aspx.cs页面中的代码:

public partial class cities : system.web.ui.page
{
  dataclassesdatacontext dc = new dataclassesdatacontext();
  protected void page_load(object sender, eventargs e)
  {
    int id =convert.toint32(request.querystring["pro"].tostring());
    var query = from c in dc.city where c.proid == id select c;
    gridview1.datasource = query;
    gridview1.databind();

  }
}

然后运行index.aspx页面,通过单击超链接就跳转到了cities.aspx,在该页面显示信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: