ASP.NET MVC Viewに関するメモ #C#

ASP.NET MVCのViewに関するメモです。

Viewが表示される基本的な流れ

HomeControllerのIndex Actionが呼ばれたとき下記のような流れで処理されます。

/Views/_ViewStart.chtmlが読み込まれる
/Views/Shared/_Layout.chtmlが読み込まれる(1.で指定しているから)
2.の_Layout.chtml中の@RenderBody()が呼ばれる(2. に記述されているから)
/Views/Home/Index.chtmlが呼ばれる
必要に応じて@RenderSection()が呼ばれる

@RenderBody()はテンプレートに1箇所のみ
@RenderSection()は複数箇所でも可

テンプレートを変更してみる

BootstrapのGet Startedのサンプルコードをベースに下記のようなテンプレートファイルを作成してみました。CDN好きなので外部ライブラリは基本CDNを利用しています。

テンプレートの用意

下記の内容を/Views/Shared/_Baselayout.chtmlとして保存します。

_Baselayout.chtml

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container body-content">
        <header>
            header
        </header>
        <main>
            <h1>Main!</h1>
            @RenderBody()
        </main>
        <footer>
            footer
        </footer>
    </div>
    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

標準テンプレートの変更

/Views/_ViewStart.chtmlの内容を下記のように書き換えます。

_ViewStart.chtml

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

これで完了です。

番外編

カスタムCSSを置いて~bundleを利用せず利用したい

chtmlのテンプレートの中で~bundleとかを使うのは好きでないので普通に/css/my.cssとかで指定したい。その際はどこが/になるのかを確認。

結論→プロジェクト直下を/と認識するらしい。
例えばテンプレートに下記のように書いた場合。

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/css/my.css">
</head>
<body>
</body>
</html>

プロジェクト直下にCSSというフォルダを作ればそこが/CSSとして認識される。