In this post, We discuss how to save image in folder and path in the database table using FileUpload Control and  then display uploaded images in a gridview.

In this post, we will cover the following points.

  • Display Images in GridView Control using the path stored in SQL Server database
  • How to show images from database in gridview in asp net 
  • How to display image in gridview from folder in asp.net c#

I have created a table in the database that will store the image path and name of the image.

CREATE TABLE [dbo].[Imagetable](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Filename] [nvarchar](150) NULL,
    [Filepath] [nvarchar](250) NULL
)
  1. Open visual studio add new empty website
  2. File>>New>>Web Site then select “C# “Empty Web Site”

3.Now add a folder in your website name Images or anything else as  you want.

Now I have added a Fileupload control, button, and a gridview and want to show all images in grid view.We want to display the images in GridView control. I have added 2 Bound Fields which displays ID and File Name and an Image Field.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Aimage.aspx.vb" Inherits="Aimage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                </td>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Upload" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <Columns>
                      <asp:BoundField DataField = "ID" HeaderText = "ID" />
                      <asp:BoundField DataField = "FileName" HeaderText = "Image Name" />
                      <asp:ImageField DataImageUrlField="FilePath" ControlStyle Width="100" ControlStyle-Height = "100" HeaderText = "Preview Image"/>
                   </Columns>
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

 

  • Double click on upload button and write code on button click event.
  • On button click we save the image in website folder and path in the database.Now i have created a method bindgridview() which bind gridview from database.
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;

public partial class Aimage : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.PostedFile != null)
        {
            string FileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
            FileUpload1.SaveAs(Server.MapPath("Images/" + FileName)); //save picture into Images folder in the website
            string imagepath= "Images/" + FileName;
            SqlCommand cmd = new SqlCommand("insert into Imagetable (Filename,Filepath) values('" + FileName + "','"+imagepath+"')",con);
            con.Open();
           int i= cmd.ExecuteNonQuery();
            con.Close();
            if (i > 0)
            {
                Response.Write("<script>alert('image uploaded successfully!')</script>");
                bindgridview();
            }
            else
            {
                Response.Write("<script>alert('something went wrong try later!')</script>");
                bindgridview();
            }
        }
    }

    public void bindgridview()
    {
        SqlCommand cmd = new SqlCommand("select * from Imagetable", con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        if (ds.Tables[0].Rows.Count > 0)
        {
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
        
        
    }
}

Download Source Code

Now run the application and upload a image.

Display image from database folder path

As we know that GridView is a very useful  Asp .net control for displaying data from a database. Using GridView we can display items in the two-dimensional grid and provide more flexibility for displaying and working with data compared to other controls.Various features of GridView Control can be customized as per the requirement.

When we set the AutoGenerateColumns property of GridView Control to true, GridView Control examine our Data Object using Reflection and find all the properties of a Custom Object or all the Fields of a Record. Then create a Separate Column for each Field or Property in the same order in which they are found.

In this way, a GridView Control automatically creates columns based on the Field / Properties of its Record / Custom Object, which causes us to write any Extra Code to render a Custom Object or Record’s data to Output. However, many times we do not get the flexibility we need by GridView Control due to Automatically Create Columns.

For example, if we want to hide a column in our GridView Control, or change the order in which it is rendered, or change the heading text of those columns, then we need set AutoGenerateColumns Property to false to achieve all these requirements.

After setting this property to False, we have  to manually specify the <Columns> section in the <GridView> Element.

The post Upload and Display an Image in Gridview From Image Path in Database -C# appeared first on Software Development | Programming Tutorials.



Read More Articles