しばやん雑記

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

ASP.NET MVC 3 開発入門 (12) - Razor の文法

ASP.NET

ASP.NET MVC 3 開発入門 - インデックス

ようやく Razor を使ってビューを実装する段階までやってきました。しかし Razor は新しいビューエンジンですので、まずは基本的な文法を学んでいきましょう。

Razor の利点

Razor の基本的な考え方は "@" を識別子として HTML 内に C# コードを埋め込むことです。ASPX の <% %> コードナゲットに比べると非常に短く、そして "@" はタイプしやすい位置にあります。そして、ほぼそのまま C# コードを書くことが出来るので、ASPX の時のようにコードナゲットを大量に書く必要がなくなっています。

それでは具体的な例と ASPX との比較をしながら見ていきます。

HTML エスケープ埋め込み

ASPX

<%: Model.Name %>

Razor

@Model.Name

Razor では基本的に HTML エスケープしてから埋め込むようになっています。これは ASP.NET 4 で追加されたコードナゲットと同じですが、セキュリティリスクを低減するのに役立ちます。

HTML エスケープ無し埋め込み

ASPX

<%= Model.Name %>

Razor

@Html.Raw(Model.Name)

しかし、CMS など HTML タグを使いたい場合もありますので、その場合は Html.Raw ヘルパーメソッドを利用します。

条件分岐

ASPX

<% if (Model.Page > 1) { %>
    <span>text1</span>
<% } else { %>
    text2
    text3
<% } %>

Razor

@if (Model.Page > 1)
{
    <span>text1</span>
}
else
{
    <text>text2</text>
    @:text3
}

@ が頭についている以外は C# とまったく同じに見えますが、ここで注意しなくてはいけない点が一つ。Razor では { 〜 } ブロックの内部はコードブロック、つまり C# コードとして認識されるという点です。

しかし Razor のパーサは優秀なので内部に HTML タグ形式を発見すると、自動的にテキストとして扱うようになっています。このままだと if 文などのブロック内では HTML タグを付けないと静的な文字列を出力出来ないことになってしまうので、Razor では というタグを用意して対応しています。この タグは出力結果には含まれません。

タグを使う以外にも @: 記法を使うことで同じことが可能です。

ループ

ASPX

<% foreach (var item in collection) { %>
    <span><%: item %></span>
<% } %>

Razor

@foreach (var item in collection)
{
    <span>@item</span>
}

C# と殆ど変わりませんが、for や foreach なども if と同様にコードブロックの扱いになりますので、静的な文字列を出力する場合には HTML タグや タグなどを使うことになります。

コードブロック

ASPX

<% 〜 %>

Razor

@{
〜
}

C# コードを書くためのブロックです。そのままでは HTML への出力は行われませんが、前述していますように HTML タグや タグなどを使うことで出力されます。

明示的にコード範囲を指定

Razor

<span>test@(Model.Name)test</span>

Razor のパーサは非常に賢いので、殆どの場合では正しく C# コードとそれ以外のテキストを判別することが出来ますが、どうしても正しく判別できないときがあります。
その場合は上記のように @(〜) 記法を使って明示的にコード範囲を指定することで解決できます。

サーバサイドコメント

ASPX

<%-- 〜 --%>

Razor

@* 〜 *@

HTML のコメントとは異なり、HTML 出力に含まれないコメントを書くことが出来ます。

まとめ

今回、紹介するにあたって条件分岐やループといったように具体的に書きましたが、実際には using や while など予約から始まる文の場合、頭に @ を付けるだけでそのまま書くことが出来ます。しかし、その場合でも { 〜 } ブロック内部はコードブロック扱いになりますので、テキストを出力する場合には注意が必要です。

Razor の基本的な文法は理解できたと思いますので、次回からはビューの細かい実装を行っていきたいと思います。お疲れ様でした。