ASP.NET MVC 3 Razor: Include JavaScript file in the head tag

javascript asp.net-mvc include razor asp.net-mvc-3

I'm trying to figure out the proper Razor syntax to get a JavaScript file for a particular *.cshtml to be in the head tag along with all the other include files that are defined in _Layout.cshtml.

You should also consider putting the js at the bottom of the page instead of in the head section.

Only issue I found with the sample code is that the @section "JavaScript" need not be enclosed in quotes.

One more thing: if this is a JavaScript tag, be careful about the usage, I needed to use the END Tag of the script element to get this to run correctly. ;

@Mattias Jakobsson - Not always. That depends on a specific case.

@Dimskiy if you'll allow me to be a word parser and pedant, you should indeed always CONSIDER putting the js at the bottom, whether you actually place it there or not.

Hayha

You can use Named Sections.

_Layout.cshtml

<head>
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-1.6.2.min.js")"></script>
    @RenderSection("JavaScript", required: false)
</head>

_SomeView.cshtml

@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")"></script>
   <script type="text/javascript" src="@Url.Content("/Scripts/AnotherScript.js")"></script>
}

Yes, I was looking at WebPageBase and had guessed that that might be the answer, but didn't quite know the proper syntax. Can you recommended a reference guide for the MVC 3? Regards..

Ha! I WISH there was a reference guide to both MVC 3 and Razor syntax. I got the above from the Gu's blog. The best reference for MVC 3 is probably the release notes.

Oh and good tip w.r.t. the close tag for the <script> tag - didn't know that (haven't tried named sections with JS yet). now i (and others) will know

FYI: Javascript should be rendered right before the </body> tag instead of in the head tag. This is so that it wouldn't prevent parallel downloads by the browser. See developer.yahoo.com/performance/rules.html

@Peter - yes, i know - but i was simply addressing the answer (JS in head tag).

computercarguy

To expand on Stephen Pattens answer, and to completely change my previous version of this answer:

You can add the @RenderSection("JavaScript", required: false) line pretty much anywhere in the file. Meaning, it doesn't have to be in the head or even the footer tag. In the code I'm looking at for work, it's in a div.

Also, you have to put this line into any .cshtml file that's a parent of a partial containing scripts. This allows for nesting partials with scripts, and without having to include all the scripting in the original parent or child. Saying it differently, simply having the RenderSection code in the "layout" or original parent file doesn't automatically cascade to nested partials.

The caveat to this is that your scripts will be scattered throughout the resulting HTML file rendered for the browser. This can lead to debugging difficulties, including accidentally having multiple script methods with the same name or including the same external scripts multiple times.

ASP.NET MVC 3 Razor: Include JavaScript file in the head tag

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US