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>

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

1 个答案:

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