ASP.NETのRazor入門～Razorとは？や使い方をご紹介

投稿日：2021年8月6日更新日：2021年8月7日

＜目次＞

(１) ASP.NETのRazor入門～Razorとは？や使い方をご紹介
　 (１-１) Razorとは？
　(１-２) 基本構文
　 (１-３) サンプルプログラム

(１) ASP.NETのRazor入門～Razorとは？や使い方をご紹介

(１-１) Razorとは？

RazorはHTML（XML等も可）に対して、C#やVBのプログラムを埋め込んで、画面に対してプログラミングの「繰り返し（for）」や「分岐（if）」といった処理を可能にする機能で、Razorの事を「ビューエンジン」と呼んでいます。

（図１１１）Razorエンジンを用いたビューのイメージ

ASP.NETのビューエンジンとしては元々ASPXエンジンがありましたが、ASPXは<% … %>でコードを囲う記述が必要だったのに対して、Razorエンジンでは「@」を先頭に付けるだけでOKといった簡便さもあります。

＞目次にもどる

(１-２) 基本構文

●「式の値」を埋め込む場合：「@…」

式の値を埋め込む場合は、埋め込むコードの先頭に「@」を付ける事で、HTML中にC#プログラムを埋め込む事ができます。この記述方法をコードナゲットと呼びます。

（例）連携されたModelのTextBookオブジェクトのNameプロパティの値を埋め込む

@Model.TextBook.Name

これをHTMLのタグ等と組み合わせてViewに表示します。

（例０）HTMLの<h2>タグで囲った例

<h2>@Model.TextBook.Name</h2>

●「複数行のコード」を埋め込む場合：「@{…}」

複数行のコードを埋め込む場合は、先頭の「@」の後ろにブロック「{ }」が続き、その中にコードを記述します。

（例１）ブロック

@{
    int price = 800;
    string message = Model.TextBook.Name + "は税込み" + price + "円です";
}

（例２）foreachブロック

@foreach (var school in Model.Schools)
{
    //# 処理
}

（例３）ifブロック

@if (Model.Schools.Count > 0)
{
    //# 処理
}

注意点として、先ほどの「@…」はあくまで「式の値」を埋め込むものなので、@{ViewBag.Title = “Home Index”;}のように式を埋め込む事が出来ません。

一方で「@{…}」は値の代入やメソッドの呼び出しといった処理を記述する事ができ、C#のプログラムを実際に埋め込んでいると感じるのはこちらかも知れません。

●ブロック内にHTMLを記述

また「@」で記述したコードの中に、逆にHTMLを含める事もできます（HTMLとC#が入り混じっていてもOK）。上の（例２）（例３）でいうと、次のような記述が可能です。

（例２＋）

@foreach (var school in Model.Schools)
{
    //# ↓HTMLの<div>タグで「@school.Name」を画面表示
    <div>@school.Name</div>
}

（例３＋）

@if (Model.Schools.Count > 0)
{
    //# ↓HTMLの<div>タグで下記文章を画面表示
    <div>@Model.Schools.Count 校が教科書「@Model.TextBook.Name」を使っています</div>
}

＞目次にもどる

(１-３) サンプルプログラム

（Viewサンプル）

@model ViewModelTest.ViewModels.TextBookViewModel

（例１）ブロック

@{
    int price = 800;
    string message = Model.TextBook.Name + "は税込み" + price + "円です"; 
}
<div>教科書名：@Model.TextBook.Name</div>
 
<br />

（例２）foreachブロック

@foreach (var school in Model.Schools)
{
    //# 処理
    <div>@school.Name</div>
}
 
<br />

（例３）ifブロック

@if (Model.Schools.Count > 0)
{
    //# 処理
<div>@Model.Schools.Count 校が教科書「@Model.TextBook.Name」を使っています</div>
}
 
<div class="jumbotron">
    <h3>本文</h3>
    <p class="lead">あああああああ</p>
</div>

View以外の他の部分のサンプルコードは別記事で掲載しているものと全く同じなので、それぞれ下記リンクを辿ってコピペして頂けたらと思います。

（ViewModelサンプル）

⇒ビューに複数のモデルを連携する方法の「STEP1：ViewModelの作成」

（Controllerサンプル）

⇒ビューに複数のモデルを連携する方法の「STEP2：コントローラー（Controller）の追記」

（Modelサンプル）

⇒ビューに複数のモデルを連携する方法の「STEP3：ビュー（View）の追記」

（実行結果）

＞目次にもどる