Tuesday 2 April 2013

Image Gallery in asp.net c# only


Image Gallery in asp.net c# only


Description:

    Here I used for creating Photo Gallery using asp.net with c# only.

   Also using 3-tier Architecture. And we can view First, Next, Previous, Last Images through asp button onclick event.

Steps:



Default.aspx:   

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.divmask
{
z-index: 4; /* width:75%;*/
width: 100%;
height: 100%;
position: fixed;
background-color: Gray;
top: 0px; /*left:170px;*/
left: 0px;
border: 1px solid #333; /* Theoretically for IE 8 & 9 (more valid) */ /* ...but not required as filter works too */ /* should come BEFORE filter */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)"; /* 83 This works in IE 8 & 9 too */ /* ... but also 5, 6, 7 */ /* filter: alpha(opacity=75); /* Older than Firefox 0.9 */
-moz-opacity: 0.89; /* 0.89 Safari 1.x (pre WebKit!) */ /* -khtml-opacity: 0.8; /* Modern! /* Firefox 0.9+, Safari 2?, Chrome any? // Opera 9+, IE 9+ */
opacity: 0.83; /* 0.83*/
}
</style>

<script type="text/javascript" language="javascript">
function chkUploads() {
var FU1 = document.getElementById('FileUpload1').value;
var FU2 = document.getElementById('FileUpload2').value;
var Descp = document.getElementById('txt_Descp').value;

if (FU1 == "") {
alert('Please upload the Thumbnail Photos');
document.getElementById('FileUpload1').focus();
return false;
}
else if (FU2 == "") {
alert('Please upload the Photots');
document.getElementById('FileUpload2').focus();
return false;
}
else if (Descp == "") {
alert('Please enter the File Description');
document.getElementById('txt_Descp').focus();
return false;
}

}

function div_Open(url, descp) {
document.getElementById('<%=div_Img.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=img_Div.ClientID %>').src = url;
document.getElementById('<%=lbl_Descp.ClientID %>').innerText = descp;
return false;
}

function div_Close() {
document.getElementById('<%=div_Img.ClientID %>').style.visibility = 'hidden';
return false;
}


</script>

</head>
<body>
<form id="form1" runat="server" autocomplete="off">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="1258px" align="center">
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="98%" align="center">
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem Text="Create Album" Value="0"></asp:MenuItem>
<asp:MenuItem Text="View Album" Value="1"></asp:MenuItem>
</Items>
</asp:Menu>
</td>
</tr>
<tr>
<td>
<div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2">
Upload Photos:
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td width="20%">
Enter Image Title :
</td>
<td>
<asp:TextBox ID="txt_Title" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="20%">
Upload the Tumbnail Photos :
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td width="20%">
Upload the Photos :
</td>
<td>
<asp:FileUpload ID="FileUpload2" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td>
Description :
</td>
<td>
<asp:TextBox ID="txt_Descp" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_Upload" runat="server" Text="Upload" OnClientClick="return chkUploads();"
OnClick="btn_Upload_Click" />
&nbsp;&nbsp;
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" OnClick="btn_Cancel_Click" />
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View2" runat="server">
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</asp:View>
</asp:MultiView>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
</div>

<div id="div_Img" runat="server" class="divmask" style="visibility: hidden;">
<div style="border: 1px solid #333;">
<table border="0" align="center" cellpadding="0" cellspacing="0" runat="server" style="position: absolute;
left: 312px; width: 800px; border: 1px solid #333; background-color: #FFFF99">
<tr>
<td colspan="2" align="right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="../Images/close.gif"
OnClientClick="return div_Close();" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Image ID="img_Div" runat="server" AlternateText="Image" Style="height: 620px;
width: 600px;" />
</td>
</tr>
<tr>
<td align="center">
Image Description : &nbsp;
<asp:Label ID="lbl_Descp" runat="server"></asp:Label>

</td>
</tr>
<tr>
<td align="center">
&nbsp;&nbsp;
<asp:Button ID="btn_First" runat="server" Text="First" OnClick="btn_First_Click" />
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="btn_Next" runat="server" Text="Next" OnClick="btn_Next_Click" />
</td>
<td align="center">
&nbsp;&nbsp;
<asp:Button ID="btn_Prev" runat="server" Text="Prev" OnClick="btn_Prev_Click" />
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="btn_Last" runat="server" Text="Last" OnClick="btn_Last_Click"/>
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>


