Visual Studio を使用した ASP.NET Web ページ (Razor) のプログラミング

[アーティクル]
07/13/2023

この記事では、Visual Studio または Visual Web Developer Express を使用して、ASP.NET Web ページ (Razor) Web サイトをプログラミングする方法について説明します。

学習内容

Visual Studio のバージョンで ASP.NET Web ページを操作するためにインストールする必要がある内容 (何かがある場合)。

Visual Web Developer 2010 Express に ASP.NET Web ページのサポートを追加する方法。

Visual Studio の機能を使用して、IntelliSense やデバッガーなど、ASP.NET Razor ページを操作する方法。

チュートリアルで使用するソフトウェアバージョン

ASP.NET Web ページ (Razor) 3

Visual Studio 2013

WebMatrix 3

このチュートリアルは、ASP.NET Web ページ 2、Visual Studio 2012、Visual Studio 2010、WebMatrix 2 でも動作します。

WebMatrix やその他の多くのコードエディターを使用して、Razor 構文を使用して ASP.NET Web ページをプログラミングできます。また、Microsoft Visual Studio は、(Web サイトだけでなく) 多くの種類のアプリケーションを作成するための強力なツールセットを提供する、フル機能を備えた統合開発環境 (IDE) です。 ASP.NET Razor ページを操作するには、 Visual Studio 2017 を使用できます。

ASP.NET Razor Web ページを使用したプログラミングに Visual Studio が提供する特に便利な機能は次の 2 つあります。

IntelliSense。 Visual Studio に組み込まれている IntelliSense 機能は、WebMatrix の IntelliSense よりも包括的です。
デバッガー。デバッガーを使用すると、実行中にプログラムを停止し、変数を調べ、コードを 1 行ずつステップ実行することで、コードのトラブルシューティングを行うことができます。

異なるバージョンの ASP.NET Web ページで Visual Studio を使用する

Visual Studio 2017 で ASP.NET Web アプリを開発するには、 ASP.NET と Web 開発 ワークロードをインストールします。

Visual Studio 2012 および Visual Studio 2013 には、ASP.NET Web ページのサポートが含まれています。 (ASP.NET Web ページをサポートするために必要なパッケージは、Visual Studio をインストールするときにインストールされます)。

Visual Studio 2010 には、ASP.NET Web ページの既定のサポートは含まれていません。 Visual Studio 2010 で ASP.NET Web ページを使用するには、ASP.NET MVC パッケージをインストールする必要があります。 ASP.NET Web ページ 2 を取得するには、MVC 4 ASP.NET インストールします。

次の表は、さまざまなバージョンの Visual Studio での ASP.NET Web ページのサポートをまとめたものです。

	Visual Studio 2010	Visual Studio 2012	Visual Studio 2013
ASP.NET Web ページ 2	MVC 4 ASP.NET インストールする	(含まれる)	(含まれる)
ASP.NET Web ページ 3		NuGet を使用して ASP.NET Web ページ 3 に更新する	(含まれる)

Visual Studio 2010 を使用するには、「Visual Studio 2010 での ASP.NET Web ページのサポートのインストール」を参照してください。

WebMatrix から Visual Studio を起動する

WebMatrix でプロジェクトを開始し、Visual Studio に切り替える場合、WebMatrix には Visual Studio でプロジェクトを簡単に開くボタンが用意されています。このボタンを有効にするには、コンピューターに Visual Studio がインストールされている必要があります。次の図は、WebMatrix のボタンを示しています。

Visual Studio を起動する

ボタンをクリックすると、Visual Studio でプロジェクトが開きます。 WebMatrix と Visual Studio を問題なく切り替えることができます。他の環境でファイルが変更され、最新の変更を取得するために再度読み込む必要がある場合は、通知が表示されます。

Visual Studio で Razor サイト ASP.NET 作成する

Visual Studio で ASP.NET Razor Web サイトを作成するには:

