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

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

Introduction: In this article I am going to explain how to create photo album 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
)
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

Build and run the application. 


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


DEMO:

How to create photo album in asp.net

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.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon