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“”......带有两组引号！

我认为Repeater控件是问题的主要原因，但我再次用Google搜索和Google搜索，找不到任何经历过类似情况的人！

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") %>

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

2 个答案: