Html.Partialでファイルを分割する
ASP.NET Core 2.0で共通の部品やHTMLに直接コードを埋め込まなければいけないスタイルやスクリプトなどがある場合、Html.Partialでファイルを分割しておくと再利用性が高くなりなおかつコードが見やすくなります。
目次
- ディレクトリの構成とファイルの配置
- Html.Partialを呼び出す側のコード
- Html.Partialで呼び出される側のコード
- 最終的に出力されるHTML
- 参考リンク
ディレクトリの構成とファイルの配置
ディレクトリの構成やファイルの配置は以下の通りです。
project
├ Startup.cs
└ Views
└ Shared
├ _Layout.cshtml
└ Style.cshtml
今回は、「_Layout.cshtml」から「Style.cshtml」を呼び出してHTMLに埋め込みます。
Html.Partialを呼び出す側のコード
使い方は簡単で呼び出し元のView（_Layout.cshtml）で「@Html.Partial()」メソッドを呼び出すだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
@Html.Partial("Style")
</head>
<body>
<div>Example</div>
</body>
</html>
後は勝手にShared配下のRazorファイル（.cshtml）から該当するファイル名がロードされ、出力されるHTMLに埋め込まれます。
Html.Partialで呼び出される側のコード
呼び出される側も特別なコードを記述する必要はなく、HTMLに埋め込んでほしいコードをそのまま記載します。
<style>
body{
background-color:#eee;
}
</style>
最終的に出力されるHTML
上記のコードを実行した場合、最終的に出力されるHTMLは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
body{
background-color:#eee;
}
</style>
</head>
<body>
<div>Example</div>
</body>
</html>
非常に簡単に利用できるので、共通の部品は可能な限りパーツ化したいですね。