How do you display images from a recordset in a web control

I want to retrieve records from a database, one of the fileds is the image name as it is stored in a database.  The basic layout of the page would be something like this:

(record 1)
Data Field1
Data Field2
Image1     Image2     Image3    Image4
Description....
------------------------------------------------------
(Record 2)
Data Field1
Data Field2
Image1     Image2     Image3    Image4
Description....
------------------------------------------------------
etc...."looping" through 5 records at a time

I have tried datagraid with an image field,but I get a parser error "System.Web.UI.WebControls.DataGridColumnCollection must have items of type 'System.Web.UI.WebControls.DataGridColumn'. 'asp:image' is of type 'System.Web.UI.WebControls.Image'."

                  <asp:TemplateColumn HeaderText="Image">
                        <ItemTemplate>
                              <asp:Image Width="150" Height="125" ImageUrl="image url here" Runat = "server" />
                        </ItemTemplate>

What is the best method that allows you to control the layout, and allows you to display images while paging through several records at a time?  

I need an example in C# that has a layout similar to what I tried to explain, as opposed to a grid that just goes from left to right.

I feel so stupid, I could do this in 5 minutes in asp classic....
drliebsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

craskinCommented:
if you create a gridview instead of a datagrid you can use

<asp:ImageField DataImageUrlField="Image1" HeaderText="Image" DataImageUrlFormatString="~/images/{0}" />

that's if the image1 datafield does not contain the full path to the image, otherwise, the UrlFormatString can be left off.

in a datagrid, you can skip the asp:Image control all together and just use

<img src=src='images/<%# Container.DataItem("Image1") %>' >

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
craskinCommented:
nevermind the two "src=" that's a typo. should just be src='images/<%# Container.DataItem("Image1") %>'
drliebsAuthor Commented:
I already have a datagrid in the works so if I could use that it would be easier.  To clarify, you said I could skip the asp:Image control, where would I put the image tag?  Would this go inside of another control or a template item?
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

craskinCommented:
inside the template item.
craskinCommented:
the <itemtemplate> tag allows you to do basically anything you want inside the template, you can use all the standard HTML you're familiar with and to call data for that row, you just use the <%# %> tags where you need them. so your code should read:

<asp:TemplateColumn HeaderText="Image">
                    <ItemTemplate>
                         <img src='images/<%# Container.DataItem("Image1") %>' >
                                 ... whatever else you want to put next to or below the image
                                     in the same cell ...
                    </ItemTemplate>
</asp:TemplateColumn>

drliebsAuthor Commented:
Very good, thanks for your help craskin.  I have one more detail; do either the datagrid or dataviews allow for multiple rows?  Where I could have data fields on top of each other?

Data Field1
Data Field2
Image1     Image2     Image3    Image4
Description....
craskinCommented:
you can do that with a single template column:

<asp:TemplateColumn HeaderText="Image">
                    <ItemTemplate>
                         <%# Container.DataItem("datafield1") %><br>
                         <%# Container.DataItem("datafield2") %><br>

                          <img src='images/<%# Container.DataItem("Image1") %>' >
                          <img src='images/<%# Container.DataItem("Image2") %>' >
                          <img src='images/<%# Container.DataItem("Image3") %>' >
                          <img src='images/<%# Container.DataItem("Image4") %>' >
                          <br>
                         <%# Container.DataItem("description") %>
                               
                    </ItemTemplate>
</asp:TemplateColumn>

drliebsAuthor Commented:
It makes perfect sense now, awesome!  Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.