.NET開発者のためのブログメディア
ASP.NET MVC Framework活用講座その3【Razorの構文】
Razorは、ASP.NET MVC 3から標準で導入されたビュー・エンジンです。自動化が細部にまで行き届いており、ユーザーが正しい文法を意識していなくとも作れてしまう簡便さを備えています。ただ、それが原因で失敗してしまうこともあるので、正しい構文を理解しておくことが重要です。
- PG
- Razor構文ってどういう形式で書いていくんですか？
- PM
- いくつか書き方がありますので、サンプルを交えてみていきましょう。
実行環境
・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で実行して動作を確認してみてください。
- PG
- ASPXと比べてシンプルに書ける分、少しコツがいりそうな感じですね。
- PM
- 多少間違っても動いてしまいますから、意図した動きになるように書くには正しい構文を覚えていく必要がありますよ。
エスケープ文字“＠”の使い方に注意
Razor構文では、@を接頭子にしているため、使い方を間違うと識別されないことや、意図した動作にならない可能性があります。そのため、どのようなケースでうまくいくのか、失敗するケースはどうであるかを知り、コードを記述していく必要があるでしょう。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)