Razor構文の基本

この章ではRazor構文の基本原則を説明します。

Razor構文でできる最も基本的なことは、変数名や関数名に@（アットマーク）を付けることによりサーバーサイドに存在するものにアクセスできることです。前章ではいくつかの例を見てきました。そこではHTML、テキスト、そしてサーバーサイドの変数を以下のようにすべて混在させることが可能でした。

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

上記の式は、テキストをname変数（別の場所で宣言されている必要あり）の中身とともに出力し、DateTimeクラスのNowプロパティから現在時刻にアクセスします。シンプルな構文のため、コードは非常に読みやすくなっています。

@プレフィックスはクラス内の変数やプロパティにアクセスできるだけではありません。Razorでは以下に示す例のように、インラインの制御文、コードブロック、コメントなどほぼすべてのものに対して@プレフィクスが用いられます。

HTMLエンコード

上記に示すような暗黙的なRazor構文を用いる場合、出力値は自動的にHTMLエンコードされることに注意してください。この挙動は通常は望ましいのですが、時として、そのまま出力するのではなくHTMLとしてブラウザーに解釈してほしいことがあります。これにはHtmlクラスのRaw()メソッドが使えます。次の事例で違いを確認してみましょう。

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

結果は以下のようになります。最初の行ではHTML文字列がテキストとしてそのまま出力されている（HTMLエンコードされている）一方で、2行目はHTMLとして解釈され、文字が太くなります。

<b>Hello, world!</b>

Hello, world!

明示的な式

上記の最初の例では、いわゆる暗黙的な式を用いました。しかし、開発者の意図をパーサーに明確に伝えるため、明示的に別の形を用いることが必要なこともあります。そのような場合のために、Razorには明示的な式が用意されています。括弧で式をくくることです。これによって、パーサーが開発者の意図を理解でき、Razor式の内部で計算などができるようになります。

以下に例を示します。

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

@文字に続いて括弧が続いていることに注目してください。括弧を2回使っています。1回目はstring型変数のSubstringメソッドにアクセスするため、2回目はRazor式の中で直接簡単な計算を行うためです。結果は以下のようになります。

Hello, John. Your age is: 42.

複数の文によるRazorブロック

変数などにアクセスするだけでは済まない場合、Razorでは@演算子のあとに中括弧を書くことで専用の複数行に渡るコードブロックを定義できます。以下がその例です。

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

ループ、条件文、その他C#言語でおなじみのあらゆるコードをコードブロック内で使えることに注目してください。一つ重要な違いとしては、たとえ1行だけだとしても、パーサーを混乱させないよう、コードブロック内の制御文は中括弧でくくってください。

また、コードブロック内で変数を定義し、必要なら変更し、コードブロック外でもそれを使えるということにも注目してください。

コードブロック内のHTMLタグとプレーンテキスト

上記ような例で、コードブロック内であってもテキストを出力したいことがしばしばあります。その際は、コードブロックを出たり入ったりするのではなく、Razorでは以下のようにコードブロック内にHTMLタグを混在させることができます。

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

RazorはHTMLタグを素直に解釈し、処理すべきコードではなくHTMLであると判断します。では、テキストをタグでくくりたくない場合はどうしたらいいでしょうか？そのような場合のために、Razorには@:演算子が用意されています。

@:This is plain text!

また、プレーンテキストが複数行になる場合は、<text>タグでくくります。以下に両方の構文の完全な例を示します。

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

コード、HTML、そしてテキストがいかに簡単に混在できるかということに注目してください！

Razorによるサーバーサイドのコメント

コードにコメントを残したり、テストのため一時的にコードをコメントアウトしたいことがあります。たいていのプログラミング言語にはコメント用の構文が用意されており、Razorも同様です。HTMLでコメントを使うこともできますが、ブラウザーには出力されるため「View source」オプションで覗くことができます。一方Razorコメントはページのパース時には無視され、ブラウザーには出力されません。

ビューでRazorコメントを使う例は以下のとおりです。

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

Razorコードブロック内では、一般的なC#スタイルのコメントを使うこともできます。

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

まとめ

Razorについて知っておくべき最も基本的な内容を説明しました。これが学習の一歩になるはずです。次章ではさらに高度な内容を見ていきます。