Question

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

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

 @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”在当前上下文中不存在。

Answer 1

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

剃须刀视图引擎将在您的剃须刀视图中执行代码，并将其输出（大多数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 +"' />
}

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

1 个答案: