c# - 在DataList ItemTemplate里面的div中没有显示background-image？ - Thinbug

在DataList ItemTemplate里面的div中没有显示background-image？

时间：2016-04-15 19:50:18

标签： c# html css asp.net asp.net-4.0

我正尝试将background-image div ItemTemplate DataList设置为column {/ 1}}中datatable image_path中的文件名{1}}用作列表视图的数据源。

这是我目前正在使用的代码，其中包含两个datalists。它基于此处的代码：background-image eval

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWebApp.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text="My lagel"></asp:Label>
                <div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","~/Styles/Images/{0}") %>)'></div>
            </ItemTemplate>
        </asp:DataList>

    <asp:DataList ID="DataListImages" runat="server" RepeatColumns="5">
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton2" ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}")%>' runat="server" />
            </ItemTemplate>
    </asp:DataList>



    </div>
    </form>
</body>
</html>

问题是DataListDiv未显示。显示第二个datalist（DataListImages），但它使用ImageButton。两者都使用相同的eval，所以我知道绑定是正确的。

这就是datatable的样子：

BedNum     Waiter     image_path
201        Joe        Red.png
202        Jim        Green.png
203        Mary       Red.png
204        Carl       Yellow.png

1 个答案:

答案 0 :(得分：0)

我最后通过消除〜/ 来更改background-image:url div的相对路径：

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
    <ItemTemplate>
        <div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","Styles/Images/{0}") %>)'></div>
    </ItemTemplate>
</asp:DataList>