.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. .NET
  4. ASP.NET
  5. ASP.NET MVC Framework活用講座その3【Razorの構文】

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

  • .NET
  • ASP.NET
公開日時:   更新日時:
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-】

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

    修正例

    【インライン式 –失敗例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で実行して動作を確認してみてください。

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

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

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

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

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

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

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

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    ASP.NET新着案件New Job