MVC4 partial view javascript bundling Issue

Question

I am working on a project ASP.net 4, MVC4(RC) using visual studio 11. I am trying to render an MVC4 Razor view that renders a partial view. I have some javascript required for my partial view. On my partial view when I include my javascript inside the scripts section as follows it does not seem to load.

@section Scripts {
    <script type="text/javascript">
        $(function () {
            alert("test");
        });
    </script>
}

If I remove the scripts section it fails as the jquery libraries (which are bundled and rendered on my _Layout.cshtml page) have not yet loaded when the document ready code runs.

<script type="text/javascript">
    $(function () {
        alert("test");
    });
</script>

_Layout Page code to load jquery libraries

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Does anyone know of a solution for this, or am I simply going about it the wrong way? Its wrecking my head!!

score 10 · Accepted Answer · answered Jun 29 '12 at 07:50

10

Don't wrap your script in a document.ready in the partial:

@section Scripts {
    <script type="text/javascript">
        alert("test");
    </script>
}

Ah, and don't put scripts in partials. Javascript code should be placed in separate javascript files. If you want to execute some javascript when a partial is loaded, you simply externalize this script into a reusable function/plugin that you call once your partial is loaded.

answered Jun 29 '12 at 07:50

Darin Dimitrov

1,023,142
271
3,287
2,928

Thanks for the response but it didn't work for me. Even with removing the document.ready when I look at the page source the javascript is completly missing. If I move the javascript to its parent view (which is not a partial view) it does get loaded. But I do need it on the load of the parital view. – martin Jun 29 '12 at 08:16
Finally got this to work. When I created the page with the scripts – martin Jul 11 '12 at 05:25
3

It's very funny that you have found the problem of @martin and he marked his own answer even if your solution was the right solution. :D – Samuel Sep 06 '12 at 21:26
1

And what if I have partial-specific scripts? – Shimmy Weitzhandler Dec 27 '12 at 13:55
@Shimmy, did you read my answer? I quote: `Ah, and don't put scripts in partials`. So if you have partial specific scripts you would simply declare them in the view that is using those partials. – Darin Dimitrov Dec 27 '12 at 14:08
@Shimmy, if those views are many then you should make them implement a child Layout in which you would include the necessary scripts to avoid repetitions. The child layout will of course derive from the main layout, it will just override a register scripts custom section. – Darin Dimitrov Dec 27 '12 at 15:22
1

In my case I need the partial completely agnostic to its parents and vice versa. I found some hacky workarounds around, I'm gonna use them. Thanks for your comments anyway. – Shimmy Weitzhandler Dec 27 '12 at 16:13
@DarinDimitrov Hw to know when partial is loaded? – Savaratkar Jan 02 '14 at 06:47
@theinsaneone, that would depend on how you are loading the partial. For example if you are using AJAX that would be the `success` callback. – Darin Dimitrov Jan 02 '14 at 07:05
@DarinDimitrov No, I am using MVC4, I return View object of partial page. – Savaratkar Jan 03 '14 at 04:59
@Samuel and Darin : My resoloution was slightly different to this answer but it did set me on the right path so I have now marked your answer – martin Feb 15 '14 at 12:10

score 4 · Answer 2 · answered Jul 11 '12 at 05:34

Finally got this to work. I removed my javascript from my partial view and placed it in the parent view (which is not partial), in the script section.This scripts section was created automatically when creating the view with scaffolding (Create) and was placed at the end of the page. To get this to work I had to move it to the top of the page - before the call to render my partial.

score 2 · Answer 3 · answered Feb 23 '15 at 16:35

2

ClientDependency solves exactly this problem and allows you to add script references to partial views that get rolled up and placed at the end of the page (or wherever you specify) for you. It also deals with bundling, versioning and minification page by page.

The overhead of ensuring the script reference is on the "parent" View rather than the partial doesn't really bother me, but Client Dependency could be helpful if you had loads of partials all requiring their own script and CSS.

answered Feb 23 '15 at 16:35

JohnB

451
5
7

Here's a smaller and simpler extension method that solves the specific problem of scripts in partials: http://blog.logrythmik.com/post/A-Script-Block-Templated-Delegate-for-Inline-Scripts-in-Razor-Partials – peter3 Aug 10 '16 at 12:40

MVC4 partial view javascript bundling Issue

3 Answers3

Linked