How to use JavaScript inside Razor Syntax

Question

I need to use JavaScript inside my Razor syntax. This is my JavaScript function. I need to get my element ID and based on this, I try to get Image URK from list of images of my model.

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

How can I put the ID of an element sent to the function to the Model.Images object?

I tried something like this, but none of it worked:

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

Thank you.

possible duplicate of [Razor Syntax and Javascript](http://stackoverflow.com/questions/4045308/razor-syntax-and-javascript) — Tom, Jul 07 '15 at 18:06
Call your javascript function passing the id of the picture...Is this for an on click call? — code, Jul 07 '15 at 18:08
@Tom This is not a duplicate of that question - that question/answer was about rendering javascript on the initial page load, which is perfectly legal. This question is about executing server code on a value which is only known at the client, and therefore cannot be answered. — Joe Enos, Jul 07 '15 at 18:11
you should just store the url's in hidden inputs and set the id of the hidden input to the image id and value to the url, then you can get the src like `$("#" + id).val()` — JamieD77, Jul 07 '15 at 18:13
It would appear that Model.Images is an array and that the id is an HTML id which cannot be simply a number and must begin with a letter: http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name Thus it seems that you might have an issue there perhaps? The index of some image in a DOM group perhaps? — Mark Schultheiss, Jul 07 '15 at 19:27
Note that the rendering of the @Url.xxx takes place prior to your even knowing the element.id value so ALL your examples are invalid as presented - you would have to do some partial URL string mashup to get some ID inserted into a string at run time. — Mark Schultheiss, Jul 07 '15 at 19:33

score 2 · Answer 1 · answered Jul 07 '15 at 18:10

2

You can't do what you're attempting. Remember that Razor code runs at the server at the time the page is loaded. Javascript loads at the client after the page has completed rendering. You can't simply call server code which depends on the result of client code.

In order to make a server call using a value known only at runtime, you have to use some kind of AJAX call.

answered Jul 07 '15 at 18:10

Joe Enos

39,478
11
80
136

Firstly I wanted to do this with JavaScript, this was my second option. But thank you. – user3183406 Jul 10 '15 at 16:36

score 1 · Accepted Answer · answered Jul 07 '15 at 19:43

One suggestion might be to generate your element with a data value containing the URL of the "bigger" image, then access that value in the page side function.

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

The "id' there would be the index (server side) of that list element and then access it somehow, such as jQuery it might be:

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

How to use JavaScript inside Razor Syntax

2 Answers2