.net column
.NET開発者のためのブログメディア

プログラムコード

ASP.NET MVC Framework活用講座その3【Razorの構文】

2020年03月30日

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-】

文字列連結や計算などを行う場合には、この書き方だと失敗します。
空白文字を終了コードと自動認識するため、カッコでくくっておく必要があります。

修正例

【インライン式 –失敗例2-】

文章中に@が入り、文字列として認識されてしまっているため、意図したとおりに表示されません。

修正例

@の後ろから()でくくることによって、正しく認識されるようになります。

【コード・ブロック式 –失敗例-】

修正例

@code~End codeでブロックを作って記述する形式でも表せます。
ただし、コード・ブロック中では通常の記述同様、文の終了に”;“を付けないとエラーになるため注意が必要です。

@は文中に使うと通常の文字扱いになる

これもRazor構文の大きな特徴ですが、予約文字である“@”を文中に入れると文字列扱いになってしまうことに注意してください。先頭にくる場合には、予約語としての役割を果たしますが、文中に来た場合にはエスケープ処理しなくとも文字として認識されます(逆に先頭に付けたい場合には“@@”と重ねてエスケープ処理する必要があります)。

Razor PagesでWebアプリを作成

最後にVisual Studioを使って、簡単な「ASP.NET Core Razor Pages」アプリを作成してみましょう。

今回は、次のイメージのような、名前を入力してボタンをクリックすると、ラベルに「○○さんこんにちは!」と表示するシンプルなWebアプリを作成します。

Webアプリの完成予想

Visual Studioを起動し、プロジェクトテンプレートに「ASP.NET Core Web アプリケーション」選択します。

ASP.NET Core Web アプリケーション

プロジェクト名や、保存場所を選択します。

プロジェクトの詳細入力

「.NET Core 3.1」と「Web アプリケーション」を選択し「作成」をクリックします。

ASP.NET Core Web アプリケーションの作成

プロジェクトが作成され、ソリューションエクスプローラにスタータープロジェクトが表示されます。

ソリューションエクスプローラー

サンプルアプリ用に、コードを編集していきます。
まず、Index.cshtmlを開き、テキストボックス、ボタン、ラベルの3つの要素を配置します。

次に、Index.cshtml.csを開き、IndexModelクラスに名前とラベルに表示するメッセージを格納するプロパティを追加します。
さらに、doPostメソッドを追加し、送信ボタンがクリックされPOSTされたときに、ラベルに表示するメッセージを編集する処理を記述します。

ここまでの手順で、今回のサンプルWebアプリは完成です。 Visual Studioで実行して動作を確認してみてください。

PG
ASPXと比べてシンプルに書ける分、少しコツがいりそうな感じですね。
PM
多少間違っても動いてしまいますから、意図した動きになるように書くには正しい構文を覚えていく必要がありますよ。

エスケープ文字“@”の使い方に注意

Razor構文では、@を接頭子にしているため、使い方を間違うと識別されないことや、意図した動作にならない可能性があります。そのため、どのようなケースでうまくいくのか、失敗するケースはどうであるかを知り、コードを記述していく必要があるでしょう。

>>>ASP.NETの案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs