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

Question

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

IE：

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

SQL语句获取结果。 结果包含项目图像的路径。 商品有时会打折，因此需要特殊的覆盖层。 覆盖将有不同的价格覆盖它。

我试图将其分解为简单的部分。我不确定我是否想得太多，但我找不到可行的方法来做到这一点。由于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>  

这种方法的唯一缺点是单元格的大小必须明确调整为与图像相同的尺寸，您可能不知道。

另一种选择是在单元格内使用 元素，并仍然使用 表示纯文本价格（显示渲染输出）：

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