背景图像未显示在 DataList ItemTemplate 内的 div 中?
background-image not being displayed in div inside DataList ItemTemplate?
我正在尝试将 DataList
的 ItemTemplate
中的 div
的 background-image
设置为 column
[=35= 中的文件名] 在用作列表视图数据源的 datatable
中。
这是我目前使用的代码,其中包括两个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
我最终通过消除 ~/ 来更改 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>
我正在尝试将 DataList
的 ItemTemplate
中的 div
的 background-image
设置为 column
[=35= 中的文件名] 在用作列表视图数据源的 datatable
中。
这是我目前使用的代码,其中包括两个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
我最终通过消除 ~/ 来更改 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>