Displaying multiple images in one datalist template cell

Question

I know there's a lot of questions about the subject, but my situation is sort of different. I'm trying to display 3 images in one datalist cell, for example I have a product table in SQL server that can have multiple images.

 Image Mapping table 
 ID     URL_Mapping_ID ProductID  
 1      image 1.png    1
 2      image 2.png    1
 3      image 3.png    1   

 Product Table 
 ProductID   Product
 1           Chips

Upon selecting it from SQL, the result is multiple rows but with different Images.

Now on my asp datalist I have to show 1 product with all the images, so that the user can enlarge the thumbnails.

What will the best way be to implement this scenario?

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

You need to use a HttpHandler and set the IsReusable property to true to cater for the multiple images:

Streaming Databased Images Using HttpHandler

public class FeaturedHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        ...
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

To bind the image(s):

<img class="mainEventsImage" 
    src='<%# Eval("MainImagePath").ToString().Replace("\\", "/") %>' 
        alt='<%# Eval("Title") %>' runat="server" />

Since you may not know how many images there are per record in advance, you'll have to create the image controls dynamically in your code-behind:

Dynamically create item templates server-side

edited May 23 '17 at 12:12

Community

1
1

answered Oct 25 '12 at 19:33

IrishChieftain

15,108
7
50
91

But my images are not in binary fields, just the url. – jinx Oct 25 '12 at 19:37
You didn't specify that. Then just do a join on the tables to get the URLs. – IrishChieftain Oct 25 '12 at 19:38
Thanks for the response, then how do I go on about binding the images to the datalist after getting it from the handler?? – jinx Oct 25 '12 at 19:42
Thanks it's just what I wanted, Now for the tricky part, I don't have a fixed number of images, it must be dynamic, for instance there can be any number of images. – jinx Oct 25 '12 at 19:46
Then you'll have to create the image controls dynamically in your code-behind - it should work just fine. – IrishChieftain Oct 25 '12 at 19:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18602/discussion-between-irishchieftain-and-jinx) – IrishChieftain Oct 25 '12 at 19:49

score 1 · Accepted Answer · answered Oct 25 '12 at 19:58

I did a small demo demonstrating how to show a dataList within a dataList. For your given example I created another image dataList within the ItemTemplate of the product dataList.

<asp:DataList ID="dlProducts" runat="server" DataKeyField="ProductID" DataSourceID="sqlProducts">
    <HeaderTemplate>
        <table>
        <thead>
            <tr>
                <th>ProductID</th>
                <th>Product</th>
                <th>Images</th>
            </tr>
        </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /></td>
            <td><asp:Label ID="ProductLabel" runat="server" Text='<%# Eval("Product") %>' /></td>
            <td>
                <asp:DataList ID="dlImages" runat="server" DataKeyField="ID" DataSourceID="sqlImages">
                    <ItemTemplate>
                        <img src='<%# Eval("URL_Mapping_ID") %>' width="20px" height="20px" />
                    </ItemTemplate>
                </asp:DataList>
                <asp:SqlDataSource runat="server" ID="sqlImages" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' ProviderName='<%$ ConnectionStrings:ConnectionString.ProviderName %>' SelectCommand="SELECT * FROM [Image] WHERE ([ProductID] = @ProductID)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="ProductIDLabel" PropertyName="Text" Name="ProductID" Type="Int32"></asp:ControlParameter>
                    </SelectParameters>
                </asp:SqlDataSource>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:DataList>
<asp:SqlDataSource ID="sqlProducts" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>

This solution may be quick and dirty so any tips or hints are welcome! FYI: running this demo results into this.

Output for the given solution

do you have any kind of ressource for me to learn more about performance problems on nesting controls? I did a quick search and all I found was _Avoid Creating Deep Hierarchies of Controls_ in [MSDN](http://msdn.microsoft.com/en-us/library/ff647787.aspx) — Pilgerstorfer Franz, Oct 25 '12 at 20:28
Best book out there is http://www.amazon.com/gp/product/1430223839?ie=UTF8&tag=aspnettelligent-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1430223839) — IrishChieftain, Oct 25 '12 at 20:30
The whole thing is recursive, and it's not just an execution time issue, with each control added the ViewState grows, slowing page load time even further. — IrishChieftain, Oct 25 '12 at 20:34
whish I would know how to move this to a discussion - if you have some spare minutes? — Pilgerstorfer Franz, Oct 25 '12 at 20:36
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18606/discussion-between-pilgerstorfer-franz-and-irishchieftain) — Pilgerstorfer Franz, Oct 25 '12 at 20:41

Displaying multiple images in one datalist template cell

2 Answers2