Javascript 如何强制';asp:Image';加载新的';imageUrl'?
例如,我有一个代表“盒子”的页面。在这个框中,我有多个图像。我在数据网格视图中的一行上显示每个图像信息。我试图实现的是通过单击任意一行在网格下显示图像本身。我试图做的是下一步: 在代码隐藏中,加载网格时,我在Javascript 如何强制';asp:Image';加载新的';imageUrl'?,javascript,asp.net,vb.net,imageurl,Javascript,Asp.net,Vb.net,Imageurl,例如,我有一个代表“盒子”的页面。在这个框中,我有多个图像。我在数据网格视图中的一行上显示每个图像信息。我试图实现的是通过单击任意一行在网格下显示图像本身。我试图做的是下一步: 在代码隐藏中,加载网格时,我在ItemDataBound事件中添加了一个属性,例如: Private Sub dgrBox_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) H
ItemDataBound
事件中添加了一个属性,例如:
Private Sub dgrBox_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgrBox.ItemDataBound
If e.Item.DataItem IsNot Nothing Then
Dim oBox As Box
oBox = CType(e.Item.DataItem, Box)
If oBox IsNot Nothing Then
e.Item.Attributes.Add("onclick", "GetImage('" + oBox.ID.ToString() + "','" + oBox.Name + "');")
End If
End If
End Sub
在aspx
页面中,我有以下内容:
<div id="divInfo" style="overflow: auto; overflow-x: hidden; width: 100%; height: 330px;">
<table width="98%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%">
<tr>
<td>
<div id="divZoomSlider" style="overflow: auto;">
<asp:Image ID="imgRectoImg" runat="server" Width="700px" Height="300px" oncontextmenu="ZoomOutImage(this);return false;"
onclick="ZoomInImage(this);"/>
<asp:Image ID="imgVersoImg" runat="server" Width="700px" Height="300px" oncontextmenu="ZoomOutImage(this);return false;"
onclick="ZoomInImage(this);"/>
</div>
</td>
<td align="right" valign="bottom">
<input type="image" onclick="return FlipImage();" src="../Images/recto-verso-impression-icone-8241-32.png" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
我已使用这些警报确保触发了我的单击事件。我还访问了警报中显示的url
,以确保一切正常
我的问题是,当我单击数据网格中的任何给定行时,都不会显示任何图像。我觉得我缺少了一些东西,比如刷新页面或以某种方式刷新
asp:Image
以从使用javascript
代码分配的新imageUrl
加载图像。我不知道如何修复它,因为我对前端开发几乎没有经验。imageURL
只是一个服务器端属性
ASP.NET引擎将ASP.NET标记更改为HTML,然后发送到浏览器,浏览器只能读取HTML
在呈现的HTML中,包含URL的属性称为“src”。看
因此,将imageURL
更改为src
,如下所示
var oimgRectoImg = document.getElementById("imgRectoImg");
var oimgVersoImg = document.getElementById("imgVersoImg");
oimgRectoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=RECTO&TYPE=Out";
oimgVersoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=VERSO&TYPE=Out";
我想应该能解决你的问题。这很有道理。我会试试看,然后再打给你。阿德森,行得通。只有一件事我必须改变。我从
src
的开头删除了~
。没问题,关于~
,这是一个很好的观点。当您编写服务器端代码并转换为完整的URL时,ASP.NET再次解决了这一问题。您不需要客户端,因为浏览器无论如何都会将相对URL解析为完整URL。我已经编辑了问题以删除它。这就解释了一切。我应该更仔细地区分服务器将要解决的问题和客户端将要解决的问题。
var oimgRectoImg = document.getElementById("imgRectoImg");
var oimgVersoImg = document.getElementById("imgVersoImg");
oimgRectoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=RECTO&TYPE=Out";
oimgVersoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=VERSO&TYPE=Out";