[Razor Pages 入門] その1 環境構築と新規プロジェクトの作成

Razor は、C# や VB.NET で動的な Web ページを作成するための ASP.NET 構文です。

サーバーで Razor ページが読み取られると、HTML をレンダリングする前に、C# コードや VB.NET コードが実行され、HTML がレンダリングされます。 これにより、動的なコンテンツをすばやく生成することができます。

今回は Visual Studio における環境の構築と新規で Razor Pagesのプロジェクトを作成する方法を説明します。

Visual Studio における環境構築

ここでは、Visual Studio Community 2019 を使用して環境を構築する方法について説明をします。Visual Studio Professional 2019 でも Visual Studio 2019 Enterprise でも同様です。

はじめに Windows 10 の「スタートメニュー」を表示して、一覧から「Visual Studio Installer」を選択します。

Visual Studio Installer の選択

続いて、「インストール済み」タブで [変更]ボタンをクリックします。

「インストール済み」タブ

次に、「ASP.NET と WEB開発」にチェックを付け、右下の [変更] ボタンをクリックします。

ASP.NET と WEB 開発

あとはインストールが完了するのを待ちます。

プロジェクトの作成

「新しいプロジェクトの作成」で「C#」「Windows」「Web」で作成するプロジェクトテンプレートの絞り込みを行います。一覧で「ASP.NET Core Web アプリケーション」を選択後、右下の [次へ] ボタンをクリックします。

新しいプロジェクトの作成

続いて、プロジェクト名と保存先を入力して [次へ] ボタンをクリックします。

プロジェクト名と保存先の入力

最後に、「新しい ASP.NET Core Web アプリケーションの作成」が表示されるので「Web アプリケーション」を選択し [作成] ボタンをクリックします。

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

以上でプロジェクトの作成は完了です。

実行してみる

まずは、何も変更せずに実行をしてみましょう。

以下のように「Welcome」が表示されたら成功です。

Welcome ページの表示

ちなみに、ページ内上部にある「Privacy」をクリックすると以下のようなページが表示されます。

iesPrivacy ページの表示

Razor Pages のプロジェクト構成

Razor Pages のプロジェクトには Controllers フォルダと Views フォルダがなく、Pages フォルダに Razor 関連のファイルが格納されています。

例えば、トップページは index.cshtml と index.cshtml.cs という2つのファイルで構成されています。*.cshtml.cs ファイルは MVC モデルの ViewModel と Action メソッド に相当します。

プロジェクト構成

また、css ファイルや JavaScript ファイルは、wwwroot に格納されています。

プロジェクト構成

まとめると、以下のようになります。

Please follow and like us: