Добавление динамического наложения изображений в Gridview с привязкой к данным

Question

Я пытаюсь добавить наложение изображения ячейки в ячейке сетки данных в ASP.Net (C #). Эффект предназначен для того, чтобы внутри изображения была строка, которая будет располагаться поверх изображения, полученного с сервера.

IE:

База данных содержит путь к изображениям. Сетка данных вытягивает эти изображения на основе идентификатора рассматриваемых элементов. Мне нужно вытащить цену из базы данных и наложить ее на изображение, которое расположено над ячейкой изображения с привязкой к данным.

Оператор SQL получает результаты. Результаты содержат путь к изображению для элементов. Товары иногда продаются, поэтому необходимо специальное наложение. Наложение будет иметь изменяющуюся цену.

Я пытался разбить его на легкие порции. Я не уверен, что я слишком много думаю или нет, но я не могу найти подходящий способ сделать это. Данные преобразуются в таблицу благодаря элементу управления сеткой данных в ASP.Net, и нет никакого способа определить идентификаторы после создания таблицы.

Если у кого-то есть идеи, я был бы очень признателен.

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 с шаблонами

Вам нужно будет установить для свойства AutoGenerateColumns GridView значение 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>