ASP.NET Repeater控件在FireFox中无法工作

Question

大家好：

我有一个使用 Repeater 控件显示缩略图库的 ASP.NET 应用程序。当用户将鼠标悬停在其中一个缩略图上时，主图像会呈现该缩略图。

它使用一个像这样的 UserControl 中的 Repeater 控件：

<asp:Image ID="pictureImage" runat="server" Visible="true" Width="200px" />
<asp:Repeater ID="rpProductImages" runat="server" Visible="false">
    <ItemTemplate>
        <div>
            <div style="float: left" id="smallImage" runat="server">
                <div class="smallAltImage" onmouseover="showImage();" 
                    style="border: 1px solid #999999; margin: 5px 5px 5px 4px;
                    width: 45px; height: 45px; background-position: center; background-repeat: no-repeat; 
                    background-image: url('<%#ResolveClientUrl(productImagesPath)%><%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "ImageName")) %>');">
                </div>
                <asp:Label ID="lblImageName" runat="server" Visible="false"><%# Eval("ImageName")%></asp:Label>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

然后，在一个javascript文件中，写下以下代码：

function showImage(){
    // Get thumbnail path.
    var img = (this.style.backgroundImage).substring(4, (this.style.backgroundImage).length - 1);
    $('#ctl00_ContentPlaceHolder1_ProductDetails1_pictureImage').attr('src', img);
}

在IE9中，它能很好地运行，显示图像的完全限定路径。但是，在FireFox8中，img src看起来像这样：“ProductImages/K42JY_500.jpg”...有两组引号！

我认为Repeater控件是问题的核心原因，但是我搜索了又搜索，却找不到任何经历过类似情况的人！

- Hyland Computer Systems

---

你能在FireFox中展示生成的完整HTML页面吗？ - JohnFx

Answer 1

我认为ASP.NET Repeater不是问题所在。可能是您ItemTemplate标记中的HTML，JavaScript本身或IE和Firefox之间的差异。

首先，请使用HTML验证器验证生成的HTML。修复任何问题。然后在Firefox中调试您的javascript以查看它正在做什么。也许firefox将双引号包含在this.style.backgroundImage的值中。

另外，将此内容变为：

<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "ImageName")) %>

like this to simplify

<%# DataBinder.Eval(Container.DataItem, "ImageName") %>

- slolife

---

关于中继器的问题，我们已经达成了一致，因为中继器是一个服务器端控件，所以使用的浏览器与此无关。 - Stephen

+1 在 background-image: url('') 中有单引号，而且由于 String.Format 的结果，asp 输出也是双引号，导致出现了 background-image('"..."');。你正确地发现了这一点。我不确定你的答案是否解决了问题，但它确实改进了 OP 代码。 - Bazzz

Answer 2

您不应该猜测重复器将生成哪些ID，然后针对此进行硬编码。ASP.NET 4支持更具预测性的名称生成，或者您可以使用CSS类。

另外，除非此函数作为对象的方法调用，否则this将等于全局对象，我怀疑这不是您想要的。

function showImage(){
    // Get thumbnail path.
    var img = (this.style.backgroundImage).substring(4, (this.style.backgroundImage).length - 1);
    $('#ctl00_ContentPlaceHolder1_ProductDetails1_pictureImage').attr('src', img);
}

- Adam Rackis

---

我其实自己解决了这个问题。哇！我一直在担心可能要给多个人钱！基本上，我只是在代码的var img行中使用了5, 2作为参数来去除令人不悦的引号。虽然如此，还是感谢所有写信的人！你们是这个地方如此出色的原因。 - Hyland Computer Systems

@RobertHyland 当然没问题——很高兴你让它工作了。如果这两个回答有帮到你，可以接受或点赞哦——在我给这个问题点赞后，你现在已经有这个能力啦 :) - Adam Rackis