2012-06-26 12 views
5

Mein Code kompiliert und läuft ohne Fehler; Es wird jedoch nicht wie erwartet wiedergegeben.Render alle Javascript-Code in einem Abschnitt mit verschachtelten Layouts

Die Theorie:

ich mehrere Layoutseiten verwenden möchten.

Das "Basis" -Layout sollte nur die Stil- und Javascript-Dateien enthalten, die von der Lösung verwendet werden.

Das andere Layout sollte den HTML-Inhalt oder Wrapper haben. Dieses Layout erscheint derzeit überflüssig, aber mein Vorgesetzter versichert mir, dass es zu zukünftiger Größe führen wird. Beispielsweise mehrere Kopfzeilen oder die Möglichkeit, auf bestimmten Seiten keine Kopf- oder Fußzeilen zu haben. Die wichtigsten Dinge ist es, mehrere ContentLayouts zu haben, aber eine gemeinsame Baselayout

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

Wie ich schon sagte, das funktioniert. Das Problem ist, wenn ich die Seitenquelle betrachte, wird das Skript aus der Ansicht im _ContentLayout gerendert und fällt somit außerhalb des angegebenen Skriptbereichs. Kann ich den Skriptcode zum nächsten Layout "kicken"? Dies würde ermöglichen, dass sich der gesamte Skriptcode in demselben Bereich befindet.

Antwort

6

Sie sollten Ansichten in Bezug auf @RenderSection() Verhalten entwickeln.

Jeder @RenderSection() macht seinen Nachkommen @section SectionName { }. Sie müssen also Ihre Ansichten in dieser Reihenfolge ändern:

_BaseLayout.cshtml - Bleibt wie es ist.

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

und schließlich View.cshtml:

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

@section JavaScriptToHead { 
    //JS stuff 
} 

@section CssToHead { 
    //Css stuff 
} 

<div> 
    //html content 
</div> 
Verwandte Themen