Introduction: In this
article I am going to explain how to create photo album in asp.net
In
the previous article I have explained how to open a website in iframe from codebehind in asp.net using C# and VB.net and how to build a nested datalist(datalist inside datalist) in asp.net.
Description:
This
article will cover the concept of creating photo album/albums in asp.net project.
User’s will be able to create their own album/albums and can upload/add photos.
To
fulfill this requirement I have created two tables Tb_Album and Tb_Photo.
Implementation:
Create PROCEDURE
Sp_InsertAlbum
(
@name varchar(100),
@albumcover varchar(max),
@id int output
)
AS
BEGIN
SET
NOCOUNT ON;
Insert
into Tb_Album(AlbumName,AlbumCover) values (@name,@albumcover)
set
@id = SCOPE_IDENTITY()
return @id
END
Store
procedure to fetch the record of album table
Create PROCEDURE
Sp_GetAlbum
AS
BEGIN
SET
NOCOUNT ON;
select * from Tb_Album
END
HTML Markup
of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<style>
table tr td
{
text-align:
center;
}
a
{
text-decoration:
none;
font-weight:
bold;
font-size: 18px;
color: #000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:40px;">
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>Create Album
:</td><td> <asp:TextBox ID="txtalbumname" runat="server"></asp:TextBox></td></tr>
<tr><td></td><td></td></tr>
<tr><td>Upload Cover
:</td><td> <asp:FileUpload ID="albumcover" runat="server" /></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td> <asp:Button ID="btncreate"
runat="server"
Text="Create
Album"
/></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataKeyField="AlbumId" RepeatColumns="4"
onitemcommand="DataList1_ItemCommand">
<AlternatingItemStyle Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Right" />
<ItemTemplate>
<table>
<tr><td><asp:Image ID="imgEmp" runat="server" Width="300px" Height="300px" ImageUrl='<%# Bind("AlbumCover") %>' style="padding:10px"/></td></tr>
<tr><td> <asp:LinkButton ID="linkItemDetails"
runat="server"
Text='<%# Bind("AlbumName") %>'></asp:LinkButton>
</td></tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Add the
namespace:
C#
Code:
using
System.Configuration;
using
System.Data.SqlClient;
using
System.Data;
VB.net
Code:
Imports
System.Configuration
Imports
System.Data.SqlClient
Imports
System.Data
Create
sqlconnection:
C#
Code:
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
VB.net
Code:
Private
con As New
SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
Insert the
data
On
button click write the below given code
C#
Code:
protected void btncreate_Click(object
sender, EventArgs e)
{
try
{
string
filepath = Server.MapPath("~/img/")
+ Guid.NewGuid() + albumcover.PostedFile.FileName;
albumcover.SaveAs( filepath);
string
fl = filepath.Substring(filepath.LastIndexOf("\\"));
string[]
split = fl.Split('\\');
string
newpath = split[1];
string
imagepath = "~/img/" + newpath;
SqlCommand
cmd = new SqlCommand("Sp_InsertAlbum", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
cmd.Parameters.AddWithValue("@name", txtalbumname.Text);
cmd.Parameters.AddWithValue("@albumcover", imagepath);
cmd.Parameters.Add("@id", SqlDbType.Int);
cmd.Parameters["@id"].Direction = ParameterDirection.Output;
cmd.ExecuteNonQuery();
Session["albumid"] = cmd.Parameters["@id"].Value;
Response.Redirect("frmphotogallery.aspx", false);
con.Close();
}
catch (Exception ex)
{
}
}
VB.net
Code:
Protected Sub btncreate_Click(sender As
Object, e As
System.EventArgs) Handles btncreate.Click
Try
Dim
filepath As String
= Server.MapPath("~/img/") +
Guid.NewGuid().ToString() + albumcover.PostedFile.FileName
albumcover.SaveAs(filepath)
Dim
fl As String =
filepath.Substring(filepath.LastIndexOf("\"))
Dim
split As String()
= fl.Split("\"c)
Dim
newpath As String
= split(1)
Dim
imagepath As String
= Convert.ToString("~/img/") &
newpath
Dim
cmd As New
SqlCommand("Sp_InsertAlbum", con)
cmd.CommandType =
CommandType.StoredProcedure
con.Open()
cmd.Parameters.AddWithValue("@name", txtalbumname.Text)
cmd.Parameters.AddWithValue("@albumcover", imagepath)
cmd.Parameters.Add("@id", SqlDbType.Int)
cmd.Parameters("@id").Direction =
ParameterDirection.Output
cmd.ExecuteNonQuery()
Session("albumid")
= cmd.Parameters("@id").Value
Response.Redirect("frmphotogallery.aspx", False)
con.Close()
Catch
ex As Exception
End Try
End Sub
Fetch
created albums from database
Create
a method to get the albums information from database and call it on page load.
C#
Code:
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
Binddatalist();
}
}
public void Binddatalist()
{
SqlDataAdapter
adp = new SqlDataAdapter("Sp_GetAlbum", con);
adp.SelectCommand.CommandType = CommandType.StoredProcedure;
DataTable
dt = new DataTable();
adp.Fill(dt);
DataList1.DataSource = dt;
DataList1.DataBind();
}
VB.net
Code:
Protected Sub Page_Load(sender As
Object, e As
System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Binddatalist()
End If
End Sub
Public Sub Binddatalist()
Dim adp
As New
SqlDataAdapter("Sp_GetAlbum", con)
adp.SelectCommand.CommandType =
CommandType.StoredProcedure
Dim dt As New DataTable()
adp.Fill(dt)
DataList1.DataSource = dt
DataList1.DataBind()
End Sub
Write
the below given code on Itemcommend event of datalist.
C#
Code:
protected void DataList1_ItemCommand(object
source, DataListCommandEventArgs e)
{
int id
= Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex].ToString());
Session["albumid"]
= id;
Response.Redirect("gallery.aspx");
}
VB.net
Code:
Protected Sub DataList1_ItemCommand(source As Object, e As DataListCommandEventArgs)
Dim id As Integer =
Convert.ToInt32(DataList1.DataKeys(e.Item.ItemIndex).ToString())
Session("albumid")
= id
Response.Redirect("gallery.aspx")
End Sub
What do you think about this article?
If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.
EmoticonEmoticon