2012-06-26 7 views
5

私のコードはコンパイルされ、エラーなく実行されます。しかし、それは私が期待したようにレンダリングされません。ネストされたレイアウトを使用して、すべてのJavascriptコードを1つのセクションにレンダリングします

論:私は、複数のレイアウトページを使用したい

「ベース」レイアウトには、ソリューションで使用されているスタイルファイルとJavaScriptファイルのみを含める必要があります。

その他のレイアウトには、HTMLコンテンツまたはラッパーが必要です。このレイアウトは現在余計なようですが、私の上司は将来の偉大さにつながると私に保証します。複数のヘッダーを持つ、または特定のページにヘッダーやフッターを持たないなど。主なものは、複数のContentLayoutsが、1つの共通の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にレンダリングされ、指定されたスクリプト領域の外に出てしまうことです。スクリプトコードを次のレイアウトに「キック」することはできますか?これにより、すべてのスクリプトコードを同じ領域に入れることができます。

答えて

6

@RenderSection()の動作に関するビューを開発する必要があります。

@RenderSection()は、その子孫をレンダリングします。したがって、次の順序でビューを変更する必要があります。

_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> 
関連する問題