レイアウトを共有する - satymale’s diary

メニューなど同じような部分を纏めれるように、レイアウトテンプレートを試してみました。

ViewStartを作る。

Viewsフォルダで[右クリック]→[追加]→[新しい項目]→[MVC ビュースタートページ]を選択して追加します。

f:id:satymale:20150927154817p:plain

レイアウトを作る。

Viewsフォルダの直下にSharedフォルダを作ります。

f:id:satymale:20150927161634p:plain

Sharedフォルダで[右クリック]→→[追加]→[新しい項目]→[MVC ビューレイアウトページ]を選択して追加します。

f:id:satymale:20150927161916p:plain

動作確認

ViewStart.cshtmlは、画面が表示される際に呼ばれてLayoutで指定されているレイアウトを適用するそうです。

@{
    Layout = "_Layout";
}

特にフォルダが指定されていない場合は、Views直下の画面のフォルダにあるLayoutが使用されますが、そこに存在していない場合は、SharedのLayoutが使用されていました。

試しにShared直下の_Layout.cshtmlが使われていることが分かるように文言を追加します。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        Sharedのレイアウト
    </div>
    <div>
        @RenderBody()
    </div>
</body>
</html>

実行すると確かにSharedのレイアウトが使われています。

f:id:satymale:20150927163010p:plain

同じようにViews/Home直下にLayout.cshtmlを追加し、HomeのLayout.cshtmlが使われていることが分かるように文言を追加します。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        Homeのレイアウト
    </div>
    <div>
        @RenderBody()
    </div>
</body>
</html>

今、HomeとSharedの両方に_Layout.cshtmlが存在しています。この状態で実行してみます。

f:id:satymale:20150927164149p:plain

確かにHomeの_Layout.cshtmlが使われています。