Visual Studio を開きます。
[ ファイル ] メニューの [ 新しい Web サイト] をクリックします。
[ 新しい Web サイト ] ダイアログボックスで、使用する言語 (Visual C# または Visual Basic) を選択します。
ASP.NET Web サイト (Razor) テンプレートを選択します。
[OK] をクリックします。

新しいプロジェクトが存在し、作業を開始するのに役立つ既定の Web ページが設定されます。

Using IntelliSense

サイトを作成したので、Visual Studio での IntelliSense の動作を確認できます。

先ほど作成した Web サイト で、Default.cshtml ページを 開きます。
ページ内の <h3> タグの後に、「(ドットを含む)」と入力 @ServerInfo. します。 IntelliSense でヘルパーの使用可能なメソッド ServerInfo がドロップダウンリストにどのように表示されるかに注目してください。
一覧からメソッドを GetHtml 選択し、Enter キーを押します。 IntelliSense によってメソッドが自動的に入力されます。 (C# のメソッドと同様に、メソッドの後に文字を追加 () する必要があります)。メソッドの完成したコードは GetHtml 、次の例のようになります。
```
@ServerInfo.GetHtml()
```
Ctrl + F5 キーを押してページを実行します。ブラウザーに表示されるページは次のようになります。
ブラウザーを閉じます。

デバッガーの使用

Default.cshtml ページの上部で、で始まるPage.Title行の後に、次のコード行を追加します。
```
var myTime = DateTime.Now.TimeOfDay;
```
コードの左側にあるエディターの灰色の余白で、ブレークポイントを追加するには、この新しい行の横をクリック します。ブレークポイントは、何が起こっているのかを確認できるように、その時点でプログラムの実行を停止するようにデバッガーに指示するマーカーです。
メソッドの呼び出しを ServerInfo.GetHtml 削除し、その代わりに変数の呼び出しを @myTime 追加します。この呼び出しでは、新しいコード行によって返される現在の時刻値が表示されます。
F5 キーを押して、デバッガーでページを実行します。設定したブレークポイントでページが停止します。次の図は、ブレークポイント (黄色) を持つエディターでのページの外観を示しています。
[デバッグ] ツールバーで、[ ステップイン ] ボタン (または F11 キーを押します) をクリックして、次のコード行を実行します。このボタンをクリックするたびに、実行を次のコード行に進めます。
変数の値を myTime 調べるには、マウスポインターを置くか、[ ローカル] ウィンドウと [ 呼び出し履歴 ] ウィンドウに表示される値を調べます。 Visual Studio には、変数の値が表示されます。
変数の検査とコードのステップ実行が完了したら、F5 キーを押して、各行で停止せずにページの実行を続行します。すべてのコードのステップ実行が完了すると、ブラウザーにページが表示されます。

デバッガーと Visual Studio でコードをデバッグする方法の詳細については、「チュートリアル: Visual Web Developer での Web ページのデバッグ」を参照してください。

Visual Studio ASP.NET MVC プロジェクトでの Razor の使用

Razor 構文は、ASP.NET MVC プロジェクトでも広く使用されています。 MVC は、動的な Web サイトを構築するための強力なパターンベースの方法です。 ASP.NET Web ページサイトの保守が困難になった場合は、それを ASP.NET MVC アプリケーションに変換することを検討してください。 MVC アプリケーションを作成する例については、「ASP.NET MVC 5 を使用したはじめに」を参照してください。

Visual Studio 2010 での ASP.NET Web ページのサポートのインストール

このセクションでは、Visual Web Developer Express 2010 と ASP.NET Web ページ Tools for Visual Studio をインストールする方法について説明します。

Web プラットフォームインストーラーがまだない場合は、次の URL からダウンロードします。

https://www.microsoft.com/web/downloads/platform.aspx
Web プラットフォームインストーラーを実行します。
[ 製品 ] タブをクリックします。
ASP.NET MVC 4 (ASP.NET Web ページ 2) を検索し、[追加] をクリックします。これらの製品には、ASP.NET Razor Web サイトを構築するための Visual Studio ツールが含まれます。
[インストール] をクリックしてインストールを完了します。