asp.net-mvc: razor '@' symbol in js file

asp.net-mvc: razor '@' symbol in js file

I have a .csHtml-razor file with a javascript function that uses the @Url.Content C# function inside for the ajax URL.
I want to move that function to a .js file referenced from my view.

The problem is that javascript doesn't "know" the @ symbol and doesn't parse the the C# code.
Is there a way to reference .js files from view with "@" symbol?

Answer by Jason Evans for asp.net-mvc: razor '@' symbol in js file

I think you are stuck with having to put that JS code in the View. The Razor parser, as far as I know, won't look at .js files, thus anything you have which uses @ won't work. PLus, as you have spotted, Javascript itself does not like this @ character hanging around for no reason, other then, say, in a string.

Answer by Aliostad for asp.net-mvc: razor '@' symbol in js file

You have two options:

• Use the value as a parameter in the function and wire-up in the view
• Create a namespace (instead of public level variable which is considered bad practice in JS) and set this value at the top of the page and then use it in your js

For example:

 var MyCompany =    {     MyProject: {                    MyVariable:""                 }    };  

And then in your view, set it:

MyCompany.MyProject.MyVariable = @....  

---

UPDATE

You might wonder none is any good because of coupling, well it is true, you are coupling js and view. That is why scripts must be oblivious to the location they are running in so it is a symptom of non-optimum organization of files.

Anyway there is a third option to create a view engine and run the js files against the razor and send the results back. This is cleaner but much slower so not recommended either.

Answer by Joel Etherton for asp.net-mvc: razor '@' symbol in js file

In order to get the @ variable into your .js file you'll have to use a global variable and set the value of that variable from the mvc view that is making use of that .js file.

JavaScript file:

var myValue;    function myFunc() {    alert(myValue);  }  

MVC View file:

Just be sure that any calls to your function happen AFTER the value has been set by the view.

Answer by BigMike for asp.net-mvc: razor '@' symbol in js file

I usually wrap JS needing access to model properties, in functions and then pass the @something in the view. For example

in the view I add function invocation via (just an example):

Answer by Abdul Munim for asp.net-mvc: razor '@' symbol in js file

Probably this is not the right approach. Considering separation of concerns. You should have a data injector on your JavaScript class and which is in most cases data is JSON.

Create a JS file in your script folder and add this reference to your View

Now, consider a JavaScript literal class in your yourJsFile.js:

var contentSetter = {      allData: {},      loadData: function (data) {          contentSetter.allData = eval('(' + data + ')');      },      setContentA: function () {          $("#contentA").html(allData.contentAData);      },      setContentB: function () {          $("#contentB").html(allData.contentAData);      }  };  

Also declare a class

public class ContentData  {      public string ContentDataA { get; set }      public string ContentDataB { get; set }  }  

Now, from your Action do this:

public ActionResult Index() {      var contentData = new ContentData();      contentData.ContentDataA = "Hello";      contentData.ContentDataB = "World";      ViewData.Add("contentData", contentData);  }  

And from your view:

Answer by gdoron for asp.net-mvc: razor '@' symbol in js file

One way to tackle the problem is:

Adding a partial view with the javascript functions to the view.
This way you can use the @ symbol and all your javascript functions are separated from the view.

Answer by gdoron for asp.net-mvc: razor '@' symbol in js file

Well I've just found a razor engine on nuget that does it! Meaning solves @ syntax!
It's name is RazorJS.

The Nuget package

---

2016 Update:
The package wasn't updated for 5 years, and the project site link is dead. I do not recommend people to use this library anymore.

Answer by Darin Dimitrov for asp.net-mvc: razor '@' symbol in js file

You could use HTML5 data-* attributes. Let's suppose that you want to perform some action when some DOM element such as a div is clicked. So:

Click me
  

and then in your separate javascript file you could work unobtrusively with the DOM:

$('#foo').click(function() {      var url = $(this).data('url');      // do something with this url  });  

This way you could have a pure separation between markup and script without you ever needing any server side tags in your javascript files.

Answer by Marius Schulz for asp.net-mvc: razor '@' symbol in js file

I recently blogged about this topic: Generating External JavaScript Files Using Partial Razor Views.

My solution is to use a custom attribute (ExternalJavaScriptFileAttribute) which renders a partial Razor view as is and then returns it without the surrounding