はじめてのASP.Net Razor Pages(Webサイトの作り方編)

<h1>はじめに</h1>
ASP.NetのWebアプリケーションを作成したいと思ったのですが、RazorPagesの記事が少なく感じたので、備忘録も兼ねてまとめます。(やはりMVCが主流？)

今回はWebサイトの作り方編と銘打って、プロジェクトの作成から初回実行までの手順を説明します。

<h1>開発環境</h1>
・Windows10 Home x64

・ASP.net 6.0

<h1>出来上がりのイメージ</h1>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/bb9b5e88-cc69-18e9-654b-1cb6c5b37f38.png)

<h1>開発環境の準備</h1>
まずは開発に必要なコードエディターを用意していきます。
今回はASP.Netの開発に適したVisualStudio2022を使用します。

まだインストールされていない方はこちらからインストールしてください。

https://visualstudio.microsoft.com/ja/vs/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/48009c8a-4d5a-1b43-012f-a6ee3239ce25.png)
※後から簡単に変更できるので、とりあえずASP.NetとWeb開発だけ選んでインストール

次に.NetのSDKをインストールします。
後から変更するのは少し手間なので、最新バージョンを先にインストールします。

https://dotnet.microsoft.com/ja-jp/download/dotnet/6.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/e6bbb4aa-a0d4-fb1d-629a-70051d044eec.png)


<h1>プロジェクトの作成</h1>
ASP.Netでは1つのWebサイトを構成するファイルの集合のことを「プロジェクト」と呼びます。プロジェクトはVisualStudioの機能で数クリックで作成可能なので、さっそく作ってみましょう。


<h2>1. Visual Studio 2022を起動する。</h2>
Windows左下の検索バーに「Visual Studio」と入力すると「Visual Studio 2022」が選択できるので、クリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/c8df4c2f-962c-c80e-2eb5-1e7c80cd037c.png)

<h2>2. 「新しいプロジェクトの作成」を選択する。</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/5855e9ae-9b99-284a-5f0c-327030da722f.png)

<h2>3. 「ASP.NET Core Web アプリ」を選択する。</h2>
「C#」「Web」でソートすると見つかります。「次へ」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/e8e726d3-26d9-eef6-9f08-c5ed39473de9.png)

<h2>4. プロジェクトに名前を付ける。</h2>
　Webサイトに好きな名前を付けられます。

　今回は「SampleWebApp01」にしてみます。
　保存するディレクトリも選択できるので、好きな場所を選択して「次へ」を選択してください。(今回はデスクトップのMyWorkフォルダを選択)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/b2f9ddd3-d44f-67b7-65f8-2a5e2069e0a2.png)

<h2>5. .NETのバージョンを選択する。</h2>
　.NETのランタイム(実行環境)を選択できます。
　最新バージョンである「.NET 6」を選択して、「作成」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/a8415490-fe95-2840-5ec2-0014000415ff.png)

<h2>6. プロジェクトが作成される。</h2>

↓の画面が表示されていれば大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/49fd17ac-f081-411a-42b3-eb23c063e39e.png)

<h1>実行してみる</h1>
まだなにもコードをいじってないですが、この段階でWebページとして動かすことが可能です。赤枠の実行ボタンを押して実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/a4aa2afc-4660-b6dc-e8cc-62e3e7a6f717.png)

以下のページが表示されれば実行成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/d3d721f2-7096-0a88-399b-15a9377fbcdf.png)

ヘッダーのHome,Privacyなどをクリックすると規定のページへ移動することができます。Privacyページに移動するとURLが/Privacyに変化していることを確認してください。ASP.Netではプロジェクトのディレクトリ階層をそのままURLに使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/042e9c8a-3507-00aa-8a47-ebd1f92c3014.png)

実行中のVisual Studioに戻ってPages\Privacy.cshtmlを見てみると、先ほどのPrivacyページのhtmlを確認することができます。(@{}という記載が見られますが、Razor構文というものです。htmlの中でC#の文法を使用することができます。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/e346260e-9ad9-53ea-69da-a65867edd401.png)

<h1>さいごに</h1>
意外に少ない手順で実行できたのではないでしょうか。
次回はRazorPagesとMVCの違いを確認した後、実際に独自のアプリケーションを実装したいと思います。

↓サンプル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954876/8a3ff816-f985-93cc-1620-56dbec8778bb.png)

お疲れさまでした。

次回

https://qiita.com/Pir0/items/18520c110b0acae2fe6c