ASP.NET Repeater Control не работает в FireFox - PullRequest
Новая
       9

ASP.NET Repeater Control не работает в FireFox

3 голосов
/ 29 ноября 2011

все

У меня есть приложение ASP.NET, которое использует элемент управления Repeater для отображения галереи миниатюр. Когда пользователь наведет курсор на одну из миниатюр, основное изображение представит эту миниатюру.

Он использует элемент управления Repeater в UserControl следующим образом: 

<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 "" ... с двумя наборами кавычек!

Я думаю, что управление повторителем является основной причиной проблемы, но я снова погуглил и погуглил и не смог найти никого, кто сталкивался с подобной ситуацией!

Ответы [ 2 ]

2 голосов
/ 29 ноября 2011

Я не думаю, что повторитель ASP.NET является проблемой. Это либо HTML-код в вашем теге ItemTemplate, либо сам javascript, либо разница между IE и Firefox.

Во-первых, проверьте выводимый HTML с помощью валидатора HTML. Исправьте любые проблемы. Затем отладьте свой JavaScript в Firefox, чтобы увидеть, что он делает. Возможно, firefox включает двойные кавычки в значение this.style.backgroundImage.

Также сделайте так: 

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

как это для упрощения 

<%# DataBinder.Eval(Container.DataItem, "ImageName") %>
2 голосов
/ 29 ноября 2011

Вы не должны угадывать, какие идентификаторы сгенерирует ретранслятор, а затем жестко закодировать против этого. 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);
}
...