How to create photo album in asp.net - Part I | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

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 store procedure to insert data into database:

Create PROCEDURE Sp_InsertAlbum

(

@name varchar(100),

@albumcover varchar(max),

@id int output

)

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

BEGIN

SET NOCOUNT ON;

select * from Tb_Album

END

HTML Markup of webform:

<style>

table tr td

{

text-align: center;

}

{

text-decoration: none;

font-weight: bold;

font-size: 18px;

color: #000;

}

</style>

</head>

<body>

<table>

<tr><td>Create Album :</td><td> <asp:TextBox ID="txtalbumname" runat="server"></asp:TextBox></td></tr>

<tr><td>Upload Cover :</td><td> <asp:FileUpload ID="albumcover" runat="server" /></td></tr>

<tr><td></td><td> <asp:Button ID="btncreate" runat="server" Text="Create Album"

/></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" />

<table>

<tr><td><asp:Image ID="imgEmp" runat="server" Width="300px" Height="300px" ImageUrl='<%# Bind("AlbumCover") %>' style="padding:10px"/></td></tr>

</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

Build and run the application.

Part II : howto upload or add photo to album in asp.net

DEMO:

Labels

Technology

How to create photo album in asp.net - Part I

Part II : howto upload or add photo to album in asp.net

Post a Comment

MKRdezign

Contact Form