Separating JavaScript in cshtml razor views

Question

I\'m new to ASP.NET/MVC3 and I\'m trying to figure out how to separate my JavaScript (which contains C#) from the rest of the HTML.

If I put them into .JS files and

Answer 1

Instead, do something like this in your view page:

var options = {
    parameter1 : '@(SomeC#Value)',
    parameter2 : '@(SomeC#Value)',
    parameter3 : '@(SomeC#Value)',
}

then call something like:

myJavascriptObject.init(options);

and have the Javascript use the passed-in options to control flow, etc.

Answer 2

If anything stops working while referencing to an external js-file, perhaps you're doing something wrong. Provide us with some example code on how you reference the external file. The other way is to just place the JavaScript-code between script-tags somewhere in the file. If it is in the _Layout.cshtml, you can place it in the head-tag and in another cshtml-file, place it on top between the script-tags.

Answer 3

For many reasons, you're better off putting most, if not all of your JS into separate JS files (so that you can take advantage of reuse, minification, browser optimizations, content delivery networks etc.)

To read the result of server-side razor code into your JS files use one of the following methods:

1) Put your razor code into a javascript variable in the view (not tested code)

<script type="text/javascript">
  if(!MyGlobalVariables){
     MyGlobalVariables = {};
  }
  MyGlobalVariables.IndexUrl = "@Url.Action("Index")";
</script>

2) Use a custom attribute (preferrably prefixed with data- as suggested in HTML 5 spec). See related discussion here: Can I add custom attribute to HTML tag?

<div data-index-url="@Url.Action("Index")"></div>

Then, use $(this).attr("data-index-url") in jQuery to access the rendered razor markup.

3) Put the C# into hidden input fields on your view, and read the hidden input in your JS file.

<input id="indexUrl" type="hidden" value="@Url.Action("Index")" />

To read this in jQuery, you would use $("#indexUrl").val()

Answer 4

Javascript code should not contain any dynamically generated code. If you need to load in certain config settings you should use a single inline script tag which defines the variables. Other options are loading in a json config file which is dynamically generated or basing it on dom content depending on the specific dynamic information you need. (Ajax being the most common way I would say, though that really would depend on your situation). Either way, the idea is that javascript and css files are always static.

Answer 5

As others have said writing c# to your .js file probably isnt the best idea for various reason such as caching of dynamic variables. But sometimes we all have to do things we shouldnt. And if thats the case then there is a NuGet package that allows you to write Razor syntax inside a .js file its available here http://nuget.org/packages/RazorJS

Answer 6

We convert our C# objects to Json with an extension on object and JavaScriptSerializer:

public static string ToJson(this object item)
    {
        return new JavaScriptSerializer().Serialize(item);
    }

Then we send set it on a variable (or in our case pass it to the constructor of the JavaScript Controller)