Question

我知道有很多关于这个问题的问题，但我的情况有点不同。我试图在一个datalist单元格中显示3个图像，例如我在SQL Server中有一个可以有多个图像的产品表。

 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

从SQL中选择它后，结果是多行但具有不同的图像。

现在，在我的asp datalist上，我必须显示包含所有图像的1个产品，以便用户可以放大缩略图。

实施此方案的最佳方法是什么？

Answer 1

您需要使用HttpHandler并将IsReusable属性设置为true以满足多个图像的需要：

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" />

由于您可能无法预先知道每条记录有多少图像，因此您必须在代码隐藏中动态创建图像控件：

Dynamically create item templates server-side

Answer 2

我做了一个小演示，演示如何在dataList中显示dataList 。对于您的示例，我在产品dataList 的ItemTemplate内创建了另一个图像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>

此解决方案可能很快且很脏，因此欢迎任何提示或提示！仅供参考：将此演示结果运行到此。

Output for the given solution

在一个datalist模板单元中显示多个图像

2 个答案: