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

Darin Dimitrov · Accepted Answer · 2012-06-29 07:50:36Z

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, 2012 at 7:50

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

martin Over a year ago

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 Over a year ago

Finally got this to work. When I created the page with the scripts

Samuel Over a year ago

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 Over a year ago

And what if I have partial-specific scripts?

Shimmy Weitzhandler Over a year ago

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.

|

martin · Accepted Answer · 2012-07-11 05:34:46Z

4

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.

answered Jul 11, 2012 at 5:34

martin

5903 gold badges8 silver badges20 bronze badges

Comments

JohnB · Accepted Answer · 2015-02-23 16:35:31Z

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, 2015 at 16:35

JohnB

4796 silver badges10 bronze badges

1 Comment

peter3 Over a year ago

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

Collectives™ on Stack Overflow

MVC4 partial view javascript bundling Issue

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related