ASP.NET Repeater控件在Firefox中不工作

问题描述：

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

它在这样的用户控件使用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控件是问题的中心原因，但我再次谷歌搜索和谷歌搜索，并找不到任何人遇到过类似的情况！

你也可以说是为页面在FireFox中生成的完整的HTML？ – JohnFx

答

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

我实际上自己修复了它。呼！出汗，我可能不得不给多个人的钱！基本上，我只是在var img代码行中使用5和2来取消进攻性引号。尽管如此，感谢所有写过的窥视者！你这个地方这么好的原因。 –

@RobertHyland当然 - 很高兴你的工作。如果这些答案中的任何一个都有帮助，请随时接受或注意他们 - 现在您可以在此问题的+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")) %>

这样简化

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

关于中继器的约定不是问题，因为中继器是服务器端控制，所以浏览器在使用中没有任何影响。 – Skuld

+1'background-image：url（''）'内有单引号，由于'String.Format'产生'background-image（'“...”'），所以asp输出也是双引号。 '。你发现这个正确。我不确定您的答案是否可以解决问题，但它肯定可以改进OP代码。 – Bazzz

ASP.NET Repeater控件在Firefox中不工作

相关推荐