ASP.NET MVC 08_Razorビューエンジン ～Razor構文 その１～

VisualStuidioCommunity2015/Fw4.5.2/C#

今回はビューエンジンについてです。
ビューエンジンはコントローラーから渡されたデータと、ビューの定義ファイル（cshtmlファイル）を組み合わせ、
サーバー側でレンダリング(HTMLコードに変換)する処理を行います。

ASP.NET MVC で使用できる代表的なビューエンジンは
ASP.NET Webフォームで使用していたASPXエンジンと、ASP.NET MVC3で新たに登場したRazorエンジンがあります。

ASP.NET MVC4ではプロジェクトを作成する時に、ASPXエンジンかRazorエンジンのどちらを使用するか選択できました。
ASP.NET MVC5では選択することができなくなり、標準でRazorビューエンジンが使用されます。

コードナゲット（インライン式）

ビューテンプレート（ビュー定義ファイル）にコードを埋め込んだ部分をコードナゲットと呼びます。
ASPXエンジンでは<%・・・%>と書いていた部分です。
Razorでは「@・・・」の1文字で始まり、閉じる必要がありません。コードナゲットの終わりは自動的に判定されます。

たとえば以下のコードでは「Model.Message」を式とみなします。
実行するとモデルのMessageプロパティの内容が出力されます。

@Model.Message

明示的コードナゲット

Razorでは式の終わりを自動的に判定しますが、明示的に式の範囲を指定したい時もあります。
式の範囲を指定する場合「@（・・・）」と丸かっこで囲みます。

たとえば次の例ではモデルのUserNameプロパティの内容に、静的なコンテンツである「さん」を結合して出力したいとします。
以下のように書くと、モデルに「UserNameさん」プロパティが定義されていないとコンパイルエラーになっていまいます。

@Model.UserNameさん

こんなときは「@(…)」を使用して、明示的にインライン式の範囲を指定します。
以下のコードではModel.UserNameまでを式とみなし、UserNameプロパティの内容に「さん」を結合して出力します。

@(Model.UserName）さん

次の例えはモデルのPriceプロパティの内容(1000)に1.08を掛けて「1080」と出力しようとしたものとします。
しかしPriceプロパティの後の空白が式の終わりと判定されてしまうため、「1000 * 1.08」と出力されてしまいます。

@Model.Price * 1.08

そこで「1080」と出力するために、式の終わりをは明示的に指定します。

@(Model.Price * 1.08）

@のエスケープ

ほとんどの場合、Razorは@がコードナゲットを表しているのかどうかを正しく判定します。
それでも文字列として出力したい@がコードナゲットとして認識されてしまう場合は、@を@@と2重にしてエスケープします。

@@Model.UserNameはモデルのプロパティです。

コードブロック

複数の文で構成されるコード・ブロックを記述したい場合は、「@{・・・}」と波括弧で囲みます。

以下の例ではコードブロック内で変数msgを定義し、コードブロック終了後のコードナゲットで変数msgの内容を出力します。

@{
    string msg = "Hello World";
}
@msg

コードブロック内で変数や文字列を出力したい場合は下記のようにタグで囲みます。

@{ 
    String ptn1 = "パターン１";
    
htmlタグで囲んで： @ptn1
}

タグで囲みたくない場合などは、先頭に「@:」を付けるとその行は静的コンテンツとして出力されます。

@{
    String ptn2 = "パターン２";
    @:複数行で出力するなら @ptn2
}

静的コンテンツが複数行になる場合は、下記のように<text>タグで囲みます。
<text>タグはRazorに静的コンテンツと知らせるためだけのダミータグで、<text>タグ自体は何も出力しません。

@{
    String ptn3 = "パターン３";
    
        複数行で出力するなら
        @ptn3
    
}

コードブロック内ではC#のコードが書けます。

@{
    //コメント     
    int number = new System.Random().Next(1, 10);
    if (number % 2 == 0)
    {
        @:number「@number」は偶数
    }
    else
    {
        @:number「@number」は奇数
    }
}

コメント

Razorでは「@*・・・*@」で囲まれた部分はコメントとみなされます。
HTMLのコメント「<!--・・・-->」は「ソースの表示」で表示されますが、Razorコメントは表示されません。

@*
    ここからはコメントです。

    @Model.Message

    @{
        int number = new System.Random().Next(1, 10);
    }
    ここまではコメントです。
*@