jquery - How do I access a model object in a view using jquery?

Question

I'm just new with asp.net mvc using razor syntax in the view and I would like to know how can I use a model object inside a jQuery routine to set an img src?

For ex:

 setSourceImage()
    {
       @foreach(var myPaths in Model)
       {
        @: jQuery('#sampleImage').attr('src',myPaths.imgPath)
       }
    }

I know the syntax is wrong, but in a sense that is what I want to achieve.

Thanks.

Answer 1

是的，语法错误。我建议您使用该Json.Encode方法安全地序列化您感兴趣的模型的属性：

<script type="text/javascript">
    function setSourceImage() {
        var imageSources = @Html.Raw(Json.Encode(Model.Select(x => x.imgPath)));
        for (var i = 0; i < imageSources.length; i++) {
            jQuery('#sampleImage').attr('src', imageSources[i])
        }
    }
</script>

可能呈现为：

<script type="text/javascript">
    function setSourceImage() {
        var imageSources = ['/images/img1.jpg', '/images/img2.jpg'];
        for (var i = 0; i < imageSources.length; i++) {
            jQuery('#sampleImage').attr('src', imageSources[i])
        }
    }
</script>

显然，要使这个工作正常，imgPath模型的属性应该包含服务器上图像的绝对或相对 url。它不应包含图像的物理位置，例如c:\inetpub\wwwroot\myapp\images\img1.jpg. 如果是这种情况，您必须在渲染视图之前在服务器上转换此属性。