Le contrôle répétiteur ASP.NET ne fonctionne pas dans FireFox

Question

Tout le monde :

J'ai une application ASP.NET qui utilise un contrôle Repeater pour afficher une galerie de vignettes. Lorsque l'utilisateur passe la souris sur l'une des vignettes, l'image principale présente cette vignette.

Il utilise un contrôle Repeater dans un UserControl comme ceci :

<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>

Puis, dans un fichier javascript, ceci :

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

Il fonctionne bien dans IE9, affichant le chemin d'accès complet de l'image. Dans FireFox8, cependant, le src img ressemble à ceci : ""ProductImages/K42JY_500.jpg"" ... avec deux séries de guillemets !

Je pense que le contrôle du répéteur est la cause centrale du problème mais j'ai cherché sur Google et encore sur Google et je n'ai trouvé personne qui ait connu cette situation similaire !

Answer 1

Vous ne devriez pas deviner quels identifiants le répéteur va générer, puis coder en dur en fonction de cela. ASP.NET 4 prend en charge une génération de noms plus prédictive, ou vous pouvez utiliser des classes CSS.

De même, à moins que cette fonction ne soit appelée comme une méthode sur un objet, this sera égal à l'objet global, ce qui, j'en doute, est ce que vous voulez.

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

Je ne pense pas que le répéteur ASP.NET soit le problème. C'est soit le HTML qui est dans votre balise ItemTemplate, le javascript lui-même, ou la différence entre IE et Firefox.

Tout d'abord, validez le HTML produit à l'aide d'un validateur HTML. Corrigez les problèmes éventuels. Ensuite, déboguez votre javascript dans Firefox pour voir ce qu'il fait. Peut-être Firefox inclut-il les guillemets dans la valeur de this.style.backgroundImage.

Aussi, faites ça :

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

comme ceci pour simplifier

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