Razor　基本構文 - Codable Tech Blog

ビューエンジン

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

Razor構文

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

Visual Studio Community2013
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を利用して独自の関数を定義することが可能です。

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

その他

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