Geek asks and answers

Mark all Javascript codes in one section using nested layouts

My code compiles and works without errors; however, it does not appear as I expected.

Theory:

I want to use multiple pages of the layout.

The base layout should include only the style and javascript files used by the solution.

Another layout should have html content or wrappers. Currently, this layout seems redundant, but my boss assures me that this will lead to future greatness. For example, having multiple headers or the ability to have headers or footers on specific pages. The main thing is to have several ContentLayouts, but one common 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/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>

, . , , script _ContentLayout , , script. "" script ? script .

+5
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>
+6

More articles:


All Articles