Explanation of ASP. NET Repeater Data Control Usage Summary

  • 2021-08-28 19:53:49
  • OfStack

1. Usage flow and example of Repeater control:

1. First, establish a website and create a new webpage index. aspx.

2. Add or create APP_Data data files, and then put the database files used in APP_Data folder.

3. Open the Database Enterprise Manager, the database server is local (.), and attach the database in the APP_Data folder to the database server.

4. Add the Ling to SQL class.

5. Open View, Server Explorer, right-click Database Server, select Add Connection, then select Database Server, Database Type, and Database Table, and then finish.

6. Select all the tables you need, then drag them to the file with the suffix. dbml, and then save them. At this step, the attachment of the data table and the connection with the website are completed.

Goal: By using the Repeater data control, the data in the data table is displayed in the table.

1. Add a style file, and then write the style code of the table in the style file.

2. In index. aspx design mode, insert a table, usually two rows (1 for the header row and 1 for the content row), because the Repeater control loops automatically. Then, in the source code interface, change the cell in the first row of the table just inserted to the header cell, which is < td > Replace with < th > .

3. Select Table, then Format, and then Attach Stylesheet. Next, you need to remove the style code from the header in the source code, remove the row style, and write the class in the newly created style sheet or this ID into the table.

4. Then, place the cursor in front of table, double-click the repeater control so that the code for the Repeater control is added in front of the Table code, and then add header templates for the Repeater control respectively ( < HeaderTemplate > < /HeaderTemplate > ), the list template ( < ItemTemplate > < /ItemTemplate > ) and the tail template ( < FooterTemplate > < /FooterTemplate > ).

Note:

The header template places the beginning of the table and the header row of the first row ( < table > < tr > < th > < /th > < /tr > ); The list template places the second row of the table ( < tr > < /tr > ); The end of the tail template placement table ( < /table > ).

When you insert a table, you only need to insert two rows, and the data is displayed cyclically according to the database table. The project template will be displayed in a loop, and the second row of the table will be placed.

5. Then write the alias of the field in the database that will be displayed in the cell in the header row and the field name in the database in the cell in the content row, as follows:


<td><%#Eval(" Database field name ") %></td>

The core code is:


<body>
  <form id="form1" runat="server">
  <div>
  <!-- Cursor placed table Front, double-click repeater Control, 3 A vacancy 1 Can't -->
    <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate><!-- Head template , Put the form at the beginning and 1 Row header -->
    <table class="ts"><!-- When you insert a table, you only need to insert two rows, and the data is displayed cyclically according to the database table -->
      <tr>
        <th>
           Student number </th>
        <th>
           Name </th>
        <th>
           Gender </th>
        <th>
           Native Place </th>
        <th>
           Age </th>
      </tr></HeaderTemplate>  
    <ItemTemplate><!-- Project template, which will be displayed in a loop and placed in the table 2 Row -->
    <tr>
        <td>
          <%#Eval("number") %> <!--HTMl Inserting additional code in the <% %> Enclosed, Eval(" Field names in the database ")-->
          </td>
        <td>
         <%#Eval("name")%> </td>
        <td>
          <%#Eval("sex")%> </td>
        <td>
           <%#Eval("place")%></td>
        <td>
          <%#Eval("age")%> </td>
      </tr>
    </ItemTemplate>    
    <FooterTemplate><!-- Bottom template -->
    </table>    <!-- End of table -->
    </FooterTemplate>  
    </asp:Repeater>
  </div>
  </form>
</body>

Note:

Inserting additional code into HTMl requires < % % > Close it up.

6, and then bind the data source in the Page_Load () event of index. aspx. cs.

The core code is:


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. Run the index. aspx page to see the information of each field in the database.

2. When fields in the database are displayed through Table, add hyperlinks to the fields.

1. Create two new pages, index. aspx and Cities. aspx.

index. aspx page code:


<body>
  <asp:Repeater ID="Repeater1" runat="server">
  <HeaderTemplate>
  <table class="ts">
    <tr>
      <th>
         Name of Province </th>
      <th>
         Province number </th>
    </tr>
  </HeaderTemplate>
  <ItemTemplate>
  <tr>
      <td>
        <a href='Cities.aspx?pro=<%#Eval("proID") %>' target="_blank"><%#Eval("proName") %></a></td><!-- Add hyperlinks and put them on both sides of the content -->
      <td>
      <%#Eval("proID")%></td>
    </tr>
  </ItemTemplate>
  <FooterTemplate>
  </table>
  </FooterTemplate>
  </asp:Repeater>
  <form id="form1" runat="server">
  <div>
  </div>
  </form>
</body>

Code in 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();
  }
}

Code in the Cities. aspx page:


<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>

Code on the Cities. aspx. cs page:


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

  }
}

You then run the index. aspx page and jump to Cities. aspx by clicking the hyperlink, where the information is displayed.


Related articles: