詳解ASP.NET-----Repeater數(shù)據(jù)控件的用法總結(jié)

更新時(shí)間：2016年11月30日 17:26:02 作者：沁園春

本篇文章主要介紹了ASP.NET--Repeater數(shù)據(jù)控件的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

一、Repeater控件的用法流程及實(shí)例：

1、首先建立一個(gè)網(wǎng)站，新建一個(gè)網(wǎng)頁(yè)index.aspx。

2、添加或者建立APP_Data數(shù)據(jù)文件，然后將用到的數(shù)據(jù)庫(kù)文件放到APP_Data文件夾中。

3、打開(kāi)數(shù)據(jù)庫(kù)企業(yè)管理器，數(shù)據(jù)庫(kù)服務(wù)器為local（.），然后將APP_Data文件夾中的數(shù)據(jù)庫(kù)附加到數(shù)據(jù)庫(kù)服務(wù)器中。

4、添加Ling to SQL類。

5、打開(kāi)視圖，服務(wù)器資源管理器，右擊數(shù)據(jù)庫(kù)服務(wù)器，選擇添加連接，然后選擇數(shù)據(jù)庫(kù)服務(wù)器、數(shù)據(jù)庫(kù)類型，及數(shù)據(jù)庫(kù)表，然后完成。

6、將需要用到的表，全部選中，然后拖動(dòng)到.dbml為后綴的文件中，然后保存。到這一步，數(shù)據(jù)表的附加及與網(wǎng)站的連接就完成了。

目標(biāo)：通過(guò)使用Repeater數(shù)據(jù)控件，讓數(shù)據(jù)表中的數(shù)據(jù)在表格中顯示。

1、添加樣式文件，然后在樣式文件中，書(shū)寫(xiě)表格的樣式代碼。

2、在index.aspx的設(shè)計(jì)模式下，插入表格，通常插入兩行（一行為標(biāo)題行，一行為內(nèi)容行），因?yàn)镽epeater控件會(huì)自動(dòng)循環(huán)的。然后在源代碼界面中，將剛插入的表格的第一行的單元格改為，標(biāo)題單元格，即將<td>改為<th>。

3、選中表格，然后選擇格式，然后選擇附加樣式表。接下來(lái)，需要將源代碼中的頭部中樣式代碼刪除，將行樣式刪除，并且書(shū)寫(xiě)新建的樣式表中的類或這ID到表格中。

4、然后，將光標(biāo)放到table前面，雙擊repeater控件，這樣Repeater控件的代碼就添加到了Table代碼的前面，然后分別為Repeater控件添加頭部模版（<HeaderTemplate></HeaderTemplate> ）、列表模版（<ItemTemplate></ItemTemplate>）和尾部模版（ <FooterTemplate> </FooterTemplate>）。

注意：

頭部模版放置表格開(kāi)始及第一行標(biāo)題行(<table><tr><th></th></tr>)；列表模版放置表格第二行(<tr></tr>)；尾部模版放置表個(gè)結(jié)束（</table>）。

插入表格時(shí)只需插入兩行即可，顯示數(shù)據(jù)時(shí)是根據(jù)數(shù)據(jù)庫(kù)表循環(huán)顯示的。項(xiàng)目模板，會(huì)進(jìn)行循環(huán)顯示，放置表格第二行。

5、然后在標(biāo)題行的單元格中書(shū)寫(xiě)將要顯示的數(shù)據(jù)庫(kù)中字段的別名，在內(nèi)容行的單元格中書(shū)寫(xiě)數(shù)據(jù)庫(kù)中的字段名，方式為：

<td><%#Eval("數(shù)據(jù)庫(kù)字段名") %></td>

核心代碼為：

<body>
  <form id="form1" runat="server">
  <div>
  <!--光標(biāo)放到table前面，雙擊repeater控件，三個(gè)缺一不可-->
    <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate><!--頭部模板,放表格開(kāi)始及第一行標(biāo)題-->
    <table class="ts"><!--插入表格時(shí)只需插入兩行即可，顯示數(shù)據(jù)時(shí)是根據(jù)數(shù)據(jù)庫(kù)表循環(huán)顯示的-->
      <tr>
        <th>
          學(xué)號(hào)</th>
        <th>
          姓名</th>
        <th>
          性別</th>
        <th>
          籍貫</th>
        <th>
          年齡</th>
      </tr></HeaderTemplate>  
    <ItemTemplate><!--項(xiàng)目模板，會(huì)進(jìn)行循環(huán)顯示，放置表格第二行-->
    <tr>
        <td>
          <%#Eval("number") %> <!--HTMl中插入其他代碼需要用<% %>括起來(lái)，Eval("數(shù)據(jù)庫(kù)中的字段名")-->
          </td>
        <td>
         <%#Eval("name")%> </td>
        <td>
          <%#Eval("sex")%> </td>
        <td>
           <%#Eval("place")%></td>
        <td>
          <%#Eval("age")%> </td>
      </tr>
    </ItemTemplate>    
    <FooterTemplate><!--底部模板-->
    </table>    <!--表格結(jié)束部分-->
    </FooterTemplate>  
    </asp:Repeater>
  </div>
  </form>
</body>

注意：

HTMl中插入其他代碼需要用<% %>括起來(lái)。

6、然后在index.aspx.cs的Page_Load（）事件中綁定數(shù)據(jù)源。

核心代碼為：

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、運(yùn)行index.aspx頁(yè)面即可看到數(shù)據(jù)庫(kù)中各字段信息。

二、通過(guò)Table顯示數(shù)據(jù)庫(kù)中的字段時(shí)，為字段添加超鏈接。

1、新建兩個(gè)頁(yè)面，index.aspx 頁(yè)面和Cities.aspx頁(yè)面。

index.aspx頁(yè)面代碼：

<body>
  <asp:Repeater ID="Repeater1" runat="server">
  <HeaderTemplate>
  <table class="ts">
    <tr>
      <th>
        省份名稱</th>
      <th>
        省份編號(hào)</th>
    </tr>
  </HeaderTemplate>
  <ItemTemplate>
  <tr>
      <td>
        <a href='Cities.aspx?pro=<%#Eval("proID") %>' target="_blank"><%#Eval("proName") %></a></td><!--添加超鏈接，超鏈接放到內(nèi)容的兩邊-->
      <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頁(yè)面中的代碼：

<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頁(yè)面中的代碼：

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();

  }
}

然后運(yùn)行index.aspx頁(yè)面，通過(guò)單擊超鏈接就跳轉(zhuǎn)到了Cities.aspx，在該頁(yè)面顯示信息。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: