Razor syntax in JavaScript code block

Question

I want to know if it is a good practice to use razor in JavaScript code. For example:

<script type="text/javascript">
   var variable = @some.Id
</script>

Or it's better to create hidden value and then take it with JavaScript, like this?

<input type="hidden" id="someId" value"@some.Id" />

<script type="text/javascript">
   var variable = $('#someId').val();
</script>

EDIT:

@{
var formVariables = serializer.Serialize(new
                                             {
                                                 id = Model.Id, 
                                                 name = Model.Name, 
                                                 age = Model.Age
                                             });

<input type="hidden" id="header_variables" value="@formVariables"/>
<script type="text/javascript" src = "/Scipts/..."></script>
}

Is this good solution?

jim tollan · Accepted Answer · 2012-07-05 08:45:43Z

3

I personally would go with an extension of the 2nd option and create a seperate .js file. The reason being, if you delegate work out to a 3rd party to take care of the jquery/javascript parts of the UI, then they need not have any sight of the backend functionality.

There are a variety of ways to use html5 attributes (i.e. data-attribute='foo') on the inputs which would allow you to 'decorate' your inputs with a cargo of properties which could be parsed inside the external .js file.

A very brief example:

in your view:

<input type='text' id='myId' data-action='@Url.Action("MyAction")' class='myClass' />

in your .js file:

var targetAction = $('#myId').attr('data-action');

this gives complete separation between the .js and the views. It does require a degree of planning of course.

Hope this helps

answered Jul 5, 2012 at 8:45

jim tollan

22.5k4 gold badges53 silver badges64 bronze badges

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

Comments

Trogvar · Accepted Answer · 2012-07-05 08:27:30Z

2

Razor will be parsed at server-side and replaced by relevant output. Therefore, in my opinion it is totally indifferent, if you place it in Javascript or HTML - at client side only the output value will be visible. Thus, in the above example I would choose the first option (place it directly in JS), since you will not have the otherwise unnecessary hidden input field.

answered Jul 5, 2012 at 8:27

Trogvar

8566 silver badges17 bronze badges

2 Comments

karaxuna Over a year ago

I'm worrying about clean code. For example if I want to place javascript in separate .js files?

Trogvar Over a year ago

Then, of course it won't work like that and you will have to utilize hidden fields.

McGarnagle · Accepted Answer · 2012-07-05 08:31:17Z

1

I don't think there is a correct answer to this question; only pros and cons.

Pros of using Razor in Javascript

Script is bound to your view model; so model changes will get picked up automatically, and errors will get caught at compile time.

Cons

Script is mixed with markup, contrary to web design best practices (put script at the bottom so that it will never break your page).
Script cannot be compiled/minified, because, again, it's mixed in with your markup.

answered Jul 5, 2012 at 8:31

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

4 Comments

karaxuna Over a year ago

And which way you suggest me? how do you think, which way is better in your opinion

McGarnagle Over a year ago

@karaxuna well, I tend to agree with Trogvar's points; unless you are building sites for mobile devices and are working with a large amount of script.

McGarnagle Over a year ago

@karaxuna then I'd probably lean towards using external .JS files. I see that jim tollan raises some more good points that could be added to my pros list above.

karaxuna Over a year ago

thanks @dbaseman. Now I thought about different solution. please take a look at edit

Collectives™ on Stack Overflow

Razor syntax in JavaScript code block

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related