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

Question

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 1

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 2

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

<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>

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:

<div id="contentA"></div>
<div id="contentB"></div>

<script type="text/javascript">
    contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
    contentSetter.setContentA();
    contentSetter.setContentB();
</script>

Answer 3

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 4

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 5

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 <script> tags. That makes it a valid external JavaScript file.

Answer 6

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:

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

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