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 insert them with a script tag then the C# aspect of them stops working. What is the best way of separating your JavaScript code that also contains C# code in MVC 3 razor?

Thanks.

Answer 1

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()