読者です 読者をやめる 読者になる 読者になる

Codable Tech Blog

CodableがiOSプログラミング、クライアントサイド(JavaScript)・サーバーサイド(Java,C#,PHP)プログラミング、その他技術(MySQL、Linuxなど)について発信しています

MENU

Razor レイアウト

レイアウト

Razorではレイアウト機能が提供されています。レイアウト機能とはあらかじめページ全体のテンプレートを作成しておいて、そのテンプレートをWebサイト全体で共有して利用する機能です。レイアウト機能を利用することによって、サイトで利用している全てのページに統一感をもたせることが出来ます。また、レイアウト機能を利用してページ全体のレイアウトを一箇所で管理しておくことは、修正や変更が発生した場合に変更箇所を一つに留めることを可能にします。

レイアウト機能を利用した場合の簡単な流れ

レイアウト機能を利用した場合、どのように処理が進むのかをまずは知っておきましょう。ここではindex.cshtmlを表示する場合を例にとって流れを説明します。

  1. ブラウザがサーバーにページをリクエストします。
  2. ~/Views/_ViewStart.cshtmlが読み込まれます。Layoutプロパティに~/Views/Shared/_Layout.cshtmlが代入されます。
  3. 次の手順で使用する_Layout.cshtmlが必要とする変数を事前に用意するためにindex.cshtmlの一部分が処理されます。
  4. Layoutプロパティに指定されているファイルの内容を出力します。ここでは~/Views/Shared/_Layout.cshtmlの内容が出力されます。
  5. _Layout.cshtmlの中にある@RenderBody()に到達した時、index.cshtmlの内容を出力します。
  6. index.cshtmlの出力完了後、_Layout.cshtmlの残り部分を出力します。
  7. サーバーがブラウザにレスポンスを返します。

@RenderBody()はユーザーに要求されたコンテンツを出力する関数になります。上記の例では要求されているコンテンツはindex.cshtmlですのでindex.cshtmlの内容を出力します。

レイアウト機能を利用する

上記に記載した流れを踏まえてレイアウト機能を利用したページを作成してみます。

レイアウトファイルを作成

レイアウトファイルはプロジェクトのSharedディレクトリに配置するのがルールです。
Sharedディレクトリ上で右クリックし、Add > MVC5 Layout Page (Razor)を選択します。
f:id:codable:20150220180159p:plain
f:id:codable:20150220180203p:plain
今回はレイアウトファイルの名前を_MyLayoutにします。
f:id:codable:20150220180206p:plain
次のようなデフォルトのレイアウトファイルが出来上がります。

今回はこのレイアウトファイルをいじらず、そのまま利用します。

レイアウトの適用

_ViewStart.cshtmlのLayoutプロパティに手順1で作成したレイアウトファイルを設定します。

これで全てのファイルに手順1で作成したレイアウトが適用されます。

コンテンツ作成

レイアウトのRenderBodyが実行されるタイミングで差し込まれるコンテンツを作成します。また、手順1で作成したレイアウトファイルはViewBag.Titleの値も参照します。ViewBag.Titleの値を決定するのもコンテンツファイルの役割です。

セクション

RenderBodyは一つのレイアウトにつき、一つしかもつことが出来ません。次に示すように異なる別々の内容をレイアウトファイルに取り込みたい場合はどうすればよいでしょうか。

こういった時に利用するのがRenderSectionです。RenderSecionを利用することによって、異なる別々の内容をレイアウトファイルに取り込むことができます。

レイアウトファイルに@RenderSection("セクション名")と記述することでセクション名に対応した内容を取り込むことができます。セクションに取り込む内容はコンテンツファイルに@section セクション名{...}の形で記述します。上記の例ではsection1とsection2という2つのセクションの内容を取り込む形で指定されていますので、コンテンツ側で@section section1{...}と@section2{...}の2つのセクションを定義します。

なお、RenderSectionはデフォルトでは必須の処理になります。このため、@RenderSection("セクション名")で指定されているセクション名がコンテンツ側に存在しなかった場合、実行エラーになります。もし、RenderSectionの処理をオプションにしたければ、RenderSectionの第2パラメータにfalseを渡してあげます。こうすることで、RenderSectionの処理をオプションに変更することが出来ます。

Razor 基本構文

ビューエンジン

Razor(レイザー)はASP.NET MVCで利用されているビューエンジンです。
ビューエンジンはHTMLを生成する機能のことを指しています。ビューエンジンを利用してHTMLを生成する場合、どのビューエンジンを利用するかでHTMLを生成するために利用する構文が変わってきます。
従来はWebフォームビューエンジンと呼ばれるビューエンジンが利用されていましたが、現在はRazorが利用されています。これは2つの理由からです。
1つ目はシンプルな記述ができること
2つ目はコーディングミスによるHTMLエスケープが防止できること
上記に関する詳細な理由については次のページに丁寧に纏められてありますので参照してください。
ASP.NET MVC のビューは ASPX ではなく Razor を - miso_soup3 Blog

Razor構文

では、Razorを利用したHTMLを生成する方法を見ていきましょう!
なお、ここに記載している内容は次の環境を利用して動作確認を行っています。

  1. Visual Studio Community2013
  2. ASP.NET MVC5
コメント

Razorでは@*と*@で囲った箇所はコメント扱いになります。

コードブロック

cshtmlの中にコードを埋め込みたい場合、@{}の中に記述します。

ここには通常のC#のコードを記述することが可能です。変数定義やif文、for文を利用して処理を行うことが可能です。

値の取得

定義されている変数は変数名の前に@を付けることで取得することができます。また、配列、辞書の値も同様に@をつけることで値を取得することができます。ただし、配列の場合には@配列[添字]、辞書の場合は@辞書[キー名]として値を取得します。

また、コードブロックの中では<tag>...</tag>の形が出現すると、その部分は自動的に静的コンテンツとみなされます。この特徴を利用して変数、配列、辞書の値を展開して、htmlの中に埋め込んでいます。
注意が必要なのは演算子と変数の組み合わせです。Razorでは変数名のあとの演算子(+,-,*,/などなど)はコードとして有効なものではないと認識します。このため、例えば@price*100と書いても「*100」は単なる文字列と認識されてしまいます。このため、演算子と組み合わせて値を出力したい場合は@()を利用してどこまでコードとして有効なのかを明示してあげます。先の例では@(price*100)と明示してあげれば意図した結果が出力されます。

条件分岐

通常のhtmlの中にif文を埋め込みたい場合、@if(条件式){ 任意の内容を記述 }の形で埋め込むことができます。

@if(条件式){ }を利用した場合、「}」の位置までがコードブロックとみなされます。コードブロックの中では<tag>...</tag>の形が出現すると、その部分は自動的に静的コンテンツとみなされるのでした。このため、通常、if文の条件を満たした時に、何かhtmlタグを表示させたい場合、次のように記述します。

その他、if-else文、if-elseif-else文、if文の入れ子は次のようになります。if(条件式){ }の中は基本、コードブロックとして扱われますので、例えばif文の入れ子をした時、入れ子のifには@が不要であることに注意してください。

その他、条件分岐としてswitchを利用することもできます。

繰り返し文

繰り返し処理を行いたい場合はwhile,for,foreach文を利用することができます。配列や辞書の繰り返しにはforeachを利用し、それ以外の場合にはwhileかfor文を利用するとよいでしょう。

関数の定義

@functionsを利用して独自の関数を定義することが可能です。

ただし、ここで定義した関数は別のビューで利用することはできません。再利用できないコードは保守の観点から見てよくありませんのでビューの中では関数はなるべく利用しないようにしたほうがよいでしょう。ビューの中で関数を利用したくなった場合、その処理はコントローラ側で出来ないのかをよく
検討したうえで利用するのがよいでしょう。

その他

@を単なる文字として扱いたい時(エスケープしたい時)は、@@の記述することで@を単なる文字として扱うことができます。