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

Question

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

dan*_*tch 5 javascript html5 razor asp.net-mvc-3

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

理论:

我想使用多个布局页面.

"基础"布局应仅包括解决方案正在使用的样式和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>

Run Code Online (Sandbox Code Playgroud)

_ContentLayout

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

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

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

Run Code Online (Sandbox Code Playgroud)

View.cshtml

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

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

 <div>
      //html content
 </div>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Toh*_*hid 6

您应该开发有关@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>

Run Code Online (Sandbox Code Playgroud)

最后是View.cshtml:

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

@section JavaScriptToHead {
    //JS stuff
}

@section CssToHead {
   //Css stuff
}

<div>
    //html content
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	8962 次
最近记录：	13 年，6 月前