Fatal编程技术网
  • csharp/
  • 带有javascript onclick的C#ASP.Net图像属性在IE9中不起作用

带有javascript onclick的C#ASP.Net图像属性在IE9中不起作用

c# asp.net visual-studio-2008

带有javascript onclick的C#ASP.Net图像属性在IE9中不起作用,c#,asp.net,visual-studio-2008,C#,Asp.net,Visual Studio 2008,我正在使用一个数据列表来填充一辆汽车，并将其图像作为缩略图。 当用户单击一个小图像时，onclick事件需要从数据库中调用该图像，并将其加载到上面较大的图像控件中。 我使用ImageHandler.ashx从SQL检索图像二进制文件，并在图像控件中呈现它 在Chrome和IE7中，一切都可以完美工作，但在IE9中却无法工作。 如果我在IE9中单击小图像，就像图像处理程序永远不会执行一样，较大的图像永远不会加载选定的图像。在IE9中查看页面源代码时，代码如下所示： IE9页面来源： <tab

我正在使用一个数据列表来填充一辆汽车，并将其图像作为缩略图。 当用户单击一个小图像时，onclick事件需要从数据库中调用该图像，并将其加载到上面较大的图像控件中。 我使用ImageHandler.ashx从SQL检索图像二进制文件，并在图像控件中呈现它

在Chrome和IE7中，一切都可以完美工作，但在IE9中却无法工作。 如果我在IE9中单击小图像，就像图像处理程序永远不会执行一样，较大的图像永远不会加载选定的图像。在IE9中查看页面源代码时，代码如下所示：

IE9页面来源：

<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl00_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=29';" src="ImageHandler.ashx?ID=29" alt="29" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
    </table>
</td><td class="DataList">
    <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl01_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=30';" src="ImageHandler.ashx?ID=30" alt="30" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
    </table>
</td><td class="DataList">
    <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl02_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=31';" src="ImageHandler.ashx?ID=31" alt="31" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
</table>
标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="css/asp.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $('.imgOpacity').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 500);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.6 }, 500);
                   })
            });
        });
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 780px" class="OtherControl">
            <tr>
                <td style="padding-left: 8px; padding-top: 3px;">
                    <asp:Label ID="lblDescription" runat="server" Font-Bold="True" ForeColor="#FF9900"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <table style="width: 100%">
                        <tr>
                            <td align="center">
                                <table style="padding-left: 0px; padding-top: 0px; width: 320px; height: 220px; background-image: url('Images/imageframe.png');
                                    background-repeat: no-repeat; background-color: #FFFFFF;">
                                    <tr>
                                        <td align="center">
                                            <asp:Image ID="imgBig" runat="server" Height="200px" Width="300px" onerror="this.src='Images/no_image.jpg'"/>
                                        </td>
                                    </tr>
                                </table>
                                <asp:DataList ID="DataListVehicles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
                                    ShowFooter="False" ShowHeader="False" BorderStyle="None" OnItemDataBound="DataListVehicles_ItemDataBound"
                                    HorizontalAlign="Center">
                                    <ItemStyle CssClass="DataList" />
                                    <ItemTemplate>
                                        <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
                                            background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;">
                                            <tr>
                                                <td align="center">
                                                    <asp:Image ID="imgVehicle" runat="server" CssClass="imgOpacity" Width="90px" Height="55px"
                                                        onerror="this.src='Images/no_image.jpg'" BorderStyle="None" />
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>            
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>  


$（函数（）{
$（'.imgocapacity'）。每个（函数（）{
$（此）。悬停(
函数（）{
$（this.stop（）.animate（{opacity:1.0}，500）；
},
函数（）{
$（this.stop（）.animate（{opacity:0.6}，500）；
})
});
});
希望有人能帮忙。 谢谢

而不是

imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");
试试这个

imgVehicle.Attributes.Add("onclick", imgBig.ClientID + ".src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");
在
DataListVehicles\u ItemDataBound

中，可能是您在onClick JavaScript中引用“imgBig”的方式，您可以尝试使用document.getElementById（'imgBig'）。src='。。。。相反您是否打开了IE开发者工具窗口，并在单击图像时检查了JavaScript错误？

我想引用“imgBig”图像，但“this”不会被重新分配到其现有图像吗？不幸的是，这不起作用，IE中呈现的页面仍然只返回“imgBig”作为客户端Id。谢谢你的帮助！我试试看，谢谢。IE开发者工具在单击时出现以下错误：SCRIPT5009:“imgBig”未定义。希望您的更改能够解决此问题，并很快会返回给您。您的原始代码假设在范围中定义了变量“imgBig”，这取决于浏览器的情况。或者，由于您已经在使用JQuery，您可以执行
$（“#imgBig”）.attr（'src'）=”…
，这也可以跨浏览器工作。最后，为了保证服务器端代码的完整性，您应该执行
“$（'#“+imgBig.ClientID+”）.attr（'src'））=…
获取为imgBig生成的客户端id。这在您的情况下不会有任何区别，但是如果imgBig位于面板或其他控件中，客户端id可能最终会被ASP.NET修饰。我只是认为我会将此共享给可能需要它的任何其他人。
document.getElementById
工作正常，直到我实现为止母版页进入我的项目。然后我得到错误“无法设置属性'src'对象的值为null或未定义”，因此，再次更改我的代码，这次更改为JQuery提示，如LambyPie所述。
imgVehicle.Attributes.Add（“onclick”），“$（'#“+imgBig.ClientID+”）.attr（{src:'ImageHandler.ashx？ID=“+m#Vehicles.ListingPhotos[e.Item.ItemIndex].ID+“}”）；”；
它工作得很好：） 
imgVehicle.Attributes.Add("onclick", imgBig.ClientID + ".src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");