Display Image Gallery Using Repeater In ASP.NET

Introduction:  In this article we will learn how to create a image gallery using repeater control in asp.net. Follow simple steps for this ..

Procedure:

1. Drag and Drop a repeater from toolbar in your asp.net web page.

2. Design the layout in the <Item Template></Item Template> section as per requirement or simply paste  this code.

<asp:Repeater ID=”Repeater1″ runat=”server”>
<HeaderTemplate>
<h2>
Product Category List</h2>
<hr />
</HeaderTemplate>
<ItemTemplate>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<asp:Image ID=”Image1″ ImageUrl='<%# Eval(“ImageURL”) %>’ runat=”server” Style=”width: 350px;
height: 200px; border: 2px solid green;” />
</td>
<td>
<fieldset>
<legend>
<%# Eval(“CategoryName”) %></legend>
<ul>
<li><b>Category ID:</b>
<%# Eval(“CategoryID”) %>
</li>
<li><b>Added By:</b>
<%# Eval(“UserID”) %>
<b>On</b>
<%# Eval(“DateAdded”) %>
</li>
<li><b>Description:</b>
<%# Eval(“Description”) %>
</li>
</ul>
</fieldset>
</td>
</tr>
</table>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>

3. In Code behind write code to assign DataSource to this repeater control in page_load() or whenever you like as follows.

Repeater1.DataSource = category.GetActiveCategories();// Your data Access Logic goes //here to get data source.
Repeater1.DataBind();

Result: This will display a beautiful image gallery like this.

RepeaterGallery

RepeaterGallery

Advertisements

One thought on “Display Image Gallery Using Repeater In ASP.NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s