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!

Travis J · Accepted Answer · 2015-08-07 17:29:37Z

7

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>

edited Aug 7, 2015 at 17:29

answered Aug 6, 2015 at 22:40

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

3 Comments

Talal Nabulsi Over a year ago

Thank you! This looks great. Would I have to pass in that parameter every time the function is called? I call that function like 30 times throughout the cshtml so would I have to change all those calls or is there a different way?

Travis J Over a year ago

@TalalNabulsi - In that case you are probably going to want to store the variable. It is possible to store it once inside of an object as opposed to using a global variable to protect the state. Please see my edit.

Talal Nabulsi Over a year ago

Thank you very much for the edit Travis! This is exactly what I needed!

StriplingWarrior · Accepted Answer · 2015-08-06 22:49:05Z

3

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

answered Aug 6, 2015 at 22:49

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Comments

Tony O · Accepted Answer · 2015-08-06 22:49:44Z

1

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

answered Aug 6, 2015 at 22:49

Tony O

1163 bronze badges

2 Comments

Talal Nabulsi Over a year ago

Thanks this looks like what I'm looking for. I have to put the wrapper function in the cshtml view correct?

Tony O Over a year ago

As far as you define your var myValue in your cshtml you will be able to access that variable on your external js file... so you could put both functions on the jsfile and only the variable declaration/assignment on cshtml

Collectives™ on Stack Overflow

Razor Syntax in External Javascript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related