Asp.Net Image Upload in 3-Tier Architecture

Asp.Net Image Upload in 3-Tier Architecture And display in Gridview from the Sql Server Database

Introduction:
This artical Explain How to apload image in database and how to display the image in gridview using 3-tier Architecture in asp.net with use of Sql Server Database.

DownLoad Complete Code : Download

Step 1 : Open Visual Studio 2010 and Create new web project
Step 2 : Create Database

Step 3: Create Class DAL.cs

public class DAL
    {
        public int id { get; set; }

        public string photo { get; set; }
    }

Step 4:

Create Class BAL.cs This class called as Business layer or middle layer logic cab added here

public class BAL
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=
        D:\3-tier_Image\App_Data\Database1.mdf;Integrated Security=True;User Instance=True");

       public void insert_data(DAL da)
       {
        con.Open();
        SqlCommand cmd = new SqlCommand("insert into user_master values('" + da.photo + "')", con);
        cmd.ExecuteNonQuery();
        con.Close();
        }
       public DataTable Select_data(DAL da)
       {
        DataTable dt = new DataTable();
        SqlDataAdapter sda = new SqlDataAdapter("select * from user_master", con);
        sda.Fill(dt);
        return dt;
        }
    }

Step 5: Now, add webform and give name web.aspx and add Gridview, in Gridview source code we can add following source

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                 <asp:TemplateField HeaderText="photo">
                <ItemTemplate>
                <asp:image ID="Image1" runat="server" Height="70px" Width="70px"
                 ImageUrl ='<%#Eval("photo")%>'></asp:image>
                 </ItemTemplate>

                <EditItemTemplate>
                <asp:image ID="Image2" runat="server" Height="70"
                 Width="70" ImageUrl ='<%#Eval("photo")%>'></asp:image>
                </EditItemTemplate>

                </asp:TemplateField>

                </Columns>
                </asp:GridView>

Step 6: Now you can add code Behind following here file_id is used as browse id using this id can select image from the folder. and we can add folder named as photo we can retrive image from this folder by below code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
namespace _3_tier_Image
{
   public partial class Web : System.Web.UI.Page
    {
      DAL da = new DAL();
      BAL ba = new BAL();

    protected void Page_Load(object sender, EventArgs e)
    {
     Grid();
     }

     public void Grid()
     {
      DataTable dt = new DataTable();
       dt = ba.Select_data(da);
       GridView1.DataSource = dt;
       GridView1.DataBind();

    }

    protected void Button1_Click(object sender, EventArgs e)
    {

      if (file_id.HasFile)
       {

        string file = Path.GetFileName(file_id.FileName);
        file_id.SaveAs(MapPath("~/photo/") + file);
        da.photo = "~/photo/" + file;
        }
          ba.insert_data(da);
          Response.Write("Image Inserted...........");
          Grid();
        }
    }
}

Step 7: Run Project and Select Image from Folder

See Other Tutorial :

*  AngularJS With ASP.NET MVC

*  Convert Rows to columns using 'Pivot' in SQL Server

*  Mvc Registration page With user exist using Ajax method

*  MVC 4 How to Perform Insert Update Delete Edit Select Operation

*  MVC4 Edit,update,Delete,cancel inside gridview using sql database

*  MVC 4 Gridview To Display Data Using SQL Server Database With Simple code

*  Login page in asp.net Mvc4 Web application

*  Mvc4 How to bind Dropdown List using Sql Database

* Gridview find control in asp.net

codelearne

Asp.Net Image Upload in 3-Tier Architecture

Asp.Net Image Upload in 3-Tier Architecture