Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

ASP.NET C#

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

投稿日:2021年8月6日 更新日:

<目次>

(1) ASP.NETのRazor入門~Razorとは?や使い方をご紹介
 (1-1) Razorとは?
 (1-2) 基本構文
 (1-3) サンプルプログラム

(1) ASP.NETのRazor入門~Razorとは?や使い方をご紹介

(1-1) Razorとは?

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

(図111)Razorエンジンを用いたビューのイメージ

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

(1-2) 基本構文

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

式の値を埋め込む場合は、埋め込むコードの先頭に「@」を付ける事で、HTML中にC#プログラムを埋め込む事ができます。この記述方法をコードナゲットと呼びます。
 
(例)連携されたModelのTextBookオブジェクトのNameプロパティの値を埋め込む
@Model.TextBook.Name
 
これをHTMLのタグ等と組み合わせてViewに表示します。

(例0)HTMLの<h2>タグで囲った例
<h2>@Model.TextBook.Name</h2>
 

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

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

(例1)ブロック
@{
    int price = 800;
    string message = Model.TextBook.Name + "は税込み" + price + "円です";
}
 
(例2)foreachブロック

@foreach (var school in Model.Schools)
{
    //# 処理
}
 
(例3)ifブロック

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

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

●ブロック内にHTMLを記述

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

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

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

(1-3) サンプルプログラム

(Viewサンプル)
@model ViewModelTest.ViewModels.TextBookViewModel
(例1)ブロック
@{
    int price = 800;
    string message = Model.TextBook.Name + "は税込み" + price + "円です"; 
}
<div>教科書名:@Model.TextBook.Name</div>

<br />
(例2)foreachブロック
@foreach (var school in Model.Schools)
{
    //# 処理
    <div>@school.Name</div>
}

<br />
(例3)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サンプル)
 
(Controllerサンプル)
 
(Modelサンプル)
(実行結果)

目次にもどる 

Adsense審査用広告コード


Adsense審査用広告コード


-ASP.NET, C#

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法+実際のソース例も掲載

<目次> (1) C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処法 (1 …

Visual Studioのプロジェクトを別ソリューションに移動する手順

  <目次> (1) Visual Studioのプロジェクトを別ソリューションに移動する手順  (1-1) プロジェクトを別ソリューションに移動する手順  (1-2) 参考①:「.cspr …

C#のabstract(抽象クラス)とは?継承やoverrideの手順や使い方をご紹介

<目次> (1) C#の抽象クラスやabstractとは?意味や使い方をご紹介  (1-1) 抽象クラスとは?  (1-2) 抽象クラスの使い方   (1-2-1) 抽象クラスの定義   (1-2-2 …

ASP.NETの既存プロジェクトに単体テストプロジェクトを追加する手順

<目次> (1) ASP.NETの既存プロジェクトに単体テストプロジェクトを追加する手順  (1-1) 新規プロジェクトを作成  (1-2) 参照の追加  (1-3) 単体テスト用のコードの記述  ( …

C#で文字列をタブやスペースで区切り配列に格納する方法

<目次> (1) C#で文字列をタブやスペースで区切り配列に格納する方法  (1-1) 基本構文  (1-2) 基本構文サンプルプログラム  (1-3) 応用構文  (1-4) 応用構文サンプルプログ …

  • English (United States)
  • 日本語
Top