Reader Level:
ARTICLE

Show Image in GridView Using ASP.NET

Posted by Nitin Bhardwaj Articles | ASP.NET Controls April 24, 2013
In this article i will explain how to insert image in our project folder and insert image of path in database and show images in GridView.
  • 0
  • 0
  • 58237
 

In this article I explain how to insert an image into our project folder and insert an image of a path in the database and show images in a GridView. 

First I created a database EmpDetail. Now I will create a table in this database. 

Query Code

CREATE TABLE [dbo].[Image_Details](

      [ImageId] [int] IDENTITY(1,1) NOT NULL,

      [ImageName] [varchar](50) NULL,

      [Image] [nvarchar](max) NULL

) ON [PRIMARY]

Now insert some data into the LoginDetail table.

Now the following procedure is used.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Web site...". A window is opened. In this window, select "Empty Web Site Application" under Visual C#.

 Application_name.jpg

Give the name of your application as "Display_Image_in_Gridview" and then click "Ok".

Step 2

Now we will need to add a folder to our website, check the following procedure.
Go to Solution Explorer then right-click on the solution then select "Add" then select "New Folder". Then provide the name of this folder.

 solution-explorer.jpg

Complete Program

Display_Image.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Display_Image.aspx.cs" Inherits="Display_Image" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

     <h3 style="color: #0000FF; font-style: italic">Display Image in GridView Using ASP.NET</h3>

    <div>

    <asp:FileUpload ID="fileupload" runat="server" />

        <br />

        <asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />

        <br />

        <br />

    </div>

        <div>

            <asp:GridView runat="server" ID="gdImage" HeaderStyle-BackColor="Tomato"  AutoGenerateColumns="false">

                <Columns>

                    <asp:BoundField DataField="ImageId" HeaderText="ImageId" />

                    <asp:BoundField DataField="ImageName" HeaderText="ImageName" />

                    <asp:ImageField DataImageUrlField="Image" HeaderText="Image"></asp:ImageField>                   

                </Columns>

            </asp:GridView>

        </div>

    </form>

</body>

</html>

  

Display_Image.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.IO;

using System.Configuration;

public partial class Display_Image : System.Web.UI.Page

{

    SqlConnection con;

    SqlDataAdapter da;

    DataSet ds;

    SqlCommand cmd;

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

    protected void upload_Click(object sender, EventArgs e)

    {

        try

        {

            string filename = Path.GetFileName(fileupload.PostedFile.FileName);

            fileupload.SaveAs(Server.MapPath("~/Images/" + filename));

            con = new SqlConnection(ConfigurationManager.ConnectionStrings["ImageSql"].ConnectionString);

            con.Open();

            cmd = new SqlCommand("insert into Image_Details (ImageName,Image) values(@ImageName,@Image)", con);

            cmd.Parameters.AddWithValue("@ImageName", filename);

            cmd.Parameters.AddWithValue("@Image", "Images/" + filename);

            cmd.ExecuteNonQuery();

            da = new SqlDataAdapter("select * from Image_Details",con);

            ds = new DataSet();

            da.Fill(ds);

            gdImage.DataSource = ds;

            gdImage.DataBind();

        }

        catch (Exception ex)

        {

            upload.Text = ex.Message;

        }

    }

}

 

Output

 Animation2.gif

For more information, download the attached sample application.

Article Extensions
Contents added by Shekhar Chauhan on Jun 23, 2013
You can go through with link below:

http://chauhanshekhar.blogspot.in/p/how-to-show-images-in-gridview-from.html

This will help you....!
COMMENT USING

Trending up