asp.net mvc 3 - Render all Javascript code in one section using nested layouts

My code piles and runs without errors; however, it doesn't render as I expected.

The Theory:

I want to use multiple layout pages.

The "base" layout should only include the style and javascript files that are being used by the solution.

The other layout should have the html content or wrappers. This layout seems superfluous currently, but my superior assures me it will lead to future greatness. Such as having multiple headers or the ability to not have headers or footers on certain pages. The main things is to have multiple ContentLayouts but one mon BaseLayout

The Code:

_BaseLayout

<html>
   <head>
       <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="@Url.Content("~/Scripts/mon.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>

Like I stated earlier this works. The problem is when I view the page source the script from the view is rendered in the _ContentLayout and thus falls outside of the designated script area. Can I "kick" the script code to the next layout? This would allow all the script code to be in the same area.

My code piles and runs without errors; however, it doesn't render as I expected.

The Theory:

I want to use multiple layout pages.

The "base" layout should only include the style and javascript files that are being used by the solution.

The Code:

_BaseLayout

<html>
   <head>
       <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="@Url.Content("~/Scripts/mon.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>

Share Improve this question edited Jun 27, 2012 at 11:22 Tohid 6,6998 gold badges58 silver badges81 bronze badges asked Jun 26, 2012 at 23:23 dan_vitch 4,55912 gold badges48 silver badges69 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

You should develop views in respect to @RenderSection() behavior.

Each @RenderSection() renders its descendant @section SectionName { }. So you need to change your Views in this order:

_BaseLayout.cshtml - Remains as it is.

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

and finally View.cshtml:

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

@section JavaScriptToHead {
    //JS stuff
}

@section CssToHead {
   //Css stuff
}

<div>
    //html content
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

asp.net mvc 3 - Render all Javascript code in one section using nested layouts - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)