Post
Ask Question

Show Image in GridView Using ASP.NET

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

  1. CREATE TABLE [dbo].[Image_Details](  
  2.       [ImageId] [int] IDENTITY(1,1) NOT NULL,  
  3.       [ImageName] [varchar](50) NULL,  
  4.       [Image] [nvarchar](max) NULL  
  5. ) 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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Display_Image.aspx.cs" Inherits="Display_Image" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.      <h3 style="color: #0000FF; font-style: italic">Display Image in GridView Using ASP.NET</h3>  
  10.     <div>  
  11.     <asp:FileUpload ID="fileupload" runat="server" />  
  12.         <br />  
  13.         <asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />  
  14.         <br />  
  15.         <br />  
  16.     </div>  
  17.         <div>  
  18.             <asp:GridView runat="server" ID="gdImage" HeaderStyle-BackColor="Tomato"  AutoGenerateColumns="false">  
  19.                 <Columns>  
  20.                     <asp:BoundField DataField="ImageId" HeaderText="ImageId" />  
  21.                     <asp:BoundField DataField="ImageName" HeaderText="ImageName" />  
  22.                     <asp:ImageField DataImageUrlField="Image" HeaderText="Image"></asp:ImageField>                     
  23.                 </Columns>  
  24.             </asp:GridView>  
  25.         </div>  
  26.     </form>  
  27. </body>  
  28. </html> 

Display_Image.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.IO;  
  10. using System.Configuration;  
  11. public partial class Display_Image : System.Web.UI.Page  
  12. {  
  13.     SqlConnection con;  
  14.     SqlDataAdapter da;  
  15.     DataSet ds;  
  16.     SqlCommand cmd;  
  17.     protected void Page_Load(object sender, EventArgs e)  
  18.     {  
  19.     }  
  20.     protected void upload_Click(object sender, EventArgs e)  
  21.     {  
  22.         try  
  23.         {  
  24.             string filename = Path.GetFileName(fileupload.PostedFile.FileName);  
  25.             fileupload.SaveAs(Server.MapPath("~/Images/" + filename));  
  26.             con = new SqlConnection(ConfigurationManager.ConnectionStrings["ImageSql"].ConnectionString);  
  27.             con.Open();  
  28.             cmd = new SqlCommand("insert into Image_Details (ImageName,Image) values(@ImageName,@Image)", con);  
  29.             cmd.Parameters.AddWithValue("@ImageName", filename);  
  30.             cmd.Parameters.AddWithValue("@Image", "Images/" + filename);  
  31.             cmd.ExecuteNonQuery();  
  32.             da = new SqlDataAdapter("select * from Image_Details",con);  
  33.             ds = new DataSet();  
  34.             da.Fill(ds);  
  35.             gdImage.DataSource = ds;  
  36.             gdImage.DataBind();  
  37.         }  
  38.         catch (Exception ex)  
  39.         {  
  40.             upload.Text = ex.Message;  
  41.         }  
  42.     }  
  43. } 

 

Output

 Animation2.gif

For more information, download the attached sample application.


Similar Articles