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

【问题标题】：Displaying multiple images in one datalist template cell在一个 datalist 模板单元格中显示多个图像
【发布时间】：2012-10-16 01:34:23
【问题描述】：

我知道有很多关于这个主题的问题，但我的情况有点不同。我正在尝试在一个数据列表单元格中显示 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 数据列表中，我必须显示 1 个带有所有图像的产品，以便用户可以放大缩略图。

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

【问题讨论】：

标签： c# asp.net sql-server

【解决方案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

【讨论】：

但我的图片不在二进制字段中，只是 url。
您没有指定。然后只需对表进行连接以获取 URL。
感谢您的回复，那么在从处理程序中获取图像后，如何继续将图像绑定到数据列表？？
谢谢，这正是我想要的，现在对于棘手的部分，我没有固定数量的图像，它必须是动态的，例如可以有任意数量的图像。
然后您必须在代码隐藏中动态创建图像控件 - 它应该可以正常工作。

【解决方案2】：

我做了一个小演示，演示如何在 dataList 中显示 dataList。对于您给定的示例，我在 product dataList 的 ItemTemplate 中创建了另一个 image 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>

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

【讨论】：

你有什么资源可以让我了解更多关于嵌套控件的性能问题吗？我进行了快速搜索，发现的只是 Avoid Creating Deep Hierarchies of Controls in MSDN
最好的书是amazon.com/gp/product/…)
整个事情都是递归的，这不仅仅是一个执行时间问题，每添加一个控件，ViewState 都会增长，进一步减慢页面加载时间。
希望我知道如何将其转移到讨论中 - 如果您有空闲时间？
我会添加评论以获取链接 ;-)