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

Question

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.

score 7 · Answer 1 · answered Jan 16 '11 at 22:37

7

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.

answered Jan 16 '11 at 22:37

RPM1984

72,246
58
225
350

14

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 Jan 18 '11 at 05:33
"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. – RPM1984 Jan 18 '11 at 08:49
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. – quentin-starin Apr 01 '11 at 20:00
1

I found [this link](http://blogs.msdn.com/b/marcinon/archive/2010/12/15/razor-nested-layouts-and-redefined-sections.aspx) 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 – David Pope May 01 '11 at 23:02

score 1 · Answer 2 · answered Oct 07 '16 at 06:45

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();";
}

score 0 · Answer 3 · answered Jan 16 '11 at 20:59

0

You can include <script> tags inside the <body> tag so you can have them inside your partial view.

answered Jan 16 '11 at 20:59

Vadim

17,897
4
38
62

17

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. – Jonathan Matheus Jan 18 '11 at 05:35
1

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. – Sean Apr 12 '13 at 00:05

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

3 Answers3