如何使用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

Yes, the syntax is wrong. I would recommend you using the Json.Encode method to safely serialize the property of your model you are interested in:

<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>

which might be rendered as:

<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>

Obviously for this to work the imgPath property of your model should contain an absolute or relative url to the image on the server. It should not contain the physical location of the image like c:\\inetpub\\wwwroot\\myapp\\images\\img1.jpg . If this is the case you will have to transform this property on the server before rendering the view.