How to create Image Gallery in asp.net 3.5 ?



Hi
When I was creating Image gallery in asp.net 2.0 using Datalist control, it was taking so much time. But in asp.net 3.5 and 4.0, Microsoft added the ListView control. Using this control we can create within few minute very nice image galleries.

It is the totally template based control like repeater control. It has 11 templates to customize.
Using listview and datapager control we can create very nice image gallery with paging functionality.
Here is no need to write the custom coding for paging functionality.

We can do like this
Step1: Create the database table like this

Step2: take the listview and Datapager control and arrange the HTML code like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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">
<title></title>

<style type="text/css">

.main{
float:left;
padding:0px;
margin:0px;
width:100%;
}
.imges{
float:left;
padding:0px;
margin:0px;
width:100%;
}
.numbers{
float:left;
margin:0px;
padding:0px;
margin-left:60px;
}
.ProductList Li
{
display :inline;
float:left;
margin-left:25px;
margin-bottom:25px;
}

</style>

</head>
<body>
<form id="form1" runat="server">

<div class="main">

<div class="imges">

<h3>Students</h3>

<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<ul class="ProductList">

<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>

</ul>
</LayoutTemplate>
<ItemTemplate>

<li><asp:Image ID="Img1" ImageUrl='<%#Eval("Image")%>’ runat="server"

Height="200px" Width="150px" /><br /><%#Eval("StudentName")%></li>
</ItemTemplate>
<EmptyItemTemplate>
<div>
Sorry! No Item found found.

</div>
</EmptyItemTemplate>

</asp:ListView>

</div>

<div class="numbers">
<asp:DataPager ID="DataPager1" PageSize="6" PagedControlID="ListView1"
runat="server" onprerender="DataPager1_PreRender">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</div>

</div>

</form>
</body>
</html>

Step3:Write the code In code behind like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
fillData();
}

protected void fillData()
{

using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"))
{
//for better performance write the store procedure
using (SqlCommand cmd = new SqlCommand("Select StudentName,Image from tblStudent", con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
}
}

protected void DataPager1_PreRender(object sender, EventArgs e)
{
fillData();

}
}

Advertisements

2 Responses to “How to create Image Gallery in asp.net 3.5 ?”

  1. like facebook Says:

    I am regular visitor, how are you everybody? This paragraph posted
    at this web site is really good.

  2. DanielCole Says:

    Enjoy your blog )
    http://wndbl0v3.com my blog


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

%d bloggers like this: