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

ASP.NET MVC

.NET
ASP.NET

公開日時: 2020-03-30 　更新日時: 2022-06-13

この記事でわかること

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つのサンプルコードを失敗例とともに紹介していきます。

【インライン式　–正しい記述-】

＠test.プロパティ名

1	＠test.プロパティ名

＠に続けてオブジェクト名を記述します。

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

＠test.プロパティ名　& 　hogehoge

1	＠test.プロパティ名　& 　hogehoge

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

修正例

＠(test.プロパティ名　& 　hogehoge)

1	＠(test.プロパティ名　& 　hogehoge)

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

これは＠test.プロパティ名 です。

1	これは＠test.プロパティ名です。

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

修正例

これは＠(test.プロパティ名) です。

1	これは＠(test.プロパティ名) です。

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

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

＠Code
　Dim test = “hoge”
End code

＠Code

　Dim test = “hoge”

End code

修正例

＠Code
　Dim test = “hoge”;
End code

＠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を開き、テキストボックス、ボタン、ラベルの３つの要素を配置します。

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

@page

@model IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ViewData["Title"] = "Home page";

}

<p>

名前：<input asp-for="Name" /><input type="submit" />

</p>

<p>@Model.Message</p>

</form>

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

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 + "さんこんにちは！";
    }
}

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

ASP.NET MVC FrameworkのRazor構文でできること

インライン式とコード・ブロック式

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

Razor PagesでWebアプリを作成

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

ASP.NET新着案件New Job

Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】

Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】

営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】

Web受注システム開発/VB.NET/東京都港区/【WEB面談可】

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

ASP.NET MVC FrameworkのRazor構文でできること

インライン式とコード・ブロック式

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

Razor PagesでWebアプリを作成

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

ASP.NET新着案件New Job

Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】

Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】

営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】

Web受注システム開発/VB.NET/東京都港区/【WEB面談可】

関連記事Related Posts

【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する

【ASP.NET MVC入門その2】ASP.NET MVCでModelクラスの実装

【ASP.NET MVC入門その3】ASP.NET MVCでControllerクラスの実装

【ASP.NET MVC入門その4】ASP.NET MVCでViewクラスの実装

ASP.NET MVC Framework活用講座その1【ルーティング】