Displaying Images with GridView
Posted Date: October 22, 2010
Displaying Images along with Data by GridView control in ASP.Net 2.0
When we build any website, many business requirements come to our way
to challenge our technical skill as well as knowledge. Many of the
challenges just don't know our efficiency and skill and take meaningless
challenges with us and at last become bound to salute us as we just
touch our fingers to the keyboard and fulfill all the requirements by
just couple of minutes and sometime, just by few seconds with a killing
smile in our face.
But there were some really few challenges who
would make us worried about. One of them was how to display images in
webpages along with our data. This is very much required when we make
any website which will having the capability to display some products
with their images, such as Shopping Websites. This job was really time
consuming when we would use ASP.Net 1.x. But from ASP.Net 2.0, we can do
it by literally few seconds. Thanks a lot to the Microsoft and its
developers' team who did devote themselves to provide us a very
excellent programming experience.
Point to be noted: The images
directly can't be inserted to the database, instead we can keep the
images to any other location on the server and we can save the exact
path of the images to our SQLServer DataBase to point those images.
there is any requirement to display data from the SQLServer database
along with their images, please follow the steps as described below:-
Make an extra column which will hold the path information of the
images, in the SQLServer table where your data are. Name the column as
2) Upload the images to a folder on the server and
write down the path information of each images and insert these path
information to the database, where you just made a column to hold these
path information. Suppose, you have an image namely "abc.gif" and you
have made a folder namely "Images", on the server. Then, your path
information string will be "Images/abc.gif" and you need to save this
string to the column, which has been made for saving the path
information. Similarly, get other images' path information and save it
to the column of the SQLServer. Repeat this job for all the images, you
required to display.
3) Drag and Drop a grid view control on the design page
4) Drag and Drop a SqlDataSource control on the design page
5) Click on the smart tag window of the SqlDataSource control
6) Select "Configure Data Source"
Make a new connection or use an existing connection string to connect
with the DataBase where your data and images' path information are
8) Click the "Next" button
Choose "Specify columns from a table or view" or "Specify a custom SQL
statement or stored procedure" and make any changes to the default query
according to your need of showing data
10) Click the "Next" button
11) Test the query by clicking the "Test Query" button
12) Click the "Finish" button
13) Click on the smart tag window of gridview and then click "Edit Columns"
14) Add an image field from the "Available Field" of "Field" wizard
15) Click on the image field
16) Go to its properties on the right side
17) Select "DataImageUrlField" under Data section
18) Delete the original(bound field) image field from the left side (namely, "Selected Field")
19) Be sure that you have not checked the "Auto-generate fields" checkbox
20) Finally, click "Ok".
Now run your website and see the images are being displayed with your data.
Happy Coding and Website Development