How to Display an image, from a DB, into the Gridview (ASP.NET 2.0)

S

Swanand Mokashi

http://www.asp.net/default.aspx?tabindex=5&tabid=41
Personal web starter kit has a http handler that does exactly that. You can
download the starter kit and look at the code.

--
Swanand Mokashi
Microsoft Certified Solution Developer (.NET) - Early Achiever
Microsoft Certified Application Developer (.NET)

http://www.dotnetgenerics.com/
DotNetGenerics.com -- anything and everything about Microsoft .NET
technology ...

http://www.swanandmokashi.com/
http://www.swanandmokashi.com/HomePage/WebServices/
Home of the Stock Quotes, Quote of the day and Horoscope web services
 
A

Auto

Thanks for the answer, but i don't want the photo in the page
(Response.BinaryWrite) i want it in a Gridview column.

Regards.
 
T

the4man

It's very easy. The code that you have seen in that urls write the
image in the page, isn't it? Well, use that page as source of an <img>
html control. For example:

<img src="generateimage.aspx?idimage=3" />

Just add that line in the gridview column template. In the
generetaimage.aspx page put the code with the "Response.BinaryWrite".
Thats all! If you need to load an specific image, pass parameters (like
in the example) to the page, and use it to filter the SQL query.

Bye!
 
T

the4man

By the way, I think that the example you have mentioned before do the
same that I have said. It's the only way to do this. I don't understand
why you can not use an imagefield or img control inside a column
template.
 
A

Auto

the4man said:
By the way, I think that the example you have mentioned before do the
same that I have said. It's the only way to do this. I don't understand
why you can not use an imagefield or img control inside a column
template.

I would like to build a web monitor application that show a Gridview and
refresh its contents every one or two seconds.
I was able to implement that in ASP.NET 2.0, using ATLAS with a
TimerControl, ScriptManager and an UpdatePanel.
In each row i have an image (not big) that i would like to show, but i don't
see an ease way as for the other fields.
I'm realizing that i could load the image, using your tip, only when the
page loads, not every one or two seconds in the postback event,
since the images don't change as the other data does. That's way i was
looking for an easy way to load the binary image from the DB.

I know that in the beta version there was this possibility: bind directly
the binary field of the image to the gridview column.

Regards,

Auto.
 
T

the4man

Well, I think that behaviour (bind an image to a column) is still
available in the final version too (the first url that you sent use
that method).

Using "my" method, that is, converting a column into a template field,
then putting inside the <img> tag should work. Every time the gridview
is refreshed the img tag is regenerated too. If the image has changed
it will be shown in screen....if you use a little "trick". The url
should be like this: showimage.aspx?idimage=XXX&randonparameter=121232.
The "randonparameter" is just to avoid browsers cache the image.

I hope this help you. If not...post your code just to have a look at it.
 
A

Auto

I have the binary image in my hand...
No, i need the following steps to get the same:

1) Reopen the DB
2) Run the query
3) Output the image
4) Close the DB.

Take it easy, please.
 
T

the4man

I'm trying to help you the best I can. I'm sorry, you were right. The
imgfield of gridviews are based in urls, not binary data. So is not
valid for you. Sorry again. Then, I think, the only way is doing what I
said: a template field with a dinamicly generated url. I use a similar
mechanism in one of the web sites to show images from DB (but with an
asp:Repeater instead of an asp:GridView). There is no problems to do
that with GridViews, as i said before. Every time you refresh the
gridview, the image will be reload. Just add a random parameter in the
url, to avoid that IE catch the image.

At this moment I don't see any other solution. That don't mean it
doesn't exists. If you need more help from me, please tell me. If not,
I will "let it alone" (I'm not very sure what that expresion means,
because I'm not native, but more or less...)
 
A

Auto

Thank you for your help.

What i was saying was that in the ASP.NET 2.0 beta version there was the
possibility to bind a binary image from a DB, directly to the gridview, or
using the URL. In the final version thay left only the URL mode. Please,
don't say it's the same or this is not true.
Also i told you, i refresh the gridview every one or two seconds.
If i have 30 rows already in the Dataset, i need to show them as soon as
possible.
It's not good, FOR EACH ROW

1) Reopen the DB
2) Do the query
3) Output the image
4) Close the DB

when i have ALREAY all the data i need (photo included) in the Dataset.

Since the images don't change, i thought to load them in the image fields of
the gridview - using the URL as you told me -only when the page loads, not
for the post back every one or two seconds. For each post back i'm going to
refresh the data of the gridview, but the photos.

Regards.

Auto.
 
J

J. Toop

The bandwidth between the dataset and the DB is usually of less concern than
the bandwidth between the dataset and the browser. They may be using diaup
or other slow connectivity methods.

How can the browser know what the bits are if it does not recieve MIME
information with the image. I thought that the browser had to know what the
bits were in order to interpret them for the user on the other end of the
browser.

This allows browsers to do stuff like, retrieve the text and slowly fill in
the images asynchronously and if the user decides to browse away in the
interim (before all of the images arrive) then that is his/her choice. The
server doesn't have to send the browser the files not requested. This would
save bandwidth.

