.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Melody Anderson

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Displaying Images along with Data by GridView control in ASP.Net

Posted By:ASPEvil       Posted Date: June 15, 2014    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

ASP.Net GridView with Images/Pictures


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.

When there is any requirement to display data from the SQLServer database along with their images, please follow the steps as described below:-

1) 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 you like.

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"

7) 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

9) 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
 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend