Detailed asp.net-----repeater Data Control Usage Summary _ Practical skills

Source: Internet
Author: User
Tags first row

First, the use of repeater control process and examples:

1, first set up a Web site, a new Web page index.aspx.

2, add or create App_Data data files, and then put the used database files into the App_Data folder.

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

4, add Ling to SQL class.

5, open the view, Server Explorer, right-click the database server, select Add Connection, then select the database server, database type, and database tables, and then complete.

6, select the table you want to use, and then drag to the file in the. dbml suffix, and then save. At this point, the addition of the datasheet and the connection to the Web site are complete.

goal: make data in a datasheet appear in a table by using the Repeater data control.

1, add the style file, and then in the style file, write the style code for the table.

2, in index.aspx design mode, insert a table, usually insert two lines (a behavior header row, a behavior content row), because the Repeater control will automatically loop. Then, in the source interface, change the cell in the first row of the table that you just inserted, to the header cell, and the <td> change to <th>.

3. Select the form, select the format, and select the attached style sheet. Next, you need to remove the style code from the header in the source code, delete the row style, and write the class or ID from the new style sheet to the table.

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

Attention:

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

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

5, then write the alias of the field in the database that you want to display in the cell of the header row, and write the field name in the database in the cell in the content row by:

<td><% #Eval (database field name)%></td>

The core code is:

 <body> <form id= "Form1" runat= "Server" > <div> <!--cursor to table Before, double-click the Repeater control, three integral--> <asp:repeater id= "Repeater1" runat= "Server" > <HeaderTemplate><!--Header Template, Place the beginning of the table and the first row of headings--> <table class= "ts" ><!--insert a table by inserting only two lines, the data is displayed according to the database table loop--> <tr> <th
        > number </th> <th> name </th> <th> sex </th>  
    <th> hometown </th> <th> age </th> </tr></HeaderTemplate>  <ItemTemplate><!--project template, will be loop display, place the second row of the table--> <tr> <td> <% #Eval ("number") %> < Insert additional code in HTML!--should be enclosed in <%%>, Eval ("Field name in Database")--> </td> <td> <%#
           Eval ("name")%> </td> <td> <% #Eval ("Sex")%> </td> <td> <% #Eval ("place")%></td> <td> <% #Eval ("Age")%> </td> </tr> </ItemTemplate>  
    <FooterTemplate><!--Bottom Template--> </table> <!--form End--> </FooterTemplate> </asp:Repeater> </div> </form> </body> 

Attention:

Inserting other code in HTML requires <%%>.

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

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

Add a hyperlink to a field when you display a field in the database by using the table.

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

Index.aspx page Code:

<body>
  <asp:repeater id= "Repeater1" runat= "Server" >
  <HeaderTemplate>
  <table class= "ts" >
    <tr>
      <th>
        province name </th>
      <th>
        Province No. </th>
    </ tr>
  </HeaderTemplate>
  <ItemTemplate>
  <tr>
      <td>
        <a href= ' cities.aspx?pro=<% #Eval ("proid")%> ' target= _blank ' ><% #Eval ("Proname")%></a></td> <!--add hyperlinks to the 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 ();
  }


Cities.aspx the code in the 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"/>
      Backcolor= "#2461BF" forecolor= "white" horizontalalign= "Center"/>
      <selectedrowstyle backcolor= "#D1DDF1" Font-bold= ' true ' forecolor= ' #333333 '/>
      
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.