The gridview is html/text (or something like that) so if you send the image
as part of that stream you could get some really cool bytes on the screen
but you are thinking that the browser knows that these bytes were a "png" or
a "jpg" or a "gif" or a "bmp" (or some other?). file that you uploaded into
a field.

Whenever I've stored images in a database I've had to store the "mime type"
in a field and the size in bytes (so the browser knows I've sent it all now
.... stop making the Netscape Icon animate).

Remember that you can only retrive images from SQL server (I don't think
that MSAccess can do this)

What about serving up "filename.doc" files. Then it all comes as one stream
and you don't have to worry about the complexities of writing an "url" into
an <IMG> tag or other active content issues.

JT
 
T

the4man

Ok, I understand you. I said that was "the same" because I red the
article very quickly. It was one of that times that you see something
clear....even when is not true. :p. But yes, you are right, that option
doesn't exists in the final versión.

If you want to show the images just in page load, not in every refresh,
to reduce database access, try with my method again.....but WITHOUT the
"random" parameter. The browser will cache the images so won't have
calls to the DB (because won't call the createimage.aspx page). And you
can use server cache too. The page which generate the images can be
cached in server, just add an OutPutCache directive with a varybyparam
option. This will reduce access to the DB, and it always works (the
browser cache can be disabled by users). Another tip: add to the URL
the image width and height. For example:

<img src="createimage.aspx?image=10" width="100" height="60" />

With theese data the browse can "reserve" space in the page for the
images, and will show the texts as soon as posible, even if the images
aren't download yet.

I hope this help you.

By the way: yes, it's possible to retrive images from a MSAccess DB.
 
A

Auto

J. Toop said:
The bandwidth between the dataset and the DB is usually of less concern
than the bandwidth between the dataset and the browser. They may be using
diaup or other slow connectivity methods.

OK.
Anyway the image must arrive to the browser, isn't it ?
How can the browser know what the bits are if it does not recieve MIME
information with the image. I thought that the browser had to know what
the bits were in order to interpret them for the user on the other end of
the browser.

OK, good point.
I thought the imagefield was so smart to look at the header of the image
stream (binary in the DB) to understend what kind of images it was.

This allows browsers to do stuff like, retrieve the text and slowly fill
in the images asynchronously and if the user decides to browse away in the
interim (before all of the images arrive) then that is his/her choice. The
server doesn't have to send the browser the files not requested. This
would save bandwidth.

OK, good point.

The gridview is html/text (or something like that) so if you send the
image as part of that stream you could get some really cool bytes on the
screen but you are thinking that the browser knows that these bytes were a
"png" or a "jpg" or a "gif" or a "bmp" (or some other?). file that you
uploaded into a field.

Yes, i hope so, but maybe i'm realizing it is not.

Whenever I've stored images in a database I've had to store the "mime
type" in a field and the size in bytes (so the browser knows I've sent it
all now ... stop making the Netscape Icon animate).

The size in byte could be known from the DB Field.
I worked with SQL Server and DB with Images.
I was able to know the size by the DB field they were stored,
and also i was able to show them feeding the leadtools control.

Remember that you can only retrive images from SQL server (I don't think
that MSAccess can do this)

I think yes, i have a sample it does.

------------------------------------------------
string idx;

idx = Request.QueryString["idx"];
if (idx == null)
idx = "1";

OleDbConnection myConn = new
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" +
Server.MapPath("App_Data\\Photos.mdb"));
myConn.Open();
OleDbCommand _OleCmd = new OleDbCommand("SELECT * FROM Tabella1 WHERE ID = "
+ idx, myConn);
OleDbDataReader dr = _OleCmd.ExecuteReader();
if (dr.Read())
{
Response.Clear();
Response.ClearContent();
Response.ContentType = dr["ContentType"].ToString();
Response.BinaryWrite((byte[])dr["Photo"]);
}
else
Response.Write("NOT FOUND!");

if (myConn.State != System.Data.ConnectionState.Closed)
myConn.Close();
------------------------------------------------

The access db has stored also the content type.

What about serving up "filename.doc" files. Then it all comes as one
stream and you don't have to worry about the complexities of writing an
"url" into an <IMG> tag or other active content issues.

How can i get a .doc file form an image stored in a DB ?
I can try for learning purpose, but i don't think this is usefull for my
monitoring application.

Thank you.

Auto.
 
A

Auto

I had a smart idea :)

I can do this query in order to get the URL of the Image directly from the
DB:

"SELECT *, 'ShowPhoto.aspx?idx=' + cast(EmployeeID AS nvarchar(7)) AS
PhotoURL FROM Employees"

and bind it to an image field in the gridview as shown in the article in my
first post.
Anyway, How can i know which ContentType the photo has ?

In the Northwind DB the emplyee's photo is a BMP, but i if i set the
ContentType of the page = "image/bmp", i don't see any photo.
I tried with a different DB that has jpg photo and it works.

So, any help with emplyee's photo in the northwind DB ?
 
T

the4man

The content type is correct. I don't know why the image is not showed.
I will do some test when I arrive at work on monday. At this moment I
don't have the northwind db available.

Bye!

P.S: very good idea!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top