时间戳

首页 > 解决方案 > 从 MVC 模型将参数传递给 JavaScript 函数

javascript - 从 MVC 模型将参数传递给 JavaScript 函数

问题描述

我有一个显示许多照片的剃刀视图。当用户单击照片时，我希望该照片显示在不同的框中。

显示所有照片（照片显示正常）：

 @foreach (var item in Model.CatalogItems)
                            {
                                <td><img src="../../Content/@item.ProductImageURL" onclick="changeImage('@item.Id')" border="0" data-toggle="tooltip" style="width:120px; height: 120px; border: 1px solid #444; vertical-align: bottom;" data-placement="top" title="@item.ProductDescription" /></td>
                            }

将不同照片更改为所选照片的​​ JavaScript：

<script type="text/javascript">

    function changeImage(itemid) {
        document.getElementById("#empty-item1").innerHTML = "<img src='../../Content/@Model.CatalogItems[itemid].ProductImageURL' border='0'
    }
</script>

我在 JavaScript 函数上遇到的错误是当前上下文中不存在名称“itemid”。

标签： javascriptasp.net-mvc

解决方案

那是因为itemId它是一个 javascript 变量。C# 表达式@Model.CatalogItems[itemid]将在服务器上执行。

razor 视图引擎将在您的 razor 视图中执行代码，并且该代码的输出（主要是 HTML 和 JavaScript，浏览器可以理解）将被发送到客户端（浏览器）。然后浏览器将在客户端执行此响应（解析 HTML、JavaScript 并执行它）。该changeImage方法是一种 JavaScript 方法，当最终用户单击图像时，它会在浏览器上执行。当 razor 执行该行@Model.CatalogItems[itemid]以产生输出时，它没有itemId定义/可用的变量，因此您收到错误。

itemId您可以按原样传递图像路径，而不是传递。

onclick="changeImage('../../Content/@item.ProductImageURL')"

并在您的changeImage方法中，使用此值更新其他图像 src

function changeImage(src) {
    document.getElementById("#empty-item1").innerHTML = "<img src='" + src +"' />
}

推荐阅读