Default.aspx.cs:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using Web_BAL;
using Web_DAL;
using Web_EL;


namespace WebApplication2
{
public partial class _Default : System.Web.UI.Page
{
Gallery_EL gEl = new Gallery_EL();
Gallery_BAL gBAL = new Gallery_BAL();

string thumbImgName = string.Empty;
string lenFormat = string.Empty;
int thumbHeight;
int thumbWidth;

string descp = string.Empty;
string Title = string.Empty;

string imgName = string.Empty;
string imgLen = string.Empty;
int imgHeight;
int imgWidth;

DataTable dtImg = new DataTable();
public static int rowIndex;

Table tbl = new Table();
TableRow tr;
TableRow tr1;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
FillTableImages();
}
}

private void FillTableImages()
{
int Row = 0;
int rowCnt = 1;

dtImg = (DataTable)gBAL.selImages();

if (dtImg != null && dtImg.Rows.Count > 0)
{
foreach (DataRow dr in dtImg.Rows)
{
if (System.IO.File.Exists(Server.MapPath("Images/" + dr["img"])))
{
if (System.IO.File.Exists(Server.MapPath("Images/Thumbs/" + dr["thumb"])))
{


if (Row == 0)
{
tr = new TableRow();
tr1 = new TableRow();
}

TableCell tc = new TableCell();

Image img = new Image();
img.ImageUrl = "Images/Thumbs/" + dr["thumb"];
img.ID = "img_" + dr[0];
img.Height = Unit.Pixel(100);
img.Width = Unit.Pixel(120);
tc.Height = Unit.Pixel(110);
tc.Width = Unit.Pixel(130);
tc.Attributes.Add("background", "Images/Thumbs/" + dr["thumb"]);
tc.Style.Add("background-repeat", "no-repeat");
tc.Style.Add("background-position", "center");
//tc.Style.Add("height", "150px");
//tc.Style.Add("width", "200px");
//tc.Style.Add(HtmlTextWriterStyle.Height, "150px");
//tc.Style.Add(HtmlTextWriterStyle.Width, "200px");
// tc.Style.Add("background-size", "150px 200px");
//background-size
tc.Style.Add("background-color", "aliceblue");
tc.Style.Add("border", " 1px solid #333");
//tc.Attributes.Add("onMouseOver", "fun_Over();return false;");
//tc.Attributes.Add("onMouseOut", "fun_Out();return false;");
tc.ColumnSpan = 5;

System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

dynDiv.ID = "dyn_Div";
// dynDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "aliceblue");
dynDiv.Style.Add(HtmlTextWriterStyle.Height, "110px");
dynDiv.Style.Add(HtmlTextWriterStyle.Width, "130px");
dynDiv.Style.Add("vertical-align", "top");

Label lbl_Title = new Label();
lbl_Title.ID = "lbl_Title";
lbl_Title.Text = dr["imgTitle"].ToString();
dynDiv.Controls.Add(lbl_Title);
dynDiv.Style.Add("text-align", "center");

string url = "Images/" + dr["img"].ToString();
string descp = dr["descp"].ToString();
dynDiv.Attributes.Add("OnClick", "div_Open('" + url + "','" + descp + "');return false;");

tc.Controls.Add(dynDiv);

tr.Cells.Add(tc);
tbl.Rows.Add(tr);

Row++;

if (Row > 3)
{
TableRow trspace = new TableRow();
trspace.Height = Unit.Pixel(20);
tbl.Rows.Add(trspace);
Row = 0;
}
rowCnt++;

Panel1.Controls.Add(tbl);
Panel1.HorizontalAlign = HorizontalAlign.Left;


}
}
}
}

}

protected void btn_Upload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string[] getFilName = FileUpload1.FileName.Split('.');
thumbImgName = FileUpload1.FileName + "," + DateTime.Now.ToFileTime() + "." + getFilName[1];

if (getFilName[1] == "JPEG" || getFilName[1] == "jpg")
{
double len = Convert.ToDouble(FileUpload1.PostedFile.ContentLength) / 1024;
lenFormat = len.ToString("0.0");

//double length=Convert.ToDouble(lenFormat);

if (FileUpload1.PostedFile.ContentLength < 30720)
{

System.Drawing.Image thumbImg = System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream);
thumbHeight = thumbImg.Height;

thumbWidth = thumbImg.Width;

if (thumbHeight == 75 && thumbWidth == 100)
{

string Path = HttpContext.Current.Server.MapPath("Images/Thumbs/" + thumbImgName);
FileUpload1.SaveAs(Path);
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Uploaded File Dimension should be 100x75');", true);
}
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Uploaded File Size Not More than 30KB');", true);
}
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Please Upload [.jpg/.jpeg] files only');", true);
}
}


