Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

 

In my previous example, we have learned on how to save the actual image to a folder and image path to the database. In this example, I’m going to show on how to display those images in a GridView and Repeater control.

 

To get started, let’s create a method for fetching the image information from the database. Here’s the code block below:

 

    private DataTable GetData()

    {

        DataTable dt = new DataTable();

        SqlConnection connection = new SqlConnection(GetConnectionString());

 

        try

        {

            connection.Open();

            string sqlStatement = "SELECT * FROM ImageInfo";

            SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection);

            SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

 

            sqlDa.Fill(dt);

        }

        catch (System.Data.SqlClient.SqlException ex)

        {

            string msg = "Fetch Error:";

            msg += ex.Message;

            throw new Exception(msg);

        }

        finally

        {

            connection.Close();

        }

 

        return dt;

    }

 

As you can see, the code above is very straight forward and self explanatory. Now since we already have a method for fetching the data from database then we can bind the result in a Data Representation control. First let’s use a GridView control for displaying the image.

 

In Visual Studio, grab a GridView control from the toolbox and place it in the webform. The GridView markup would look something like below:

 

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

        <Columns>

            <asp:ImageField DataImageUrlField ="ImagePath" ControlStyle-Width="100px" ControlStyle-Height="100px"></asp:ImageField>

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

        </Columns>

        </asp:GridView>

 

As you can see, we used ImageField column for displaying the image using the path and used a BoundField column for displaying the image infornamtion.

 

Now, to make it work then let’s bind the GridView control at Page_Load event. See below:

 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            DataTable dt = GetData();

            if (dt.Rows.Count > 0)

            {

                //Binding GridView

                GridView1.DataSource = dt;

                GridView1.DataBind();

            }

        }

    }

 

Running the code above will show something like below in the page:

 


 

Now, let’s go ahead and display the image in the Repeater control. Here’s the markup of Repeater control:

 

        <asp:Repeater ID="Repeater1" runat="server">

        <ItemTemplate>

            <asp:Image ID="Image1" runat="server" Width="100px" Height="100px" ImageUrl='<%# Bind("ImagePath") %>' />

            <asp:Label ID="Label1" runat="server" Text='<%# Bind("ImageName")%>'></asp:Label><br />

        </ItemTemplate>

        </asp:Repeater>

 

Unlike GridView, a Repeater control doesn’t have an ImageField or BoundField columns so we use ItemTemplate so that we can add our own server control for displaying the image and the information as shown above.

 

At Page_Load event, we can bind the Repeater control as what we did for binding the GridView. See the code block below:

 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            DataTable dt = GetData();

            if (dt.Rows.Count > 0)

            {

                Repeater1.DataSource = dt;

                Repeater1.DataBind();

            }

        }

    }

 

Running the code above will show something like below in the page:

 


 

That’s it! Hope you will find this example useful.

 

Posted on Sunday, August 2, 2009 5:55 PM ADO.NET , ASP.NET , C# , GridView | Back to top


Comments on this post: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)

# re: Uploading and Storing Image Path toDatabase and Image to Folder - Part 2
Requesting Gravatar...
This is the most sensible way of doing it - too many people are too keen to save images strait to the db - which is not sensible.



--------------
Car Lover Extrodinare - I love show cars and modified wheels me!
Left by modified show cars on Aug 04, 2009 12:42 AM

# re: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)
Requesting Gravatar...
nice presentation.its very useful
Left by mahesh kumar sanka on Sep 29, 2011 9:28 PM

# re: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)
Requesting Gravatar...
How about to display it in a details view
Left by bbaale on Nov 23, 2011 6:44 PM

# re: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)
Requesting Gravatar...
hai,
this site very useful for me...in my grid image display successfully...now i want to display image url in fileupload when i click edit in grid...how to do this...
Left by sathyanarayanan on Mar 27, 2012 5:59 PM

# re: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)
Requesting Gravatar...
wt i do...............?


GetConnectionString error ?
Left by sekar on Oct 16, 2012 10:47 AM

# re: Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)
Requesting Gravatar...
readable understandable...really acknowledgeable!!!!!!!!!!!
Left by Shivani on Jan 22, 2013 4:06 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free