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!!

Solution 1

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.

Solution 2

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.

Solution 3

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.

Comments

[Samuel]

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

[Shimmy Weitzhandler]

And what if I have partial-specific scripts?

[Darin Dimitrov]

@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]

@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.

[Shimmy Weitzhandler]

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.

[Savaratkar]

@DarinDimitrov Hw to know when partial is loaded?

[Darin Dimitrov]

@theinsaneone, that would depend on how you are loading the partial. For example if you are using AJAX that would be the success callback.

[Savaratkar]

@DarinDimitrov No, I am using MVC4, I return View object of partial page.

[martin]

@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

[peter3]

Here's a smaller and simpler extension method that solves the specific problem of scripts in partials: blog.logrythmik.com/post/…