如何在 Razor 语法中使用 JavaScript答案

【问题标题】：How to use JavaScript inside Razor Syntax如何在 Razor 语法中使用 JavaScript
【发布时间】：2015-07-07 18:04:42
【问题描述】：

我需要在我的 Razor 语法中使用 JavaScript。这是我的 JavaScript 函数。我需要获取我的元素 ID，并基于此，我尝试从我的模型图像列表中获取 Image URK。

<script>
    function pickThisPicture(element) {
        var id = element.id;
        document.getElementById("big-picture").src = "@Url.Content(Model.Images[id].Url)";
    }
</script>

如何将发送给函数的元素的 ID 放到 Model.Images 对象中？

我尝试了类似的方法，但都没有成功：

document.getElementById("big-picture").src = "@Url.Content(Model.Images[@:id].Url)";
document.getElementById("big-picture").src = "@Url.Content(Model.Images[<text>id</text>].Url)";

谢谢。

【问题讨论】：

Razor Syntax and Javascript 的可能重复项
调用你的 javascript 函数传递图片的 id...这是点击调用吗？
@Tom 这不是那个问题的重复——那个问题/答案是关于在初始页面加载时呈现 javascript，这是完全合法的。这个问题是关于在一个只有客户端知道的值上执行服务器代码，因此无法回答。
您应该只将url存储在隐藏输入中，并将隐藏输入的id设置为图像id并将值设置为url，然后您可以像$("#" + id).val()一样获取src
看起来 Model.Images 是一个数组，而 id 是一个 HTML id，不能简单地是数字，必须以字母开头：w3.org/TR/1999/REC-html401-19991224/types.html#type-name 因此，您可能有一个也许有问题？可能是 DOM 组中某些图像的索引？

标签： javascript asp.net-mvc razor

【解决方案1】：

你不能做你正在尝试的事情。请记住，加载页面时，Razor 代码在服务器上运行。页面完成渲染后，Javascript 在客户端加载。不能简单地调用依赖于客户端代码结果的服务器代码。

为了使用仅在运行时已知的值进行服务器调用，您必须使用某种 AJAX 调用。

【讨论】：

首先我想用 JavaScript 来做这件事，这是我的第二个选择。不过谢谢。

【解决方案2】：

一个建议可能是使用包含“更大”图像的 URL 的数据值生成您的元素，然后在页面端函数中访问该值。

<image data-big-url='@Url.Content(Model.Images[id].Url' class='smallimages' />

“id”将是该列表元素的索引（服务器端），然后以某种方式访问它，例如可能是 jQuery：

$(document).ready(function(){
    $('.smallimages').on('click',function(){
        var big = $(this).data('big-url');
        document.getElementById("big-picture").src = big;
    });
});

【讨论】：