How to display an image gallery using Repeater in ASP.NET

Introduction: Hey guys in this article i am going to demonstrate that how we can display an image gallery using repeater in ASP.NET. Its very simple and just follow following steps.

Procedure:

1. Either create a new page or project.

2. Drag and drop a  FileUploader and a Button control in your ASPX page.

3. To display a gallery put a Repeater control in the page.

4. In the <ItemTemplate > section of repeater put an image control to display images. Set height and width of this image control.

5. So your aspx page code will look like this.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<a class=”zem_slink” href=”http://en.wikipedia.org/wiki/Image_hosting_service&#8221; title=”Image hosting service” rel=”wikipedia” target=”_blank”>Image Gallery</a>
<style type=”text/css”>
html
{
background-color: Silver;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:FileUpload runat=”server” ID=”uploader1″ />
<asp:Button Text=”Upload” runat=”server” ID=”btnUpload” OnClick=”btnUpload_Click” />
<hr />
<asp:Repeater runat=”server” ID=”repeater1″>
<ItemTemplate>
<asp:Image ID=”Image1″ ImageUrl='<%# Eval(“Url”) %>’ runat=”server” Width=”200px”
Height=”200px” />
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>

6.  Now in the SqlServer either create a database or a new table in existing database. So your table structure will look something like this.

ColumnName Datatype             AllowNull

 ID               int                       NotNull

Url               varchar(150)      NotNull

 Here i am storing just the path of images instead of entire image in the database as storing image in the database will slow down the database operation of data retrieval.

7. Now double click the upload Button to write some code. Write following lines of code in the button click event.

protected void btnUpload_Click(object sender, EventArgs e)
{
if (uploader1.HasFile)
{
string virtualFolder = “~/Images/”;
string physicalFolder = Server.MapPath(virtualFolder);
string fileName = Guid.NewGuid().ToString();
string extension = System.IO.Path.GetExtension(uploader1.FileName);
uploader1.SaveAs(System.IO.Path.Combine(physicalFolder,fileName+extension));
string finalUrl = virtualFolder + fileName + extension;
using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[“ConnectionString”].ConnectionString))
{
SqlCommand cmd = new SqlCommand(“Insert into Photo Values(‘”+finalUrl+”‘)”,con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
BindRepeater();
}
}
}
8. Now click on the upload button from the front view of form to browse and upload some of the images so that we can see those images as a gallery.

  9. I have written a method to bind the repeater which retrieves the image path(URL) from database and bind the repeater.

private void BindRepeater()
{
using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[“ConnectionString”].ConnectionString))
{
SqlDataAdapter adp = new SqlDataAdapter(“Select Url From Photo”, con);
DataTable dt = new DataTable();
con.Open();
adp.Fill(dt);
con.Close();
repeater1.DataSource = dt;
repeater1.DataBind();
}
}

10. In the page load event simply call this method to bind the repeater to display gallery.

protected void Page_Load(object sender, EventArgs e)
{
BindRepeater();
}

11. So after uploading some images we would be able to see the image gallery something like this.

Advertisements

2 thoughts on “How to display an 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