アジェンダ

テンプレート構造
Viewが表示される流れ
テンプレート類
_Layout.cshtml
_ViewStart.cshtml
共通パーツ

テンプレート構造

├ Views
├ Shared （共通パーツ格納ディレクトリ）
│ ├ _Layout.cshtml（アプリの既定のレイアウト）
│ ├ _Header.cshtml
│ └ _Footer.cshtml
└ _ViewStart.cshtml （各ビューの前に実行する処理を記載する）

Viewが表示される流れ

/Views/_ViewStart.chtmlが読み込まれる
/Views/Shared/_Layout.chtmlが読み込まれる(1.で指定しているから)
3.の_Layout.chtml中の@RenderBody()が呼ばれる(2. に記述されているから)
@RenderBody()はテンプレートに1箇所のみ
必要に応じて@RenderSection()が呼ばれる
@RenderSection()は複数箇所でも可

テンプレート類

_Layout.cshtml

アプリの既定のレイアウト。
ファイル名の先頭に「_(パーシャル)」を付ける。

_layout.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

@RenderBody() とは
このテンプレートを使ったページの本体を出力する。

@RenderSection()とは
@RenderSection(セクション名, required: 必須かどうか)のように引数を用いて、メインのボディ部分以外も、カスタマイズできるようにしている。

具体的に言うと。。

■レイアウトでscriptsセクションを呼び出すように指定して

_layout.html

@RenderSection("scripts", required: false)

■各ページでscriptsセクションを用意してあげる。

index.html

@section scripts{
<script type="text/javascript">
    $(function(){
        //index.htmlで使うjsの処理を記述
    });
</script>
}

_ViewStart.cshtml

最初に実行する処理を記載する。

_ViewStart.html

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