javascript - 如何将值从 MVC 发送到 Javascript

Question

我有一个包含多张图片的目录，我想按下其中一张图片，然后在不离开当前页面的情况下更改我的一个 DIvs 中的完整图像。

在网上搜索后，我发现了这个:

<a href="imagem(@picture.FullSizeImageUrl" ... >
<img src="@picture.ImageUrl" ... />
</a>

应该与这个 javascript 函数连接:

function imagem(txt) {
    document.getElementById("imagemgrande").innerHTML = "<img src='" + txt + "' alt=''/>" 

使用 ID imagemgrande 将我想要的图像发送到我的 div。

当我运行代码并将图像悬停时，浏览器底部显示的链接为我提供了我想要显示的图像的正确路径(这意味着 java 函数应该接收正确的路径)但是当我单击，它不执行任何操作。我认为图像标签可能创建错误，并在 document.getElementByID 之前放置了一个 alert(txt)。它甚至没有注册。

我是不是忘记了什么，我不是在声明 javascript 变量 txt 吗？

Answer 1

为什么要在href中调用js函数？您应该在 onclick

中执行此操作

 <a href="#" onclick="return imagem(@picture.FullSizeImageUrl)" ... >

并且不要忘记return false;

function imagem(txt) {
    document.getElementById("imagemgrande").innerHTML = "<img src='" + txt + "' alt=''/>" 
return false;
}

编辑

您必须将字符串作为参数发送到 showImage 函数。我已经检查过了，它有效。

<a href="#" onclick="return showImage('/big_image.jpg')">
    <img src="/some_image.jpg"/>
</a>

<div id="imagemgrande"></div>

<script type="text/javascript">
function showImage(imgUrl) {
    try {
        document.getElementById("imagemgrande").innerHTML = "<img src='" + imgUrl + "' alt=''/>" 
    } catch(error) {
        alert(error);
    }
    return false;
}

window.onerror = function(errorMessage, url, line) {
    var errorText = 'message: ' + errorMessage + '\nurl: ' + url + '\nline: ' + line;
    alert(errorText);
}
</script>