if (FileUpload2.HasFile)
{
string[] getImgName = FileUpload2.FileName.Split('.');
imgName = FileUpload2.FileName + "," + DateTime.Now.ToFileTime() + "." + getImgName[1];

if (getImgName[1] == "JPEG" || getImgName[1] == "jpg")
{
imgLen = (Convert.ToDouble(FileUpload2.PostedFile.ContentLength) / 1024).ToString("0.0");

if (FileUpload2.PostedFile.ContentLength < 307200)
{

System.Drawing.Image img = System.Drawing.Image.FromStream(FileUpload2.PostedFile.InputStream);
imgHeight = img.Height;
imgWidth = img.Width;
if (imgHeight == 768 && imgWidth == 1024)
{

string path1 = HttpContext.Current.Server.MapPath("Images/" + imgName);
FileUpload2.SaveAs(path1);
}
else
{

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Uploaded File Dimension should be 1024x768');", true);
}
}
else
{

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Uploaded File Size Not More than 300KB ');", true);
}


}
else
{

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Please Upload [.jpg/.jpeg] files only');", true);
}
}

descp = txt_Descp.Text.Trim();
Title = txt_Title.Text.Trim();

gEl.imgName = imgName;
gEl.imgSize = Convert.ToDouble(imgLen);
gEl.imgHeight = imgHeight;
gEl.imgWidth = imgWidth;

gEl.imgDescp = descp;

gEl.thumbImgName = thumbImgName;
gEl.thumbImgSize = Convert.ToDouble(lenFormat);
gEl.thumbImgHeight = thumbHeight;
gEl.thumbImgWidth = thumbWidth;
gEl.imgTitle = Title;

//if (string.IsNullOrEmpty(gEl.thumbImgName) && string.IsNullOrEmpty(Convert.ToString(gEl.thumbImgSize)) && string.IsNullOrEmpty(Convert.ToString(gEl.thumbImgHeight))
// && string.IsNullOrEmpty(Convert.ToString(gEl.thumbImgWidth)) && string.IsNullOrEmpty(gEl.imgName) && string.IsNullOrEmpty(Convert.ToString(gEl.imgSize))
// && string.IsNullOrEmpty(Convert.ToString(gEl.imgHeight)) && string.IsNullOrEmpty(Convert.ToString(gEl.imgWidth)) && string.IsNullOrEmpty(gEl.imgDescp))
//{

Boolean val = gBAL.callInsertImages(gEl);

if (val == true)
{

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Images Uploaded Successfully');", true);
txt_Descp.Text = "";
}
else
{

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('Images Uploaded Not Successfully');", true);
}
// }




}

protected void btn_Cancel_Click(object sender, EventArgs e)
{
txt_Title.Text = "";
FileUpload1.Dispose();
//FileUpload1.PostedFile.InputStream.Dispose();
FileUpload2.Dispose();
txt_Descp.Text = "";

}


protected void btn_First_Click(object sender, EventArgs e)
{
dtImg = (DataTable)gBAL.selImages();
if (dtImg != null && dtImg.Rows.Count > 0)
{
rowIndex = 0;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
rowIndex = 0;
}

}

protected void btn_Next_Click(object sender, EventArgs e)
{

dtImg = (DataTable)gBAL.selImages();
if (dtImg != null && dtImg.Rows.Count > 0)
{
//if (rowIndex == (dtImg.Rows.Count - 1))
//{
// ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('No More Record is Available');", true);
// FillTableImages();
// //rowIndex = dtImg.Rows.Count - 1;
// rowIndex = 0;
//}
//else
//{
// rowIndex++;
// img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
// lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
// FillTableImages();
// ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
//}




if (rowIndex < dtImg.Rows.Count - 1)
{
if (rowIndex == 0)
{
rowIndex = 1;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);

rowIndex = rowIndex + 1;
}
else
{
rowIndex = rowIndex + 1;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
}
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('No More Record is Available');", true);
FillTableImages();
rowIndex = dtImg.Rows.Count - 1;
//rowIndex = 0;
}

}


}

