asked on

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

ASKER CERTIFIED SOLUTION

craskin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

craskin

nevermind the two "src=" that's a typo. should just be src='images/<%# Container.DataItem("Image1") %>'

drliebs

ASKER

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?

craskin

inside the template item.

craskin

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>

drliebs

ASKER

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

craskin

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>

drliebs

ASKER

It makes perfect sense now, awesome! Thanks!