向數據綁定的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>