JavaScript separation in cshtml razors

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 in .JS files and paste them with a script tag, then the C # aspect of them stops working. What is the best way to split JavaScript code that also contains C # code in MVC 3 razor?

Thanks.

Answer 1

For many reasons, you'd better place most, if not all of your JS, in separate JS files (so you can use reuse, optimization, browser optimization, content delivery networks, etc.).

To read the result of the server-side firewall code in your JS files, use one of the following methods:

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

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

2) Use a custom attribute (preferably a data prefix - as suggested in the HTML 5 spec ). See Related discussion here: Can I add a custom attribute to an HTML tag?

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

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

3) Put C # in 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 have to use $ ("# indexUrl"). val ()

Answer 2

Javascript code must not contain dynamically generated code. If you need to load certain configuration settings, you must use one built-in script tag that defines the variables. Other parameters are loaded into the json configuration file, which is dynamically generated or based on dom content depending on the specific dynamic information required. (Ajax is the most common way I would say, although it really will depend on your situation). In any case, the idea is that javascript and css files are always static.

Answer 3

Instead, do something similar on the watch page:

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

then call something like:

 myJavascriptObject.init(options); 

and Javascript uses the parameters of the passed functions to control the flow, etc.

Answer 4

If something stops working, referencing an external js file, maybe you are doing something wrong. Provide us with an example code of how you are linking to an external file. Another way is to simply put the JavaScript code between the script-tags somewhere in the file. If it is in _Layout.cshtml, you can put it in the head-tag and in another cshtml file, put it on top between script -tags.

Answer 5

As others have said, writing C # to your .js file is probably not a good idea for various reasons, such as caching dynamic variables. But sometimes we all have to do what we should not. And if so, then there is a NuGet package that allows you to write Razor syntax inside a .js file, available here http://nuget.org/packages/RazorJS

Answer 6

We will convert our C # objects to Json with the extension for the object and JavaScriptSerializer:

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

Then we send it to the variable (or in our case pass it to the constructor of the JavaScript controller)