Can the scripts on the layout propagate to the views?

Question

Im having problem with the scripts on the layout, so I go to the basic to try understand what is doing the @RenderSection("scripts", and now I make it work.

But can I put the Jquery / Jquery.UI (js/css) in the Layout, so I dont have to put it on every view? because I try puting inside the head tag on the Layout and the view didnt saw it.

Here is my layout.

<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <h1>Test Layout</h1>
    <div>
        @RenderBody()
    </div>
</body>
</html>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

And my View

@{
    ViewBag.Title = "TreeDetails";
    Layout = "~/Views/Shared/_LayoutTest.cshtml";
}
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <h2>TEST PAGE</h2>

    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <button id="opener">Open Dialog</button>

</body>
</html>

@section scripts {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script>
        // Your code goes here.
        $(document).ready(function () {
            console.log("before dialog");
            $("#dialog").dialog({ autoOpen: false });
            console.log("after dialog");

            $("#opener").click(function () {
                $("#dialog").dialog("open");
            });
        })
    </script>
}

Move the `@RenderSection(...)` to immediately before the closing `
` tag. Note also that your css file should be in a separate `@RenderSection("styles", required: false)` inside the `
` tags. And it also looks like your repeating `jquery.js`using `@Scripts.Render("~/bundles/jquery")` in the layout and again by including it inside `@section scripts {` — , Jun 21 '16 at 01:37
@StephenMuecke So, if I declare all my scripts/css in the `head` for the layout then I dont need the `@Scripts.Render(..)` lines? — Juan Carlos Oropeza, Jun 21 '16 at 01:45
Yes you should still have them (to add the view specific scripts etc). But its recommended that `@RenderSection("styles", false)` goes in the `` and `@RenderSection("styles", false)` goes immediately before the closing `` tag (at the moment you have them outside the document) — , Jun 21 '16 at 01:48
@StephenMuecke Im still lost. Can you edit my view/layout and show me how should go? I found removing the jquery from the view make thing better, But still seem weird. Because the jquery.ui is still on the view. And i havent go with the styles yet. — Juan Carlos Oropeza, Jun 21 '16 at 01:51
You also have other issues such as your view should not have `` tags etc. Give me 30 min and then I'll add a answer. — , Jun 21 '16 at 01:53

score 1 · Accepted Answer · 2016-06-21T03:45:03.910

You have a few issues with your code, including rendering the scripts outside the document, duplicating scripts, including css files in the scripts sections and duplicating <html>, <head> and <body> tags in the view.

The basic structure for the layout should be

<html>
<head>
    <title>@ViewBag.Title</title>
    ....
    // Add style sheets common to all views using this layout
    @Styles.Render("~/Content/css")
    // Add the place holder for any view specific css files
    @RenderSection("styles", required: false)
    // Include modernizr
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <h1>Test Layout</h1>
    <div>
        @RenderBody()
    </div>
    // Add js files common to all views using this layout
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    // Add the place holder for any view specific js files
    @RenderSection("scripts", required: false)
</body>
</html>

and for the view

@{
    ViewBag.Title = "TreeDetails";
    Layout = "~/Views/Shared/_LayoutTest.cshtml";
}
<h2>TEST PAGE</h2>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

// View specific style sheets
@section styles {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
}

// View specific scripts
@section scripts {
    // Note: don't repeat jquery-{version}.js
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        console.log("before dialog");
        $("#dialog").dialog({ autoOpen: false });
        console.log("after dialog");
        $("#opener").click(function () {
            $("#dialog").dialog("open");
        })
    </script>
}

Note: the use of $(document).ready(function () { is not strictly necessary in this case because the scripts are rendered immediately before the closing </body> tag, but if you were to move @Scripts.Render(...) and @RenderSection("scripts", required: false) into the <head> tags of the layout, then it would be required.

Why are two `@RenderSection("scripts", required: false)` or maybe the first one is `styles`?? and why `modernizr` is on the `head` and not at the end? — Juan Carlos Oropeza, Jun 21 '16 at 03:41
Oops, sorry, the top one should be `@RenderSection("styles", required: false)`, and `modernizr` must always be in the `` for it to work. — , Jun 21 '16 at 03:44
Very good ... now I see the difference between Layout scripts and View scripts. But I still dont understand the bundles. Can I use ` — Juan Carlos Oropeza, Jun 21 '16 at 03:51
Bundles are preferred - you get better performance, caching and automatic minimization of the files in release mode, but you can use `` if you want to. — , Jun 21 '16 at 03:55
Yes, I know bundles have better performance, but first I need to make it work. When I have the correct script list I will investigate how make the buddles. Thanks — Juan Carlos Oropeza, Jun 21 '16 at 03:57
any sugestion on how script works with partial views? Im having trouble because if I want test a view it alone I include all the script, and when I add it as a partial view the scripts doesnt work. — Juan Carlos Oropeza, Aug 03 '16 at 15:06
Sorry, not sure what you mean. Scripts should never be in partial views. — , Aug 04 '16 at 23:22

Can the scripts on the layout propagate to the views?

1 Answers1