向数据绑定的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>  

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

另一种选择是在单元格内使用<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>