Home > Others

Use of repeater controls

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Use of repeater controls
The Repeater control is a data display control that allows you to customize the layout by repeatedly using the specified template for each item displayed in the list.
To display data, you must first create a template to bind the data list. The module definition is as follows (see SDK ):

1. template description

Headertemplate
The element that is rendered once before all data bound rows are rendered. A typical purpose is to start a container element (such as a table ).
Note: The headertemplate item cannot be bound to Data.

Footertemplate
The element that is rendered once after all data bound rows are rendered. The typical purpose is to close the elements opened in the headertemplate item (using a tag such as </table> ).
Note: footertemplate cannot be bound to Data.

Alternatingitemtemplate
Similar to the itemtemplate element, the repeater control is rendered once every line (alternating item. You can set the style attribute of the alternatingitemtemplate element to specify different appearances.

Itemtemplate
Displays each row of the data source once. To display data in itemtemplate, declare one or more web server controls and set their data binding expressions so that they are calculated as fields in datasource of the Repeater control (container control. The following example shows an example declaration that contains the first name field in the label control.

First name:
<Asp: Label runat = "server"
TEXT = "<% # container. dataitem. firstname %>"/>

Separatortemplate
The elements presented between each row, such as the <br> mark and the <HR> mark.
Note: The separatortemplate item cannot be bound to Data.

Note: This control cannot be edited visually, but datalist's DataGrid Control can.

II. The procedure for creating a program is described below
1. Create a web application and change the default web form to repeater. aspx.
2. Switch to the "html" view and enter the following code:

<% @ Page Language = "C #" codebehind = "Repeater. aspx. cs" autoeventwireup = "false" inherits = "teachshow. charpter7.repeater" %>

<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">

<HTML>

<Head>

<Title> repeater </title>

<LINK rel = "stylesheet" type = "text/CSS" href = "../style.css">

<Meta name = "generator" content = "Microsoft Visual Studio. NET 7.1">

<Meta name = "code_language" content = "C #">

<Meta name = "vs_defaultclientscript" content = "JavaScript">

<Meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5">

</Head>

<Body ms_positioning = "gridlayout">

<Form ID = "form1" method = "Post" runat = "server">

<Div align = "center">

<Center>

<Table border = "0" cellpadding = "0" cellspacing = "0" width = "272" Height = "136">

<Tr>

<TD width = "272" Height = "136">

<Div align = "center">

<Center>

<Table border = "1" cellpadding = "0" cellspacing = "0" width = "272" Height = "60" bordercolorlight = "#000000"

Bordercolordark = "# ffffff" class = "smallred">

<Asp: repeater id = "repeater1" runat = "server">

<Headertemplate>

<Tr>

<TD width = "90" Height = "30"> <font face = ""> numbers </font> </TD>

<TD width = "91" Height = "30"> <font face = ""> Square </font> </TD>

<TD width = "91" Height = "30"> <font face = ""> cube </font> </TD>

</Tr>

</Headertemplate>

<Itemtemplate>

<Tr>

<TD width = "90" Height = "30"> <% # databinder. eval (container. dataitem, "Number") %> </TD>

<TD width = "91" Height = "30"> <% # databinder. eval (container. dataitem, "square") %> </TD>

<TD width = "91" Height = "30"> <% # databinder. eval (container. dataitem, "cube") %> </TD>

</Tr>

</Itemtemplate>

</ASP: repeater>

</Table>

</Center>

</Div>

</TD>

</Tr>

</Table>

</Center>

</Div>

</Form>

</Body>

</Html>

Explain the methods used in the program
Databinder. eval ()Method: This method is used to calculate the data binding expression at runtime and format the output result according to the browser's needs. This method has three parameters:

A. Naming container for data items: a naming container is an object reference, which is the object targeted by the computing expression. If the binding is for list controls (such as repeater, datalist, or DataGrid), the named container will always be container. dataitem. If the binding is for the page, the named container is page.

B. Data Field name: name of the column bound to the table (such as "square ).

C. Format String

If high performance is required, the databinder. eval () method is not recommended.

3. Open the repeater. aspx. CS file and enter the following code:

Using system;

Using system. collections;

Using system. componentmodel;

Using system. Data;

Using system. drawing;

Using system. Web;

Using system. Web. sessionstate;

Using system. Web. UI;

Using system. Web. UI. webcontrols;

Using system. Web. UI. htmlcontrols;

Namespace teachshow. charpter7

{

/// <Summary>

/// Summary of repeater.

/// </Summary>

Public class repeater: system. Web. UI. Page

{

Protected system. Web. UI. webcontrols. Repeater repeater1;

Private void page_load (Object sender, system. eventargs E)

{

// Place user code here to initialize the page

If (! This. ispostback)

{

Datatable mydt = new datatable ();

Datarow mydr;

Mydt. Columns. Add (New datacolumn ("Number", typeof (int32 )));

Mydt. Columns. Add (New datacolumn ("square", typeof (int32 )));

Mydt. Columns. Add (New datacolumn ("cube", typeof (int32 )));

For (INT I = 0; I <= 10; I ++)
{

Mydr = mydt. newrow ();

Mydr [0] = I; mydr [1] = I * I; mydr [2] = I * I;

Mydt. Rows. Add (mydr );

}

This. repeater1.datasource = mydt;

This. repeater1.databind ();
}

}

# Code override protected void oninit (eventargs e) generated by region web forms designer)
{
/// Codegen: This call is required by the ASP. NET web form designer.
// Initializecomponent (); base. oninit (E );}
/// <Summary>
/// The designer supports the required methods-do not use the code editor to modify
/// Content of this method.
/// </Summary>

Private void initializecomponent ()
{

This. repeater1.itemcommand + = new system. Web. UI. webcontrols. repeatercommandeventhandler (this. repeaterincluitemcommand );

This. Load + = new system. eventhandler (this. page_load );

}

# Endregion private void repeaterincluitemcommand
(Object source, ystem. Web. UI. webcontrols. repeatercommandeventargs E)
{}
}
}

4. view the results at the end?

See the table below:

Digital square cube 0 0 0 1 1 1 2 4 8 3 9 27 4 16 64 5 25 125 6 36 216 7 49 343 8 64 512 9 81 729 10 100 1000

Source: http://www.nqqn.com/ym/41/9307.htm

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More