How to include JavaScript from a Partial View in ASP.NET MVC3

javascript asp.net-mvc asp.net-mvc-3 partial-views renderpartial
Jonathan Matheus picture Jonathan Matheus · Jan 16, 2011 · Viewed 24k times · Source

I would like to be able to provide a way for partial views to include JavaScript code / files at the bottom of a view. This would enable partial views to include any JavaScript files that they depend on. For instance, if I wanted to write a partial that needs to create a JQueryUI dialog, I would like to import the JQueryUI JavaScript file as well as add JavaScript code that renders the dialog.

I'm currently writing this code in the parent view, which makes it kind of pointless to use a partial view.

I understand that calling RenderPartial multiple times would result in scripts being included multiple times. This is a solvable issue once I know how to actually include JavaScript into the main view from the partial view.

Answer

RPM1984 picture RPM1984 · Jan 16, 2011

Define ContentPlaceHolder in your MasterPage (ASPX) or Section in your Layout Page (Razor)

ASPX:

<body>
  <!-- End of Body -->
  <asp:ContentPlaceHolder ID="JavaScriptIncludes" runat="server" />
</body>

Razor:

<body>
  <!-- End of Body -->
   @RenderSection("JavaScriptIncludes", required: false)
</body>

Then in the Partial:

ASPX:

<asp:Content ID="ExtraJs" ContentPlaceHolderID="JavaScriptIncludes" runat="server">
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" />
</asp:Content>

Razor:

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

Also think about using a HTML Helper to render out the <script> tags.

Related questions

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

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.

Read More
How to access javascript variable within @URL.Action()

How can I access JavaScript value inside @URL.Action()? something like: <script type="text/javascript"> function name(myjavascriptID) { jQuery("#list_d").jqGrid('setGridParam', { url: '@URL.Action("download file", "download", new { id = <myjavascriptID> })', page: 1 }); } </…

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

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 …

Read More