将动态图像覆盖添加到数据绑定 Gridview

Question

我正在尝试在 ASP.Net (C#) 中的数据绑定 gridview 单元格中添加单元格的图像叠加层。该效果旨在在图像中包含一个字符串，该字符串将位于从服务器提取的图像之上。

IE：

数据库包含图像的路径。数据网格根据相关项目的 ID 将这些图像拉入。我需要从数据库中提取价格并将其放置到放置在数据绑定图像单元格上的图像上。

SQL 语句得到结果。 结果包含项目图像的路径。 物品有时会打折，因此需要特殊的覆盖物。 Overlay 的价格会有所不同。

我试着把它分解成简单的部分。我不确定我是否在想事情，但我找不到可行的方法来做到这一点。由于 ASP.Net 中的数据网格控件，数据被转换为表，并且没有任何方法可以确定创建表后的 ID。

如果有人有任何想法，我将不胜感激。

Answer 1

一种方法是使用 CSS 将单元格的背景设置为图像，并将价格作为纯文本写入同一单元格（显示渲染输出）：

<td class="product"  
    style="background: url(path-to-image.png) top left no-repeat">  
    <span class="price">$ 3.22</span>  
</td>  

这种方法的唯一缺点是必须将单元格显式设置为与图像相同的尺寸，您可能不知道。

另一种选择是在单元格内使用<img> 元素，并且仍然使用<span> 作为纯文本价格（显示渲染输出）：

<td class="product">
    <img src="path-to-image.png" alt="..."/>
    <span class="price">$ 3.22</span>
</td>

无论采用哪种方法，您都可以使用 CSS 在单元格内定位和设置价格样式：

td.product { 
    position: relative
}
span.price {  
    position: absolute;
    top : 40px;    < whatever works for you
    left: 40px;    <  
}

一个非常简单的带有模板的 GridView 示例

您需要将 GridView 的 AutoGenerateColumns 属性设置为 false 并自行处理列创建和模板化。

<asp:GridView ID="products" runat="server"  
              AutoGenerateColumns="false"  
              DataKeyNames="productId"  
              DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="productId" HeaderText="Product ID" />
        <asp:TemplateField HeaderText="Whatever ...">
            <ItemTemplate>
                <img src='<%# DataBinder.Eval(Container.DataItem,"productImageUrl") %>'
                     alt="..." />
                <span class="price">
                    <%# DataBinder.Eval(Container.DataItem,"productPrice","{0:c}") %>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="productDesc" HeaderText="Description" />
    </Columns>
</asp:GridView>