Introduction

A while ago, I had a task to develop a User’s Maintenance Module which should have a Datagrid view to display the information about Users with the corresponding image/picture and having corresponding command image link option to Edit/Delete and display in full size image on detail page with corresponding inputted information. Also, at the bottom center of the grid, there should be an option to add a new user. When the Add button is clicked, there should be a popup custom control page to input an entry and store some information with images within a database as part of project requirements. This uploaded image file should be resized as a thumbnail and fixed full size, then should be displayed into image box as thumb custom control add page. After input of all the earlier mentioned things, there should be a button option to save or cancel Add option entry, then automatically back to grid, then refresh.

This article will demonstrate how to display/store and retrieve image data from an SQL database to gridview, and shall also demonstrate how to create thumbnail/full size images from resizing from uploaded file, then save this into SQL database. Also I added a magnifying glass like zoom on mouse over on image.

The Database

Why should we use a database and not just have the images within a virtual folder under the main ASP.NET folder? Well there are several reasons why it might be good to store images in a database, such as:

If the images binary data is stored in a database table, we have all the data required to make the image any size we want, and it will always look like the original image, also we have an option to resize the image and save it with a specified Height/width dimension.

If the images binary data is stored in a database table, when we back the database up, we have also backed up all the images.

Performance on retrieving images to display from web is faster.

I am not saying this is the only way to go. I supposed it’s simply one way. Therefore I thought I should share what I found with you.

So what does the database look like?

It simply contains one table called tbl_image which can be setup using the following script (contained within the object creation script at the top of this article).

Let's have a look at one of this generic handler with full out text information/image from table to data gridview, they are quite easy, in fact I think the comments code in the below code pretty much explain them in enough detail. So I won't bore you with any more explanatory words, as it's clear.

Let's have a look at custom control client code and at its code behind that I’ve made, they are quite easy, in fact I think the comments code in the below code pretty much explains them in enough detail. So I won't bore you with any more explanatory words, as it's clear.

And here is the Code Behind of DataGridView, they are quite easy, in fact I think the comments code on the below code pretty much explains them in enough detail. So I won't bore you with any more explanatory words, as it's clear.

Points of Interest

The author in this article describes the technical usage on how to display/store and retrieve Image data unto SQL database to gridview, and also demonstrates how images from uploaded file can be resized and saved into a table.

This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details.

Error68 Could not load file or assembly 'System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' or one of its dependencies. The system cannot find the file specified. C:\Documents and Settings\vhscomp2\Desktop\UserSample\UserSample\Sample\web.config 43

Thanks for your appreciation. Actually I’d detached some of the functionality on this article (First version). The original has a Menu like an outlook, Image Slideshows,
edit, and image list view with features of expanding images of mouse over. I did not bore much comments and explanation on this; I should do it on my second version which should include more features as mention above. I should try to convert it to be compatible on mobile version…

This is a great Article . Thanks. However i find hard to follow yours as not without much comments. How can we achieve this using Entity Framework 4.0 and using filestream Varbinary(max) ??. Any article of such with a mobile version could make me happy and hope to get any elaboration on the topic

Thanks for your appreciation. Actually I’d detached some of the functionality on this article (First version). The original has a Menu like an outlook, Image Slideshows,
edit, and thumb nail image list view with features of expanding images of mouse over. I did not bore much comments and explanation on this; I should do it on my second version which should include more features as mention above. I should try to convert it to be compatible on mobile version…