How to display images in gridview from database using asp.net

Advertisement

In this Article I will explain how to display images in gridview from database
I Created a table with Name Display_Images as shown below.

USE [chinnu]
GO

/****** Object: Table [dbo].[Display_Images] Script Date: 11/07/2013 05:40:28 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Display_Images](
[Id] [int] IDENTITY(1,1) NOT NULL,
[ImageName] [nvarchar](max) NOT NULL,
[ImagePath] [nvarchar](max) NOT NULL
) ON [PRIMARY]

GO

Now I am creating an empty web application with name UpLoadimages,After that I am adding a web form with name
DisplayImages.aspx.

I am designing a UI with FileUplod Control ,Button and Grid view.
In DisplayImages.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DisplayImages.aspx.cs" Inherits="UpLoadimages.DisplayImages" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID = "BtnUploadImages" runat = "server" Text = "UploadImages"
onclick="BtnUploadImages_Click" />
</div>
<div>
<asp:GridView ID="gridview" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id"/>
<asp:BoundField DataField="ImageName" HeaderText="ImageName"/>
<asp:ImageField DataImageUrlField = "ImagePath" ControlStyle-Height = "50" ControlStyle-Width = "50" HeaderText="Image Preview" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

In DisplayImages.aspx.cs I am writing the logic to display images in grid view
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.IO;

namespace UpLoadimages
{
public partial class DisplayImages : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("Data Source=DotNetSharePoint;Database=Chinnu;User Id=sa;Password=Password123;");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}

}

private void BindGridData()
{
try
{
SqlCommand command = new SqlCommand("SELECT * from Display_Images", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
gridview.DataSource = dt;
gridview.DataBind();
}
catch (Exception ex)
{
}

}

protected void BtnUploadImages_Click(object sender, EventArgs e)
{
if (FileUpload1.PostedFile != null)
{
string ImageName = Path.GetFileName(FileUpload1.PostedFile.FileName);
FileUpload1.SaveAs(Server.MapPath("DisplayImages/" + ImageName));
string Query = "Insert into Display_Images(ImageName,ImagePath)" + "values(@ImageName,@ImagePath)";
SqlCommand cmd = new SqlCommand(Query);
cmd.Connection = con;
cmd.Parameters.AddWithValue("@ImageName", ImageName);
cmd.Parameters.AddWithValue("@ImagePath", "DisplayImages/" + ImageName);
cmd.CommandType = CommandType.Text;

con.Open();
cmd.ExecuteNonQuery();
con.Close();


}
}
}
}

In Web.config iam giving the database connection string
<connectionStrings>
<add name="Connstring" connectionString="Data Source=DotNetSharePoint;Database=Chinnu;User Id=sa;Password=Password123;" providerName="System.Data.SqlClient" />
</connectionStrings>

After completing all the steps,Press F5
we can see the output as fallows.


Advertisements
SHARE

Lakshmi Tulasi Jasti

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

1 comments:

  1. When say images from database it means images stored in database not on the file system and pths to them stored in database

    ReplyDelete