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

javascript asp.net-mvc asp.net-mvc-3 partial-views renderpartial

25,069

Solution 1

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.

Solution 2

Here is how you can have Partial View with JavaScript code that uses any library (even when libraries are loaded at the end of the page)

In your partial view add:

@{
    TempData["Script"] += "MyFunction();";
}

<script type="text/javascript">
    function MyFunction() {
        // you can call your library here, e.g. jquery:
        $(function () {

        });
    }
</script>

In your _Layout.cshtml page add after your libraries included:

@*LOAD YOUR LIBRARIES HERE (E.G. JQUERY) *@


@if (TempData["Script"] != null)
{
    <script type="text/javascript">
        @Html.Raw(TempData["Script"].ToString())
    </script>
}

You can have multiple partial views attaching theirs functions to the same key TempData["Script"]. They will happily coexist if you keep adding the functions using += operator:

@{
    TempData["Script"] += "AnotherFunction();";
}

25,069

Author by

Jonathan Matheus

Updated on October 07, 2020

Comments

Jonathan Matheus over 3 years

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.
Jonathan Matheus over 13 years

I wasn't able to get this working with Razor. That's what I've been doing in my views. However, it doesn't look like partials inherit the layout from their parent view. If you try to set it explicitly in your partial views using your example, then you end up getting extra body tags where your partial views are rendered.
Jonathan Matheus over 13 years

having script tags in the middle of divs and tables is considered a bad practice and can lead to page load performance issues. I want the ability to add the scripts in the head section or at the bottom of the page.
RPM1984 over 13 years

"However, it doesn't look like partials inherit the layout from their parent view." - are you sure? Can you provide your partial view - it should have the layout definition at the top.
quentin-starin about 13 years

Any answer that works for Razor? If you include the layout in the partial, the layout elements get duplicated. If you don't include them, the section in the partial gets ignored.
David Pope about 13 years

I found this link via ScottGu's blog. In the comments he explains why partial views can't use @section: "... a RenderPartial call ends up executing a brand new Razor page." It's a shame; I wanted to use jQuery-UI's Accordion, with each accordion section being its own partial page. Unfortunately I also wanted to include <script> blocks, which breaks the jQuery accordion logic...
Sean about 11 years

This also does not address the particular problem being asked about in this question. Following best practices, the typical MVC layout and view structure results in script includes being rendered at the bottom of the page. Therefore, using jQuery syntax, for example, in a script in a partial view results in a JS syntax error.