布局上的脚本可以传播到视图吗？答案

【问题标题】：Can the scripts on the layout propagate to the views?布局上的脚本可以传播到视图吗？
【发布时间】：2016-06-21 11:45:03
【问题描述】：

我在 layout 上的脚本有问题，所以我去基本的尝试了解 @RenderSection("scripts", 的作用，现在我让它工作了。

但是我可以将 Jquery / Jquery.UI (js/css) 放在布局中，这样我就不必将它放在每个视图上吗？因为我尝试在 Layout 上的 head 标签内放置，但视图没有看到它。

这是我的布局。

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

我的观点

@{
    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>
}

【问题讨论】：

将@RenderSection(...) 移动到关闭</body> 标记之前。另请注意，您的 css 文件应位于 <head> 标签内的单独 @RenderSection("styles", required: false) 中。而且看起来您在布局中重复使用jquery.js@Scripts.Render("~/bundles/jquery")，并再次将其包含在@section scripts {中
@StephenMuecke 所以，如果我在 head 中声明所有脚本/css 以用于布局，那么我不需要 @Scripts.Render(..) 行？
是的，您仍然应该拥有它们（添加视图特定脚本等）。但它建议 @RenderSection("styles", false) 进入 <head> 和 @RenderSection("styles", false) 紧接在关闭 </body> 标记之前（此时您将它们放在文档之外）
@StephenMuecke 我还是迷路了。你能编辑我的视图/布局并告诉我应该怎么走吗？我发现从视图中删除 jquery 会使事情变得更好，但仍然看起来很奇怪。因为 jquery.ui 仍在视图中。而且我还没有选择样式。
你还有其他问题，比如你的视图不应该有<head>标签等。给我30分钟，然后我会添加答案。

标签： javascript asp.net-mvc layout

【解决方案1】：

您的代码存在一些问题，包括在文档外渲染脚本、复制脚本（包括脚本部分中的 css 文件）以及在视图中复制 <html>、<head> 和 <body> 标记。

布局的基本结构应该是

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

为了风景

@{
    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>
}

注意：在这种情况下，$(document).ready(function () { 的使用并不是绝对必要的，因为脚本会在关闭 </body> 标记之前立即呈现，但如果您要将 @Scripts.Render(...) 和 @RenderSection("scripts", required: false) 移动到 <head>布局的标签，那么它是必需的。

【讨论】：

为什么是两个@RenderSection("scripts", required: false) 或者第一个是styles??为什么modernizr 出现在head 而不是最后？
糟糕，抱歉，最上面的应该是@RenderSection("styles", required: false)，并且modernizr 必须始终在<head> 中才能正常工作。
非常好...现在我看到了布局脚本和视图脚本之间的区别。但是我仍然不明白捆绑包。我可以改用<script> 标记，并且应该可以正常工作，不是吗？
捆绑包是首选 - 您可以在发布模式下获得更好的性能、缓存和文件自动最小化，但如果您愿意，可以使用 <script src="..."></script>。
是的，我知道捆绑包有更好的性能，但首先我需要让它工作。当我有正确的脚本列表时，我将研究如何制作小伙伴。谢谢