しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

ビュー固有の CSS と JavaScript を追加する

こういった誰でも考えるであろう内容は、タイトルに悩みますな…。とりあえず、外部スクリプト参照以外にスタイルの定義や DOM 構築時などにビュー固有の処理を行いたい場合には head タグ内に

<style type="text/css">
body { ... }
</style>
<script type="text/javascript">
$(function()
{
    // ここで DOM に触る
});
</script>

とか書きますよね。ASP.NET MVC だと head タグは _Layout.cshtml に書かれているので、このままだと全体で共通になります。

なのでセクションを使いましょう。_Layout.cshtml にセクションをレンダリングするコードを追加します。required を false にしておくと、セクションが存在しない場合でもエラーが発生しません。

<head>
    <title>ほげほげ</title>
    @RenderSection("Header", false)
</head>

そしてビューではセクションを定義しておきます。

@section Header
{
<style type="text/css">
body { ... }
</style>
<script type="text/javascript">
$(function()
{
    // ここで DOM に触る
});
</script>
}

これだけでビュー毎に固有のスタイルやスクリプトを追加することが出来ます。セクションを上手く活用してください。