Razor Syntax in External Javascript

Question

So as you might know, Razor Syntax in ASP.NET MVC does not work in external JavaScript files.

My current solution is to put the Razor Syntax in a a global variable and set the value of that variable from the mvc view that is making use of that .js file.

JavaScript file:

function myFunc() {
  alert(myValue);
}

MVC View file:

<script language="text/javascript">
    myValue = @myValueFromModel;
</script>

I want to know how I can pass myValue directly as a parameter to the function ? I prefer to have explicit calling with param than relying on globals, however I'm not so keen on javascript.

How would I implement this with javascript parameters? Thanks!

Answer 1

Just have your function accept an argument and use that in the alert (or wherever).

external.js

function myFunc(value) {
  alert(value);
}

someview.cshtml

<script>
    myFunc(@myValueFromModel);
</script>

One thing to keep in mind though, is that if myValueFromModel is a string then it is going to come through as myFunc(hello) so you need to wrap that in quotes so it becomes myFunc('hello') like this

myFunc('@(myValueFromModel)');

Note the extra () used with razor. This helps the engine distinguish where the break between the razor code is so nothing odd happens. It can be useful when there are nested ( or " around.

edit

If this is going to be done multiple times, then some changes may need to take place in the JavaScript end of things. Mainly that the shown example doesn't properly depict the scenario. It will need to be modified. You may want to use a simple structure like this.

jsFiddle Demo

external.js

var myFunc= new function(){
 var func = this,
 myFunc = function(){
    alert(func.value);
 };
 myFunc.set = function(value){
    func.value = value;
 }
 return myFunc;
};

someview.cshtml

<script>
    myFunc.set('@(myValueFromModel)');
    myFunc();//can be called repeatedly now
</script>

Answer 2

I often find that JavaScript in the browser is typically conceptually tied to a specific element. If that's the case for you, you may want to associate the value with that element in your Razor code, and then use JavaScript to extract that value and use it in some way.

For example:

<div class="my-class" data-func-arg="@myValueFromModel"></div>

Static JavaScript:

$(function() {
    $('.my-class').click(function() {
         var arg = $(this).data('func-arg');
         myFunc(arg);
    });
});

Answer 3

Do you want to execute your function immediately? Or want to call the funcion with the parameter?

You could add a wrapper function with no parameter and inside call your function with the global var as a parameter. And when you need to call myFunc() you call it trough myFuncWrapper();

function myFuncWrapper(){ 
    myFunc(myValue);
}

function myFunc(myParam){
//function code here;
}