Repeater with HTML Table

By: Rajesh P.S.

The ASP.NET Repeater control is a versatile container control that enables developers to create customized lists using data from various sources available on the web page. It acts as a rendering engine that generates HTML to display the contents of the list or data source it is bound to.

The Repeater control offers a flexible and powerful mechanism for rendering HTML to present data in a structured and organized manner. It can be used to display the contents of a collection, database query results, or any other data source available to the page.

When bound to a data source, such as a collection or a database query, the Repeater control dynamically generates HTML markup for each item in the data source. Developers can define the layout and structure of each item using templates, which include the ItemTemplate, AlternatingItemTemplate, HeaderTemplate, FooterTemplate, and SeparatorTemplate.

ItemTemplate

The ItemTemplate is a required template that defines the layout for each item in the list. It allows developers to specify HTML markup and data-binding expressions to display the data from the data source. The AlternatingItemTemplate, on the other hand, is an optional template that is applied to alternate items in the list, allowing for visual variety or highlighting.

HeaderTemplate and FooterTemplate

The HeaderTemplate and FooterTemplate are also optional templates that can be used to display content before and after the items in the list, respectively. These templates are often used to provide summary information or to add additional content to the top or bottom of the list.

The SeparatorTemplate is another optional template that allows developers to specify HTML markup or controls to be rendered between each item in the list. This template can be used to insert visual separators, such as horizontal lines or line breaks, between items for better readability or aesthetic purposes.

We can integrate a Repeater control with HTML Table. We should start a HTML table tag in the Header template and end the HTML table tag in the Footer template.

The following program also display an image inside the Repeater control. In order o display an image we are retrieving the image path from database values and embeded in the asp Image tag.

<asp:Image ID="Image1" height="31" width="127" Img src='<%# DataBinder.Eval(Container.DataItem, "website_logo")%>' runat="server"/>

The above code retrieve the image path value from the website_logo database field. The following ASP.NET program retrieves the values from an XML file and display in the web page. The XML database file has two fields website_logo and website_name. The website_logo field contain the path of logo image and website_name contain the websites name.

VB.Net

Dim ds As New DataSet ds.ReadXml("D:\websites.xml")

DataSet ds = new DataSet(); ds.ReadXml(@"D:\websites.xml");

Copy and paste the following XML content to a notepad and save it as c:\websites.xml , or Download websites.xml from here and save it to c:\websites.xml.

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <Table> <websites> <website_logo>https://net-informations.com/logo.png</website_logo> <website_name>https://net-informations.com</website_name> </websites> <websites> <website_logo>https://net-informations.com/logo.png</website_logo> <website_name>https://net-informations.com/vb/default.htm</website_name> </websites> <websites> <website_logo>https://net-informations.com/logo.png</website_logo> <website_name>https://net-informations.com/csharp/default.htm</website_name> </websites> <websites> <website_logo>https://net-informations.com/logo.png</website_logo> <website_name>https://net-informations.com/asp/</website_name> </websites> </Table>

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater id="repeater1" runat="server" > <HeaderTemplate> <table border="2"> <tr><td colspan ="2"><b><u>Website Listing</u></b><br /></td></tr> </HeaderTemplate> <ItemTemplate> <tr><td> <asp:Image ID="Image1" height="31" width="127" Img src='<%# DataBinder.Eval(Container.DataItem, "website_logo")%>' runat="server"/> </td><td> <%# DataBinder.Eval(Container.DataItem, "website_name")%> <br /> </td></tr> </ItemTemplate> <FooterTemplate> <tr><td colspan ="2">All Rights Reserved. </td></tr> </tabel> </FooterTemplate> </asp:Repeater> </div> </form> </body> </html>

Full Source | C#

using System; using System.Data ; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { DataSet ds = new DataSet(); ds.ReadXml(@"C:\websites.xml"); repeater1.DataSource = ds.Tables[0]; repeater1.DataBind(); } }

Full Source | VB.NET

Imports System.Data Imports System.Web.UI.WebControls Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim ds As New DataSet ds.ReadXml("C:\websites.xml") repeater1.DataSource = ds.Tables(0).DefaultView repeater1.DataBind() End Sub End Class

Conclusion

Through making use of Repeater control and its power of HTML rendering, the developers can build lists that are custom-written and present data in a clear and structured way ,directly meeting their specific needs. The Repeater control's versatility, together with the data binding features to different data sources, provides a solid tool to use for portraying dynamic and data driven information on web pages.

Next > ASP.NET Repeater Paging

Related Topics