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.

Call your javascript function passing the id of the picture...Is this for an on click call? — code
– code, Commented Jul 7, 2015 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
– Joe Enos, Commented Jul 7, 2015 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
– JamieD77, Commented Jul 7, 2015 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: 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
– Mark Schultheiss, Commented Jul 7, 2015 at 19:27

Joe Enos · Accepted Answer · 2015-07-07 18:10:11Z

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 7, 2015 at 18:10

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3183406 Over a year ago

Firstly I wanted to do this with JavaScript, this was my second option. But thank you.

Mark Schultheiss · Accepted Answer · 2015-07-07 19:43:43Z

1

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;
    });
});

answered Jul 7, 2015 at 19:43

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

How to use JavaScript inside Razor Syntax

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related