1

ASP.Net（C＃）のデータバインドされたグリッドビューセル内にセルの画像オーバーレイを追加しようとしています。エフェクトは、サーバーからプルされた画像の上に配置される画像内の文字列を持つように設計されています。

IE：

データベースには画像へのパスが含まれています。データグリッドは、問題のアイテムのIDに基づいてこれらの画像を取り込みます。データベースから価格を取得し、データバインドされた画像セルの上に配置された画像に配置する必要があります。

SQLステートメントは結果を取得します。結果には、アイテムの画像へのパスが含まれます。セール中の商品もあるので、特別なオーバーレイが必要です。オーバーレイには、さまざまな価格がオーバーレイされます。

私はそれを簡単な部分に分解しようとしました。私は物事を考えすぎているかどうかはわかりませんが、これを行うための実行可能な方法を見つけることができません。ASP.Netのデータグリッドコントロールにより、データはテーブルに変換されます。テーブルの作成後にIDを判別する方法はありません。

誰かが何かアイデアを持っているなら、私は最も感謝するでしょう。

4

1 に答える 1

1

これを行う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>
于 2011-02-25T04:22:27.500 に答える