ASP.NET 中继器控件在 FireFox 中不起作用

Question

大家：

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

它在 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"" ...带有两组引号！

我认为中继器控件是问题的核心原因，但我再次谷歌搜索，找不到任何经历过这种类似情况的人！

Answer 1

您不应该猜测中继器将生成什么 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);
}

Answer 2

我不认为 ASP.NET Repeater 是问题所在。它要么是 ItemTemplate 标记中的 HTML、javascript 本身，要么是 IE 和 Firefox 之间的差异。

首先，使用 HTML 验证器验证输出的 HTML。解决任何问题。然后在 Firefox 中调试您的 JavaScript，看看它在做什么。也许 Firefox 在 this.style.backgroundImage 的值中包含双引号。

另外，这样做：

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

这样可以简化

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