Question

我的代码编译并运行没有错误;但是，它没有按照我的预期呈现。

理论：

我想使用多个布局页面。

“基础”布局应仅包含解决方案正在使用的样式和javascript文件。

其他布局应该包含html内容或包装器。这种布局目前似乎是多余的，但是我的上级向我保证它会带来未来的伟大。例如具有多个标题或在某些页面上没有页眉或页脚的能力。主要的是拥有多个ContentLayouts但只有一个常见的BaseLayout

守则：

_BaseLayout

<html>
   <head>
       <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="@Url.Content("~/Scripts/common.js")"></script>
       @RenderSection("JavaScript", false)
       @RenderSection("Css", false)
   </head>
   <body>
       @RenderBody()
   </body>
</html>

_ContentLayout

 @{
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
 }

 @RenderSection("JavaScript", false)
 @RenderSection("Css", false)

 <div class="page">
     <section class="wrapper">
       @RenderBody()
     </section>
 </div>

View.cshtml

 @{
     Layout = "~/Views/Shared/_ContentLayout.cshtml";
 }

 @section JavaScript
 {
      <script type="text/javascript">
    (function ($) {
        $(function () {
            //do stuff;
        });
    } (jQuery));
</script>
 }

 <div>
      //html content
 </div>

就像我之前说过的那样有效。问题是当我查看页面源时，视图中的脚本在_ContentLayout中呈现，因此落在指定的脚本区域之外。我可以将脚本代码“踢”到下一个布局吗？这将允许所有脚本代码位于同一区域。

Answer 1

您应该针对@RenderSection()行为制定观点。

每个@RenderSection()呈现其后代@section SectionName { }。因此，您需要按此顺序更改您的视图：

_BaseLayout.cshtml - 保持原样。

<强> _ContentLayout.cshtml ：

@{Layout = "~/Views/Shared/_BaseLayout.cshtml";}

@section JavaScript {
    @RenderSection("JavaScriptToHead", false)
}

@section Css {
    @RenderSection("CssToHead", false)
}

<div class="page">
    <section class="wrapper">
        @RenderBody()
    </section>

最后 View.cshtml ：

@{Layout = "~/Views/Shared/_ContentLayout.cshtml";}

@section JavaScriptToHead {
    //JS stuff
}

@section CssToHead {
   //Css stuff
}

<div>
    //html content
</div>

使用嵌套布局在一个部分中呈现所有Javascript代码

1 个答案: