ASP.NET MVC Framework活用講座その3【Razorの構文】
Razorは、ASP.NET MVC 3から標準で導入されたビュー・エンジンです。自動化が細部にまで行き届いており、ユーザーが正しい文法を意識していなくとも作れてしまう簡便さを備えています。ただ、それが原因で失敗してしまうこともあるので、正しい構文を理解しておくことが重要です。
- プログラマー
- Razor構文ってどういう形式で書いていくんですか？
- プロジェクト
マネージャー - いくつか書き方がありますので、サンプルを交えてみていきましょう。
実行環境
・Visual Studio 2019（.NET Core 3.1）
ASP.NET MVC FrameworkのRazor構文でできること
Razor構文は、ASP.NET MVC、ASP.NET Webページなどで使えるビュー・エンジンの1つです。
最大の特徴は、そのシンプルな構文です。プロパティ・メソッドなどの動的な値をHTMLコードに出力する時に、それらの先頭に「@」を付けるだけで簡単に出力でき、さらにクロスサイトスクリプティング（XSS）対策のためのエスケープも自動で行われます。
Razorは使用する言語によってファイルの拡張子が異なり、C#の場合は拡張子が「.cshtml」、Visual Basicの場合は「.vbhtml」でファイルを作成します。
構文には、「インライン式」と「コード・ブロック式」があります。ASPXとは多少異なる書き方ではありますが、終了デリミタの”;”を記述する必要がないことが大きな特徴です。
また、.NET 5でASP.NET Web Formsが廃止される予定となり、その移行先としても注目を集める「ASP.NET Core Blazor」でも、Razor構文を使用してWebアプリを開発します。
インライン式とコード・ブロック式
簡単なサンプルですが、インライン式とコード・ブロック式の2つのサンプルコードを失敗例とともに紹介していきます。
【インライン式 –正しい記述-】
|
1
|
＠test.プロパティ名
|
＠に続けてオブジェクト名を記述します。
【インライン式 –失敗例1-】
|
1
|
＠test.プロパティ名 & hogehoge
|
文字列連結や計算などを行う場合には、この書き方だと失敗します。
空白文字を終了コードと自動認識するため、カッコでくくっておく必要があります。
修正例
|
1
|
＠(test.プロパティ名 & hogehoge)
|
【インライン式 –失敗例2-】
|
1
|
これは＠test.プロパティ名 です。
|
文章中に＠が入り、文字列として認識されてしまっているため、意図したとおりに表示されません。
修正例
|
1
|
これは＠(test.プロパティ名) です。
|
＠の後ろから()でくくることによって、正しく認識されるようになります。
【コード・ブロック式 –失敗例-】
|
1
2
3
|
＠Code
Dim test = “hoge”
End code
|
修正例
|
1
2
3
|
＠Code
Dim test = “hoge”;
End code
|
@code～End codeでブロックを作って記述する形式でも表せます。
ただし、コード・ブロック中では通常の記述同様、文の終了に”;“を付けないとエラーになるため注意が必要です。
＠は文中に使うと通常の文字扱いになる
これもRazor構文の大きな特徴ですが、予約文字である“＠”を文中に入れると文字列扱いになってしまうことに注意してください。先頭にくる場合には、予約語としての役割を果たしますが、文中に来た場合にはエスケープ処理しなくとも文字として認識されます（逆に先頭に付けたい場合には“＠＠”と重ねてエスケープ処理する必要があります）。
Razor PagesでWebアプリを作成
最後にVisual Studioを使って、簡単な「ASP.NET Core Razor Pages」アプリを作成してみましょう。
今回は、次のイメージのような、名前を入力してボタンをクリックすると、ラベルに「○○さんこんにちは！」と表示するシンプルなWebアプリを作成します。
Visual Studioを起動し、プロジェクトテンプレートに「ASP.NET Core Web アプリケーション」選択します。
プロジェクト名や、保存場所を選択します。
「.NET Core 3.1」と「Web アプリケーション」を選択し「作成」をクリックします。
プロジェクトが作成され、ソリューションエクスプローラにスタータープロジェクトが表示されます。
サンプルアプリ用に、コードを編集していきます。
まず、Index.cshtmlを開き、テキストボックス、ボタン、ラベルの３つの要素を配置します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@page
@model IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "Home page";
}
<form method="post">
<p>
名前：<input asp-for="Name" /><input type="submit" />
</p>
<p>@Model.Message</p>
</form>
|
次に、Index.cshtml.csを開き、IndexModelクラスに名前とラベルに表示するメッセージを格納するプロパティを追加します。
さらに、doPostメソッドを追加し、送信ボタンがクリックされPOSTされたときに、ラベルに表示するメッセージを編集する処理を記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ublic class IndexModel : PageModel
{
[BindProperty]
public string Name { get; set; } //プロパティを追加
public string Message { get; set; } //プロパティを追加
private readonly ILogger<IndexModel> _logger;
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public void OnGet()
{
}
// ↓のメソッドを追加
public void OnPost()
{
this.Message = this.Name + "さんこんにちは！";
}
}
|
ここまでの手順で、今回のサンプルWebアプリは完成です。 Visual Studioで実行して動作を確認してみてください。
- プログラマー
- ASPXと比べてシンプルに書ける分、少しコツがいりそうな感じですね。
- プロジェクト
マネージャー - 多少間違っても動いてしまいますから、意図した動きになるように書くには正しい構文を覚えていく必要がありますよ。
エスケープ文字“＠”の使い方に注意
Razor構文では、@を接頭子にしているため、使い方を間違うと識別されないことや、意図した動作にならない可能性があります。そのため、どのようなケースでうまくいくのか、失敗するケースはどうであるかを知り、コードを記述していく必要があるでしょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
ASP.NET新着案件New Job
-
Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】
月給50万～60万円東京都港区(品川駅) -
Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】
月給25万～35万円東京都港区(品川駅) -
営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】
月給50万～60万円東京都江東区(木場駅) -
営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】
月給25万～35万円東京都江東区(木場駅) -
営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】
月給35万～41万円東京都江東区(木場駅) -
Web受注システム開発/VB.NET/東京都港区/【WEB面談可】
月給45万～60万円東京都港区(品川駅)
関連記事Related Posts
-
【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する
「ASP.NET MVC」を使用してWebアプリケーションを作成します。 この入門シリーズでは、ASP.NET MVCに必要なModel、View、Controllerの内容を確認します。 初回は、MVCを利用して、「H […]
-
【ASP.NET MVC入門その2】ASP.NET MVCでModelクラスの実装
「ASP.NET MVC」を使用してWebアプリケーションを作成します。 ASP.NET MVCでWebアプリケーションを作成する際、データのやりとりを するのに使用するのが、MVCの「M」の部分となるModelです。 […]
-
【ASP.NET MVC入門その3】ASP.NET MVCでControllerクラスの実装
「ASP.NET MVC」を使用してWebアプリケーションを作成します。 ASP.NET MVCでWebアプリケーションを作成する際、様々なビジネスロジックを実装します。中でもデータの取得や画面表示をコントロールするのが […]
-
【ASP.NET MVC入門その4】ASP.NET MVCでViewクラスの実装
「ASP.NET MVC」を使用してWebアプリケーションを作成します。 ASP.NET MVCでWebアプリケーションを作成する際、画面を表示するためのロジックを実装するのが、MVCの「V」の部分となるViewです。 […]
-
ASP.NET MVC Framework活用講座その1【ルーティング】
ASP.NET MVC Frameworkは、リクエスト内容であるURLに基づいて、実行されるプログラムが決定されるという仕組みとなっています。 この時、ルーティングという機能を使用することで、実行されるプログラムを切り […]
