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として認識される。