protected void btn_Prev_Click(object sender, EventArgs e)
{


dtImg = (DataTable)gBAL.selImages();
if (dtImg != null && dtImg.Rows.Count > 0)
{
//if (rowIndex != 0)
//{
// rowIndex--;
// img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
// lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
// FillTableImages();
// ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
//}

if (rowIndex < dtImg.Rows.Count)
{
if (rowIndex == dtImg.Rows.Count - 1)
{
rowIndex = rowIndex - 1;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);

}
else
{
if (rowIndex != 0)
{
rowIndex = rowIndex - 1;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('No More Record is Available');", true);
rowIndex = 0;
}

}
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Alert", "alert('No More Record is Available');", true);
rowIndex = 0;
}

}



}

protected void btn_Last_Click(object sender, EventArgs e)
{
dtImg = (DataTable)gBAL.selImages();
if (dtImg != null && dtImg.Rows.Count > 0)
{
if (rowIndex != -1)
{
rowIndex = dtImg.Rows.Count - 1;
img_Div.ImageUrl = "Images/" + dtImg.Rows[rowIndex]["img"].ToString();
lbl_Descp.Text = dtImg.Rows[rowIndex]["descp"].ToString();
FillTableImages();
ScriptManager.RegisterStartupScript(this, typeof(string), "function", "div_Open('" + img_Div.ImageUrl + "','" + lbl_Descp.Text + "');", true);
}

}
}




protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Convert.ToInt32(Menu1.SelectedValue);
switch (e.Item.Text)
{
case "Create Album":
MultiView1.ActiveViewIndex = 0;
break;
case "View Album":
MultiView1.ActiveViewIndex = 1;
FillTableImages();
break;
}
}
}
}

Web_EL.class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Web_EL
{
public class Gallery_EL
{
public string imgTitle{get;set;}

public string thumbImgName { get; set; }
public double thumbImgSize { get; set; }
public int thumbImgHeight { get; set; }
public int thumbImgWidth { get; set; }

public string imgName { get; set; }
public double imgSize { get; set; }
public int imgHeight { get; set; }
public int imgWidth { get; set; }
public string imgDescp { get; set; }

}
}


Web_BAL.class: 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Web_DAL;
using Web_EL;

namespace Web_BAL
{
public class Gallery_BAL
{
Gallery_DAL gDAL = new Gallery_DAL();
public Boolean callInsertImages(Gallery_EL gEL)
{
return gDAL.InsertImages(gEL);
}

public object selImages()
{
return gDAL.selectImages();
}

}
}


Web_DAL.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Web_EL;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace Web_DAL
{
public class Gallery_DAL
{
string conStr = ConfigurationManager.ConnectionStrings["testCon"].ConnectionString;
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter sqlda;
DataTable dt;
DataSet ds;

Gallery_EL gEl = new Gallery_EL();


public Boolean InsertImages(Gallery_EL gEl)
{
using (con = new SqlConnection(conStr))
{
con.Open();
using (cmd = new SqlCommand("sp_Gallery_Insert", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@imgTitle", gEl.imgTitle);
cmd.Parameters.AddWithValue("@thumb", gEl.thumbImgName);
cmd.Parameters.AddWithValue("@img", gEl.imgName);
cmd.Parameters.AddWithValue("@descp", gEl.imgDescp);
cmd.Parameters.AddWithValue("@thumbSize", gEl.thumbImgSize);
cmd.Parameters.AddWithValue("@thumbHeight", gEl.thumbImgHeight);
cmd.Parameters.AddWithValue("@thumbWidth", gEl.thumbImgWidth);
cmd.Parameters.AddWithValue("@imgSize", gEl.imgSize);
cmd.Parameters.AddWithValue("@imgHeight", gEl.imgHeight);
cmd.Parameters.AddWithValue("@imgWidth", gEl.imgWidth);
cmd.ExecuteNonQuery();
}
}
return true;
}

public object selectImages()
{
using (con = new SqlConnection(conStr))
{
con.Open();
string selQry = "select ROW_NUMBER() over (order by GID) as rowIndex,* from gallery";
using (cmd = new SqlCommand(selQry, con))
{
sqlda = new SqlDataAdapter(cmd);
dt = new DataTable();
sqlda.Fill(dt);
}
}
return dt;
}


}
}


Output:













No comments:

Post a Comment